Add a custom icon for your site

by Joe Gillespie — Mar 1, 2004

You may have noticed that some sites, including this one, put custom icons into the URL boxes of browsers. It used to be that you could only add 'favicons' in Explorer but now most browsers support them and it's worth the little extra trouble that it takes to do it.

You will need a program that can save .ico file format. This is the standard icon format for Windows so any Windows icon editor will do, and there are many freeware and shareware ones available. Several Mac icon editors can also save in .ico format.

You will also find a Photoshop plugin for Mac or PC called 'icoformat' at http://www.telegraphics.com.au for only $10 that allows you to save a Photoshop (or compatible) image in .ico format.

The icon should be a 16 x 16 pixel image in this instance, that's all the room there is in a URL box. If you make it a different size, it will be resized, usually with pretty disastrous results.

You can't get a lot of detail into 16 x 16 pixels, so something as complex as the WPDFD logo is out of the question. It has to be really simple and being able to distil images down to this tiny size can be an art in itself.

If you try to reduce a larger image down to 16 x 16, you are unlikely to get usable results but it will give you a starting point that you can go in and tweak.

It is best to draw the icon in the icon editor (or a graphic editor) because that gives you the pixel control you need. It is especially useful to be able to edit an enlarged version of the image and simultaneously view the small, actual size one.

These are the colors of the old Windows 16 color palette. I've dithered two of them with a checkerboard pattern to make the intermediate blue/green in the 'P' above.

Now, .ico files can be 16 or 256 colors but you will probably find that your favicon ends up in your browser using the old Windows 16 colour palette. It is best to design it with these colours from the outset for the most predictable results.

Here are the colors.

Having saved the icon file as 'favicon.ico', you then need to upload it to your site and put it into the same directory as your home page (not into an images directory).

You also need to add a link to it on each page on which you want it to appear. The link goes in the <head>...</head> section.

<link rel="shortcut icon" href="favicon.ico">

It can be tedious if you have a lot of pages but some editors can do a site-wide search and replace so you could replace </head> with <link rel="shortcut icon" href="favicon.ico"></head> if you have such a facility.

That's it. You should now have a custom favicon. If it doesn't show up immediately, try doing a shift-reload to refresh the page or put a '?' after the url which fools the browser into thinking that it is a new page that is not already cached.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float