Adding a Favicon or Favorites Icon

Have you ever noticed the little icon that shows up in your bookmarks and in the tab display of some Web browsers? That is called the favorites icon or favicon.

First Create Your Image

Using a graphics program, create an image that is 16 x 16 pixels. This is small, so try out many different versions until you create the image that will work for your site.

Save the image as a GIF or BMP file with 256 colors or less. Icon files, like Web images, have to display on computer monitors, so they can't reliably display millions of colors. However, since an icon file is for Windows displays only, it can be 256 colors, rather than the Web standard 216.

Converting it to an Icon

Once you have an acceptable image, you need to convert it to the icon format. There are many icon editors available, and Sue Chastain, the Graphics Software Guide, has a list of some good ones. I used IconForge by CursorArts. Be sure to save the file as favicon.ico.

Publishing the Icon

It is simple to publish the icon, simply upload it to the same directory as the file you want bookmarked. For example, for this page on the HTML site at About, I would place it at
http://webdesign.about.com/library/weekly/favicon.ico

You can also put a different icon on every page of your site (if you like), or point to one icon in many folders. To do this, you add a link reference to the head of every HTML document that you want the favorite icon associated with. e.g.