Have you ever seen the mysterious 'favicon.ico' error in your site stats? Under Internet Explorer 5, when someone adds a site to their Favorites, the browser looks for a file called 'favicon.ico' on the server. This file is the graphic that is displayed in the users Favorites menu and stands for 'Favorites Icon'. If no icon is found, it is reported as a 404 (File not found) error, and the browser uses the default blue Internet Explorer icon.

Want to see an example? Go to Yahoo.com and add the page to your favorites. Now look in the folder and you'll see the familiar Y peering out at you.

How is this done? It's actually quite easy. This tutorial will take you through the steps.

There are a few tools needed to complete the process:

• An image editing application, such as Photoshop, Paint Shop Pro, or Fireworks.
• An icon editing tool or a graphic converter.

Unfortunately there isn't a lot of room to work with. The icon must be no larger than 16 x 16. It can use up to 256 colors, but the maximum file size is 1046 bytes so you're better off with 16 or 8.

The first thing you want to do is open your graphics editing program and either open up an existing logo or make a new one. While you're working, the logo can be any size you want as long as it's a perfect square. When you're finished working on it, you'll want to scale it to 16 pixels wide by 16 pixels tall. Once everything is to your liking, save the graphic as a GIF or JPG to your local hard drive. It wouldn't hurt to also name the icon 'favicon'.

Now you'll need to pull out your Icon Editor or Graphics Converter. For this tutorial I chose to go with Irfan View. I chose this program for a few reasons but mainly because it is freeware and can convert most image formats to .ico. The icon can be created and edited in the graphics editor so an actual icon editor would be redundant. You can download your copy of the Irfan Viewer here.

Now launch Irfan View and open up the 16x16 logo you just created. Then go to File > Save As. Make sure the 'Save as Type' field reads '(*.ICO) Windows Icon'. Once the file has been converted, you are ready to go.

The next step is to upload it to your server. There are two options you can take so that the Icon will show up on all pages of your site. You can upload a copy of the icon to your root directory, or if you like to keep the root clean, you can upload it elsewhere and simply point to it in the HTML code. If you choose the second option you will need to place the following code within the "HEAD" tags of each page:

<LINK REL="SHORTCUT ICON" HREF="/your/path/favicon.ico">

Make sure to replace the /your/path/favicon.ico with the path to your icon.

That's it. You now have your very own Favorites Icon.

----------
Jeremy Luebke is the founder and creator of CoolResources.com, a site dedicated to helping fellow webmasters. Cool Resources offers free online tools, articles on a broad range of subjects, a comprehensive resource directory to search for those hard to find needs, up to the minute news, and live tutorials.
http://www.coolresources.com