FavIcons (those bookmark icons)


This morning I decided I wanted little icons for my web pages, so I set out to put them online. There's information on the web, but some of the tools have gone missing. Here are my hints

What is a favicon?

Favicons are those little icons that show up in the favorites bar, your bookmarks, and sometimes even the URL line when visiting websites. They started out as an IE-only thing in late 2001 or early 2002, and have now been adopted by most of the browser community as a cool thing.

Technically, they come in 2 varieties, the rude ones that have no HTML information about them, and the polite ones that show up as a <link rel="SHORTCUT ICON" href="myicon.ico"> in the HTML pages. As far as I know, IE is the only browser that will always look for "favicon.ico" at the root of your website if there is no LINK element in your web page.

Graphically, they are 16x16 icons in somewhat less than 256 colors. There is a strong debate about the color palette that works best, but generally keeping to 16 or fewer web-safe colors is what you want to do. Since the files are ".ico" (windows icon) files, they can contain multiple depths and sizes. I'd suggest doing at least the 16x16x16 and then a 32x32x256 if you like. The latter is only used by a minority of the programs when you drag a link to your desktop.

So, how do I make one?

Once upon a time, the nice folks at favicons.com had a free converter up on their web site that did the requisite magic to convert GIF and JPG files into .ICO files. Alas, for some reason, they're no longer providing that service. However, if you have a PC, you can download their software to convert icons to .ICO.

On the Macintosh, you can use GraphicConverter from (LemkeSoft in Germany to do this task quickly and easily. There are a growing number of graphics programs that can also export to this format as well. Further, I'm told that if you want just one size, you can save from your favorite graphics program in .BMP (Window's BitMaP) format and then rename the file.

Putting it to work

Once you're done creating the file, give it a name ending in ".ico" and then upload it to the base of your website. Next, modify your .html or .htm files (or scripts that return the same) to emit the link tag (from above) when users visit your site.