Add a site icon (favicon)
These notes cover how to add an icon to every web page in your site.
This icon will be displayed on the tab in most modern web browsers as well as in the list of bookmarked favourites where a visitor has bookmarked your site. If you want to display a different icon on each page then you will find it more appropriate to read these notes instead: how to specify an icon for each individual page. You can combine the techniques on that page with this to have specific icons appearing for specific pages and a common icon for all other pages.
Note: W3C (the World Wide Web Consortium) discourage the use of this method of creating a site wide favourites icon (favicon). This method will not work if you do not have your own domain. It is possible that this method may not work with future browsers and you are encouraged instead to add icons individually to pages - see how to specify an icon for each individual page.
A site wide icon uses a technique known as a "favicon". Its called that because historically the icon was only displayed in the favourites list (and initially only by Microsoft Internet Explorer). "favicon" is short for favourites-icon.
So how do you create a favicon? Its very simple:
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.
- 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.
3. Save it as favicon.ico (in the root)
The icon file must be saved as "favicon.ico" to the root of your website. The root of the website is the very top folder. So if www.cryer.co.uk were your website then www.cryer.co.uk/favicon.ico would return your favicon.ico.
If the icon does not appear when you view the page then try clearing out the browser cache. The icon will appear if you are viewing the site using FireFox. Internet Explorer 6 will display the icon if the page is bookmarked as a favourite.
If you find any errors on this page then please e-mail the author.