|Home » Articles » Web design|
Favicon.ico file guide
By David Callan
Explorer looks for this file in the same directory as the HTML page currently displayed, if it can't find favicon.ico then the default Internet Explorer icon will be displayed in the address bar. Regarding the viewing of favorites Internet Explorer will check its temp folder to see if favicon.ico is there again if it's not it will display the default white background with a blue 'e' icon.
For a webmaster there are three main advantages to using the favicon.ico 'trick'. Number one is that it helps brand your site with a nice little icon that is easily recognizable. Number two is that it makes your website more professional and cutting-edge. The third advantage is that your entry will stick out among all the others when a previous visitor scans through his or her favorites which is always a good thing as people can revisit your site, maybe this time they'll buy.
Many people have tens and tens of sites bookmarked so you need to use favicon.ico to give you the edge. I highly recommend using it. Now I'm going to tell you how to use the favicon.ico feature in IE5+.
First you need to create an icon file which is exactly 16 X 16 pixels. If the icon is larger or smaller IE5+ will just ignore it. As for the amount of colors in it, 16 is standard. You can use more colors if you want but the more colors you use the larger the .ico file gets and the longer your webpage takes to download.
You know the standards the favicon file has to be, to actually create it you can take one of two routes. The first is to convert an existing 16 X 16 BMP or GIF graphic with 16 - 32 colors into a .ico file using converter software, making sure to save it as favicon.ico
The second is to use software specifically made for creating .ico files. This is probably the best way to go as some BMP and GIF converters produce poor quality .ico files.
You can get plenty of software which will either convert or allow you to create from scratch .ico files by going to http://www.tucows.com, http://www.download.com or any search engine and searching for something like "icon creation tool" or "icon converter tool"
Once you've created your favicon.ico file all you need to do is upload it to any directory on your website that has HTML files. This way when IE5+ searches for favicon.ico it'll be able to find your icon no matter what page from your site the visitor has bookmarked.
Well that's nearly all the areas of favicon.ico covered, except for one. What if you want different icons for different pages or sections on your website? Can it be done? The answer is yes. All you've to do is place the following HTML code in the <head> and </head> tags of your webpage. <LINK REL="SHORTCUT ICON" HREF="differenticon.ico">. SHORTCUT ICON should be kept in uppercase.
Now when someone adds a webpage with that code to their favorites IE5+ will not look for favicon.ico but will look for differenticon.ico and if it's there it'll display it otherwise the default icon will be displayed.
Using favicon.ico or the SHORTCUT ICON code is a nice way to add a unique touch to your site and of course will result in more repeat visitors than if you weren't using it, which is always good for any webmaster.