You may have noticed that some sites you visit show an icon in the browser header bar, address bar and/or favorites when added. It’s a simple thing to do but suprisingly many people are not aware of how to achieve this.
If you want to see one in action you can go to www.hungerfordwebdesign.com homepage to see it in action (our icon is our branded “eye”).
Firstly you need to create an icon, to do this you will need either:
a) A good quality image package (photoshop/paintshop/fireworks)
b)Any image editor and this link: http://www.html-kit.com/favicon/ This link also creates animated versions!
Basically you need to create an image which is VERY small (16 pixels (px) x 16 pixels (px) ). This will be icon which is displayed. Some situations will display this icon at 200% (32px x 32px) so check that your icon displays ok at this resolution as well.
If using an editor that allows you to save in a .ico format then this is ultimately what you want. Save your .ico file as favicon.ico (although you can call it whatever you want,it is known as a favicon - FAVorites ICON).
If you are using MSPaint or an editor which does not allow you to save in an ico format then simply save it as a bitmap (.bmp) and then upload the file when you follow the link above.
Once your file is saved you will need to upload it to your hosting provider.
You will then need to edit your pages as follows:
- Open each page
- Within the HEAD (<head>TEXT</head>) sections of your page add the following text
- <link rel=”shortcut icon” href=”favicon.ico” >
Obviously you will need to change the name of the file if you call it anything other than favicon.
Then just test it
If you have any questions or you get stuck at all then please post a comment or drop me an email.













May 23rd, 2008 at 6:07 am
I want to display my website logo in the address bar when I open my website.How?
May 23rd, 2008 at 6:22 am
I want to display my website logo in the address bar when I open my website in IE.In mozilla and opera it is possible.What to do with IE?
May 23rd, 2008 at 11:56 am
Hi Arathi. The logo will display regardless of the browser version (so long as the browser supports the functionality. Simply follow the steps above and you will be fine.