Creating a favourite icon for your web site or web page

On this page: You may have noticed that some web sites have a customised icon that is used when you add it to Internet Explorer's Favourites (OK then - Favorites for US readers and most browser users), and in the address bar in other browsers including Firefox and Opera. Here, Lois shows you how to add a tiny touch of class to your pages for the majority of your site visitors.

Get up there with the big boys - have your own customised Favorites icon. Don't put up with a boring old IE standard Favorites icon (blue 'e').

What is an icon?

The one I am talking about is a particular format of bitmap file, used for various purposes on the Windows desktop. A Windows icon file (extension, .ICO) can have a number of tiny images in it, and Windows will choose the best one to display, depending on various settings on your PC and the application it is using. To cover all bases, you should have at least 16x16 and 32x32 versions, both in 16 and 256 colours. However, 256 colours and 32x32 will do for most users: Windows is reasonably intelligent about resizing, and users of 16-colour monitors are probably accustomed to grainy images (sorry, guys). An extra feature of icons is that you can set a particular colour to be transparent, so the icon can have a non-square outline, for example.

Making the icon

Here, you have two choices: you can be quick, or do it properly!

  1. To do things quickly, make a 32 by 32 pixel image in your usual image editor (MS Paint, Paintshop Pro etc.) and make sure it uses 256 colours. Save it as a BMP (Windows bitmap) or GIF file. Open it in IrfanView or a similar image converter, and save as an icon.

    comparison of real and renamed bitmap icon appearance(In Windows Explorer, you can cheat by renaming the file with a .ICO extension - and as you'll see, the standard Explorer icon changes to the one you just created. Right, I illustrate two sets of real and "cheat" icons - not a lot of difference in Explorer, but only the real ones show up in Favorites. More woe: because transparency is set by the top left pixel, the pretend icon can look very spotty on some backgrounds. But I digress.)

  2. You'll need an icon editor to do things properly, using several different sizes and colour depths. Also essential if you want a transparent background. A web search will turn up lots: MicroAngelo is well-regarded and has all the features for multiple versions and transparency. This page on link to external site PC World lists a number of tools to download, including the two I mentioned.

Designing something that works in such a tiny space is an aesthetic problem that I leave you to solve.

The advantage of 1 is that it's easy and you can use your accustomed tool for the detailed creation. 2 is more time-consuming, but you can do more with the icon, and cater for more visitors' computer settings.

IE Favorites, showing customised iconsAn icon for your whole site in IE

This is the easiest to do and works for Internet Explorer only. Just call your icon "favicon.ico" and put it into the web root (that is, whatever folder corresponds to http://www.yourdomain.com - the one where the home or splash page is. Next time a visitor comes to your site and adds any page to his or her IE Favorites, hey presto, there is your icon.

A useful side effect will be to reduce the number of 404 errors in your web logs - when browsers request the icon, now they will be able get it.

An icon for your whole site in other browsers

You need to do a bit more work to get the benefit of your shiny new icon in other browsers, like Opera and Firefox.

To do this, you need to add a tag like this to every page, in the head section:

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

If you have a site management tool, you should be able to use a search and replace to do this very easily.

An icon for a set of pages

To provide an icon for all the pages in a sub-folder of your web root, drop a "favicon.ico" in the folder. Internet Explorer looks in the local folder before the web root, so this one will be used in preference if a favorite is created. This might also be convenient if your web site doesn't have its own unique domain, for example, if your pages are in http://www.theirdomain.com/mypages.

For other browsers, you need to add a <link> tag (as described above) to the appropriate icon location.

An individual icon for a page

You may decide that you want to have a special icon for a particular page. (For example, I've done it for this page, so you can test by adding temporarily to your own favorites).

To do this, you need to add a tag like this to your page, in the head section:

<link rel="shortcut icon" href="images/thispage.ico" />

- don't forget to replace the file with the name and path to your icon (which can be absolute, or relative as shown here). You can call it anything you like in this case, as long as you have the right extension.

(I must thank Marjolein Katsma at link to external site http://hshelp.com for alerting me to this feature.)

I can't see my favorite icon - what's wrong?

Some things that might be wrong include: