No Comments Written by Andrew Bonar on October 6, 2008 – 7:59 am

A favicon is an icon that is displayed next to your address in the toolbar of most modern browsers. It also displays in the ‘multiple tabs’, ‘history pane’, drop down list of previously visited sites as well as in the ‘favorites list’ of your browser.

Basically once a website visitor has a copy of your favicon.ico it will be displayed anywhere a link to the website appears.

Now that the favicon is supported in various ways by most browsers (Internet Explorer 4+, Netscape 7+, Mozilla 1+, Firefox 1+, Safari 0.5b+, Camino 1+, Opera 7+, AOL Desktop) it makes sense to spend the time to include one on your site.

There are several good reasons to include a favicon.ico file

• It shows attention to detail as a web designer
• Allows your site to stand out in the favorites list of user
• Allows your site to stand out when a visitor has multiple tabs open
• It simply looks better! Check the examples:

So now you understand I hope, both what an ICO file is and why it is so stylish.

I am sure you are simply itching to implement one on your site. If that is the case you have a couple of options. To fully appreciate why you have these options, and to make an informed choice as to whether you want to take the fast track or to take th time to go the other rout you need to know more about the ICO file format

Why an .ICO file?

There is one distinct advantage to an ICO file over other formats. This file format will allow you to store several versions of an icon within one file, so you can embed a 16×16, 32×32 and 64×64. Whilst the single 16×16 format will suffice for most people, if a user was to create a shortcut to your website on their desktop a much bigger version of your icon appears, a 32×32 pixel version, therefore web developers are increasingly taking full advantage of the .ico format. The limitation of this format is inherit in the fact it needs to work at such as small canvas size 16×16pixels.

Quick start guide

The quick route to creating a favicon is to simply have a 16×16 ico image file located in your server’s root directory. This path means using a pre-existing image (your logo, for example) in GIF or JPEG format and using a graphics editor or online application to convert the image into an ICO file.

1. Create/Choose your GIF/JPEG image file
2. Visit an online converter. There are many free ones available. The one from Maxiscript.com worked just fine for me.
3. Convert your file using the online tool, save the image that is generated as favicon.ico and upload to your root directory on your web-server via ftp. Upload in binary format.

Note for advanced ICO files:

If you want to create multiple sizes of your image and have it embedded in your ICO files then there is a windows application you can use to do this. It is freeware and released by Furred.net:

png2ico GUI++ (binary)

Icon Editors

There are a variety of ICON editors that allow you to draw your icons individually by hand. Go to your favourite software downloads site and search for ICON editors.

Photoshop Users

There is a free (donation-ware) plugin for Photoshop that will help you create your ICO files. Downloading and installing it will allow you to save your files in the ICO format. There is a second plugin which allows you to combine multiple images saved in in the ICO format(16×16 & 32×32) into one single ICO file.

1. Go to the plugin authors site and download and install the plugins in Photoshop or CS2 -
   http://www.telegraphics.com.au/sw/
2. Create a new File in Photoshop and make its size 128×128. This give you a reasonable size canvas to work with. Once complete you can resize your image to 16×16.
3. Save file in .ico format

If there is enough interest we will follow this article up with an in-depth looking at creating icons in Photoshop. Leave feedback if you are interested in such an article.

Advanced Usage

Different favicon according to directory:
Want to use a different favicon according to which directory your web pages are located?
This is relatively simple; just drop a favicon.ico file in the relevant directory and browsers *should* use that instead of the default image in your root directory.

Different favicon according to page:
If there are specific pages that you want to display a favicon for (especially useful if you do not have your own domain name) you can use the LINK tag within your html head on those pages.

Troubleshooting

If your web-host does not support the upload of .ICO files, ask them to include support by dropping them a nice note via email. Failing that, try changing the extension to .BMP, upload the file in binary format and then use an FTP client to rename the file to the correct .ICO format once it is on your webhost. This works in many instances.

Transparent backgrounds, in my experience very hit and miss, sometimes working, sometimes filling the background with a random colour, thereby ruining the whole effect.

Testing favicons can be laborious, so make sure you are happy with your finished design before uploading and testing it in your browser. Once you have tested a favicon it can be difficult to remove from your system (even with delete of your history and cache). So if you are still seeing the old favicon after uploading a new image file, then try testing the site from a different computer.

Bear in mind the implementation is still not robust. So there will be occasions where you simply do not see your favicon. Strange I know, and I cannot say I have the answers as to why this happens, suffice to say it occasionally happens and you should not lose any sleep over it. If you want to be sure your browser/platform supports the favicon then check out this page: http://informationgift.com/ud/faviconic/