Creating a Web Site Icon with favicon.ico

Have you ever seen a web site that has its own icon in your browsers address bar instead of the default html page icon? Or have you ever wondered why, when going through your site logs, you constantly see a 404 error for a file called 'favicon.ico'? Well this tutorial is aimed at you.

Requirements

All you need in order to accomplish this amazing addition to your web site is a single, 16x16 icon (ico) file, and of course - some software capable of working with Icon Files. A good free one to use would be PixelToolbox.

Creating Your New Icon

Launch your icon editor and create the icon you would like in any way you want to. Import from an existing graphic etc or design your own. Just make sure it is no bigger than 16x16 pixels in dimension, and that it doesn't use anymore than the default windows colour palette.

Once you are happy, save the icon in the root of your web site as 'favicon.ico' and upload; That's all there is to it!

NB: In certain browsers you may need to bookmark your site first so that it sends a request for the new icon file. Once that has been done, restart your browser and visit your site and you should see your new icon in the address bar along with your sites url.

By default, putting the favicon.ico file in the root of your web site will apply the icon to every page that is requested. However, you can also create a favicon.ico file for any of the folders in your site so that pages called from that folder will use a different icon!

For more information on this subject - as always - search online from your favorite search engine.