A favicon (abbreviation for “favorite icon”) is that small icon displayed on the browser URL bar before the address, on the bookmark lists at the left of the text, navigation tabs and on shortcuts of websites on the desktop.
The purpose of the favicon is to give a nice look to your website and also to create a specific brand image of your logo. It also differentiates your website from others in the long list of favorites and makes your website it stand out. Other than that it won’t increase traffic or generate any additional income for your website.
Here is how a favicon looks like in a browser (internet explorer and firefox samples shown below)
A few favicons of popular websites are below
There are two ways to create your favicon
A. Get it generated from a number of websites (for the lazy, non technical and time conscious)
Many websites allow you to upload graphics and convert them to the required dimentions and types to generate your favicon. A quick web search will lead you to many websites that do this. Some of them are:
http://www.favicon.cc/
http://www.favicongenerator.org/
http://tools.dynamicdrive.com/favicon/
B. Do it yourself (read the step by step guide to create a favicon below)
A favicon is just a bitmap 16 x 16 pixels icon with the file extension ico. Although support is now provided for favicons that are 32×32, 64×64 with a variety of other file formats like PNG, GIF and JPG
If you are not familiar with pixels, you won’t imagine how tiny a 16×16 space is to design anything, therefore do not focus on drawing award winning pictures on your favicon. A good practice is that it should have few common colors, letters and a simple design. Also you might want the color scheme of your favicon to match the color scheme of your logo or at least the color scheme of your websites.
There are many graphic software packages like Adobe Illustrator (my favorite), Adobe Photoshop and others to design a good favicon. It is better to start with a 64 x 64 pixel size canvas and design your favicon after which you can resize it to a 16 x 16. Doing this ensures that your image does not appear blurry. The last thing to do is save the 16 x 16 image as “favicon.ico” and you are done.
Another method is to start off with a 16 x 16 pixel size canvas and zoom the image to around 1000 times the actual size so that it is easier to work with. Also note that the file should be 16 color (4 bit) and no higher.
After creating your favicon.ico file, where do you put it. Normally the file would be uploaded to the root directory with the name “favicon.ico” but this would vary if you are using other content management software like Joomla or blogging software like WordPress, Typepad. A good method of finding out where your current favicon is stored is to look at the source of the webpage and search for “.ico”
You should normally see something similar or you might also see a full fledged path which will help you identify the file name that the favicon is using as well as the path it is located in
<head>
<title>
<link rel=”shortcut icon” href=”favicon.ico” />
</title>
</head>
Accordingly, if you change the filename of the favicon.ico file, you might need to edit the pages of your website to reflect that in the head section as described above. It is a recommended practice to just leave the name exactly as it is currently being used and place the favicon in the same directory (overwriting the earlier file). This would save you the headache of needing to update the source code of multiple pages.
Finally, to see the fruits of your hard work, just REFRESH the webpage (F5 in most browsers) and you will see it at the left of the address bar. If your favicon still does not appear, you may need to clear the CACHE and then try another refresh. Go ahead and bookmark the website, open a few tabs with the website, drag a shortcut to the desktop and you will see your favicon appear all over the place and you do not need to be an artist or a renowned painter to create your favicon.
For those people more inclined on getting further information on Favicon and its history, visit
http://en.wikipedia.org/wiki/Favicon
I did everything in the article but even then the favicon did not appear. They key was to clear the cache of my browser.
I personally prefer the second method. Starting with a 16 x 16 zoom rather than starting with a 64 x 64 and then re-sampling.