Brian Cryer's Web Resources

Add a page icon (favicon)

These notes cover how to add an icon to a single web page on your site. This icon will be displayed on the tab in modern web browsers as well as in the list of bookmarked favourites where a visitor has bookmarked your page. You can use this technique to add an icon to each page on your site, or if you want the same icon on all of your pages then it might be quicker to follow these notes instead: to add a site icon.

Creating an icon for a page is very simple:

1. Pick or create the image.

2. Convert it to an icon file.

3. Add a link to the icon from each page.

1. Pick or create the image

In many ways this is the hardest part. Just to make life even harder the image must be one of:

Whichever size you go for it is going to be quite small so don't try to have too much detail in it. Also, be aware that if you start with a picture and try to shrink it down then you are more likely to end up with a non-descript blob, so its probably better to draw the image onto an empty canvas.

2. Convert it to an icon file

Once you have your image it must be saved as an icon to the file "favicon.ico". It is important that the file be an icon file. You cannot simply rename the image file and give it a .ico extension because that won't make it an icon file (the internal file format is different).

There are many tools available on the internet for creating icons or for converting an image into an icon, the following is a short list of recommendations:

Save the icon somewhere on your site. It does not matter where on your site you save the icon or what name you give it. Personally I would advise that you save the icon to the same folder as the html file that will use it.

3. Add a link to the icon from each page

For each page that you want to assign an icon to: edit the page using your preferred HTML editor, in the <head> section of the file (so between the <head> and </head>) add the line:

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

replace "favicon.ico" with the name of your icon. You can specify a full path to this file if you wish.

Favicon Tips and Tricks

If you find any errors on this page then please e-mail the author.