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:
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:
- 16 pixels by 16 pixels
- 32 pixels by 32 pixels
- 48 pixels by 48 pixels
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:
- IrfanView - available from www.irfanview.com. A great program for editing and manipulating all sorts of image files.
- www.chami.com/html-kit/services/favicon/ - an online tool for converting an image to a favicon.ico file.
- http://icofx.ro/ - Excellent icon editor (commercial). This icon editor will allow you to import files and does almost all the work for you.
- IconEdit32 - A great tool for editing and creating icons. Once freeware but no longer. It may be possible to locate older (freeware) versions online. Search for it.
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
- The favicon does not strictly need to be an icon. You can use a small
gif file provided you tell the browser that it is a gif, so use:
<link rel="shortcut icon" href="favicon.gif" type="image/gif">Just be sure to keep the image to 16 x 16 pixels.
- If you use a gif image then you can include an animation. Gif files support simple animations and if you know how to create an animated gif file and use that as your favicon then it will animate for those browsers that support it.
If you find any errors on this page then please e-mail the author.