<

Web 2.0 Favicon Tutorial

Published on
10,195 Points
3,395 Views
3 Endorsements
Last Modified:
Approved
What you will need:
Any version of Photoshop or similar product (examples in Photoshop)
Internet Access
FTP Access to your joomla install or ability to upload images within joomla administrator backend

1. Create Image

Lets start off with creating a new document - 400 x 400 pixels.

favtut4.jpg

Use the Paint Bucket Tool with color - #333333 and fill your image.

favtut1.jpg

Now Use the Ellipse tool to create a large circle, use any styling you want at this point, I went with a red fade.
Remember that any part you do thats small on the 400x400 will not be visible on the favicon 16x16.

favtut2.jpg

Now add the Text you want to see, In this case I used a large letter T.
Remember the favicon is very small so its hard to make out words.
(unless you do a word scroller but that is for another tutorial)

favtut3.jpg
 
Now save your file as a .jpg

2. Convert Image to Favicon

Open your internet browser and paste this link http://www.favicon.cc/ -- Favicon Creator.
Favicon Creator will turn your large image into your joomla sites new favicon.

Once you have browsed to the above site, select Import Image from the left menu.

favtut5.jpg

Browse to the file you created on your PC and saved as a JPEG
Select Keep Dimension
Click Upload

You will now see your favicon, you can adjust it using the built-in editor.

If you are happy, simply download it and you are done.

3. Add Favicon to Web Site

Now either:
replace your favicon.ico within your www (root web) folder of your joomla install;
upload it to the site via media manager; or
use Joomla Administrator upload.

You now have a fancy new favicon.


You can experiment with Favicons within photoshop, the favicon creator website or use any of the ones created by other users.

There is the ability to create animated favicons that display scrolling text, have a look at the examples on the Favicon site.

Note: this can be used for all non joomla sites as well.

Storm
3
Comment
1 Comment
 
LVL 111

Expert Comment

by:Ray Paseur
Great article!  I have never understood why you can't just use a 16x16 PNG file for an icon, but most browsers require the specialized .ico format and it has always been difficult or expensive to get the software that makes these things.  But now -- problem solved.  I love the favicon.cc web service.  Tested it today and it works like a charm.  You can even get your icon on a T-shirt!

If you want to use your newly created favicon file in any HTML web page, include these two lines inside the <head> of the document.  In my experience, one or the other will work for just about every browser that is newer than IE5.  I like to use the fully-qualified URL, since I know it will work for any subdomain or directory of my sites.

Sidebar note: If you change favicon files, you may not see the change immediately.  Mozilla browsers cache these files.
<link rel="icon"          href="http://example.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" />

Open in new window

0

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Join & Write a Comment

Did you know PowerShell can save you time with SaaS platforms? Simply leverage RESTfulAPIs to build your own PowerShell modules. These will kill repetitive tickets and tabs, using the command Invoke-RestMethod. Tune into this webinar to learn how…
A query can call a function, and a function can call Excel, even though we are in Access. This is Part 2, and steps you through the VBA that "wraps" Excel functionality so we can use its worksheet functions in Access. The declaration statement de…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month