What is Favicon.ico? Personalise Your Site's Bookmark

WebmasterCentral

Articles & Guides

Essence of India

Some time back, I had an email from a visitor asking me how I managed to have thefreecountry.com's icon displayed next to my URL in his browser's location bar. In fact, had he checked carefully, he would also have noticed that the icon is also used in his "Favorites" menu.

Internet Explorer ("IE") 5.0 and above has a facility where, if someone bookmarks your website, it associates a particular icon with your website in the bookmark. It tries to obtain that icon by first requesting for "favicon.ico" from the directory of your web page. If it cannot find such a file, it will try to obtain it from the root directory of your website, failing which, it will simply use a default icon for the bookmark.

On the other hand, the favicon.ico file is available, the icon will also be displayed beside your website name in the "Favorites" menu, the location bar in IE, and if the user opens up the "Favorites" folder, it will be the icon used for the link to your site.

What You Need

If you have an Windows icon editor (which you may already have if you have purchased a programming language development system for Windows), you're all set.

All is not lost, however, if you do not have the above. Windows users can still create ICO files with the following tools:

1. Get any graphics editor that can create a GIF or BMP file. For example, the Windows Paint program that comes with Windows can create a BMP file. Actually you can use any graphics editor that can create a graphics file that is supported by IrfanViewer (see next requirement).

2. Download the free IrfanViewer from http://www.irfanview.com/. This is an excellent and free graphics viewer that can not only display a huge variety of graphics formats, but also convert between them. You will need this to convert your graphics file to the ICO format that IE and Windows require.

Creating "FAVICON.ICO"

1. Create an image 16X16 pixels in size. Yes, it is really small and you can't really draw much in it. You should also restrict yourself to the standard Windows 16 colours, although I suspect that 256 colours (which is present on most Windows platforms nowadays) will work fine.

If you like, you can also create a 32X32 pixel icon, which will be scaled to size for the Favorites menu and the location bar. You can even put both 16X16 and 32X32 pixel icons into the same icon file. Windows will use the former for its menus and the latter when the user opens up a folder that is set to display large icons. It's probably not really necessary to do this if you can't be bothered.

2. Save the image. If you have an icon editor, save it as an ICO file (named "favicon.ico", of course) and skip the file format conversion step (below). If you are using Windows Paint, save the image as a BMP file. If you are using another program you might want to try saving it in a GIF format. Even if your program does not support these formats, you might still be able to get away with it if IrfanViewer can load and display that format.

3. Fire up IrfanViewer and open the file you created. Click File | Save as to open the "Save Picture As" dialog box. Select the "Windows Icon" type from the "Save as type" drop down box. Change the name in the "File name" edit box to "favicon.ico", and click the "Save" button. IrfanViewer will automatically convert the file to the format you selected.

4. Upload it to your website. You need not upload one to every directory of your site if you don't want to waste space - simply put it in your root directory and IE will apparently locate it eventually.

Help! My Web Host Doesn't Allow ICO Files!

If your hosting company does not allow files with the .ICO extension to be uploaded, you might try to work around it by uploading it (in binary mode) with some other extension (like GIF). Once it's on your site, rename it using your FTP program to the correct extension.

How Many People are Bookmarking My Website?

This "favicon.ico" actually has a useful side-effect whether or not you bother to put a special "favicon.ico" on your site. You can actually find out the number of IE 5+ users who bookmark your site by simply counting the requests for "favicon.ico" in your web server logs. From that number, you can estimate the total number of people who bookmark your site by applying this formula: number of IE 5 bookmarks divided by the fraction of your visitors using IE 5.

For example, if two-thirds of your visitors use IE 5+, and you get 100 requests for the icon, simply divide 100 by two-thirds to get 150. This is by no means an accurate measure - it does not take into account numerous factors: but at least it can give you a hint of how useful people find your site.

All the best on your website!

About the Author

Christopher S L Heng. Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

Web Designing
Ecommerce Design
Cascading Style Sheets (CSS)
Web Development
Webmaster Resources