Your Online Resource Centre
How to Add a Favicon to your Website A ico Image which shows in a Favourites Folder
By: Paul Symonds
You may in the past have saved a website into your favourites folder and then been surprised in the future when you went back to the site and found that a small 16x16 pixel icon/image showed next to the website name. How did that get there you may be wondering. Similarly, you may sometime shave saved web files to your desktop and wondered what this favicon file is all about? If you have experienced these situations, or if you just want to know how to create what is known as a favicon, let me explain.
A favicon.ico file is the image which is the image you see in the Favourites folder. When this file is created and saved to the ROOT directory on a host server for your website, which you can usually upload when you FTP your other website files, it will show when others save your site to their own favourites folder. The image icon also shows in the address bar.
So how do you create a favicon.ico
You can use any graphics package to create a 16x16 image. I use Photoshop, but you can use any graphics package of your choosing. You may prefer Paint Shop Pro for example. The problem you will find is that is it very very difficult to create an image that means anything when it is so small. 16x16 pixels is very small and finding an image style you can design, which relates to the site, is not easy. You might have to play around with some ideas first. Probably one of the nicest I have designed to date you can see when saving investsicily.com to your favourites (you can always delete it straight afterwards, but it does show a classic example of a good 16x16 pixel image: a picture of a house for a real estate website in this case.
Changing the file to type .ico
You HAVE to change the file to a .ico file (an icon file) for it to work as a favicon and as far as I know, you cannot do this is most graphics packages. By going though, to ww.html-kit.com/favicon you can simply browse for your 16x16 created bmp image and then it will create an icon file for you, which you can then save to your machine. You then simply upload this file to your web-root folder.
You should now be all set and be able to create and use favicons!
