A favicon (pronounced fayv - eye - con) is a "favorites icon", that itty-bitty image you see in front of the URLs you've bookmarked: . It's a Windows invention and therefore works only with Internet Explorer, but since the vast majority of people use IE, why not identify your website with your own favicon? It will make your site easier to find in the list of favorites.

How does it work?

After your favicon has been uploaded to the server, whenever someone adds your site to their favorites list, your favicon gets downloaded to replace the IE icon. Try it. Bookmark this page and then go look inside the Favorites Folder where you put it. You should see our GNWDA favicon next to the name of the page.

NOTE: IE is querky and this doesn't always work without rebooting the whole dang computer. Thanks for consistency, Mr. Gates -- not!

Reload the page by clicking on the link in your Favorites Folder, and our favicon should show up in the location bar, like this:

What if it doesn't work?

Those of your visitors who are not using IE, or when IE misbehaves again, nothing happens. No error message, nothing. It's as if you never invented a favicon for your site. No big loss.

NOTE: The downloaded icon file is stored as a temporary file in the computer. Whenever the user cleans out those files, the favicon disappears and your site will once again be associated with Microsoft's standard icon. Also, IE sometimes fails to download the favicon. Try closing IE and restarting it. (I said "try" - don't be surprised if even that doesn't work. Meanwhile, your visitors are successfully downloading it. Don't try to figure it out.)

How do you make a favicon?

It's as easy as 1 - 2 - 3 !

You will need a graphics editor and an icon maker program. Download this free Bitmap to Icon editor - it doesn't do much but it does enough, and the how-to instructions in this tutorial are based on its use. Or purchase the better version of this program, which provides more flexibility in what you can do and is therefore easier to use and produces better results; the cost is $20 US.

1. Open your graphics editor. Either create a new image or use a ready-made image that represents your site well. Remember, you are only making a symbol or one or two letters, not a beauty of artwork. This is the most difficult part of the process.

If you're creating a new image, make it 16x16 pixels in size. Then resize it to 32x32, decrease the color depth to 16 or 256, and save it as a bitmap (.bmp) file.

If you're using an old image, resize it to 16x16 as a test to see how horrible it looks when it's that tiny. Play with it or choose another image until it looks okay that small. But save it at 32x32 or 48x48 as a bitmap (.bmp) file.

2. Open the Bitmap to Icon editor. Click on the "Open BMP" button, browse to and select the image you created in Step 1. Then use the "Save ICO" button, name it "favicon" (all lower case), and save it into your website's top level directory (the root directory).

NOTE: it must be called "favicon.ico" for this to work.
ANOTHER NOTE: You cannot just rename your bitmap file with a new extension, .ico - you need a program to convert it into an authentic icon format.

3. Upload it to the root (top level) directory of your website. Be sure to upload it in binary mode (not ASCII), like any graphic.

Also upload it to every directory where you have pages residing. Whenever a visitor bookmarks a page, IE first looks for the favicon in the same directory. If it doesn't find one, IE then looks in the root directory. It's more reliable to make the favicon available at all levels.

Or you could place a single copy of your Favicon anywhere you like and then, in the source code of each page, include a <link tag> using the full directory path that points to it. The tag would look like this for the GNWDA server:

<LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico">

Put this tag above the </HEAD> tag on all your pages. With this method, you can name your .ico file anything you want instead of "favicon" (as in the example above - myicon.ico).

NOTE: Some free web hosting services do not support ICO files.

If for some reason your web server refuses to accept the upload of favicon.ico, then change the extension to .gif, upload it, and change the extension back to .ico on the server itself.

When you test your favicon, first remove any previous bookmarks you have for the page you're testing. Often, your icon will not appear if the bookmark already exists. You might need to reboot to really get rid of the old bookmarks.

Oh, and there's another IE querk that will challenge you to take that smile off your face. If you ever decide to change your favicon, IE will probably still show the old version, even after you empty your temporary Internet files! Again, you have to reboot the whole dang computer to see the new one. Sheesh! If that doesn't work, try this:

The problem is due to a hidden Windows cache file called ShelliconCache. To find it, make sure your preferences are set to show hidden files. Then find ShelliconCache in the windows folder and delete it. Don't worry, this won't cause any problems. If you really don't want to delete it, just move it to a different folder. Again, you have to reboot to make it all work nice.

If that doesn't work, ask a friend to look at it on his/her computer. That will prove to you that the favicon really is working, but your PC is just misbehaving to irritate you.

NOTE: There's a bug in IE 5 (when run on Windows 95 or 98) that crashes the browser if your favicon.ico file was created with bad data. Since some of your visitors might not yet have upgraded to a newer version of IE, this is something to look into. For more about this, including the patch provided by Microsoft, read Microsoft Security Bulletin (MS99-018).

Download this tutorial as a printable Word Document.

   
EXTRA TIPS

Since IE uses the <title> tag as the text description of the bookmarked page, you should give each page a different title, so that people can bookmark more than one page of your site.

Software:
• Theme Maker
Free graphics program you can use to create your own cursors, favicons, and wallpaper, even with sounds.

• Icon Forge
Expensive, supposedly advanced Icon/Favicon editor.

Free ready-made favicons for your site are available at:
• Royalty Free Art
• Two Tone Blue
• If you design any that you'd like to share, let us know!

Want to change other websites to show the favicons of your own choosing, in your Favorites Folder?

1. Create the favicon
2. Save it with any name.ico to any folder where you want it stored.
3. In your Favorite's Folder, right-click over the bookmark you want to assign a favicon to.
4. Select "Properties"
5. Select "Change Icon"
6. Select "Browse"
7. Find and select the favicon.

You can also use this trick to permanently assign a favicon that might otherwise get deleted when the temporary files are cleaned out.

For more information on favicons, go to favicon.com