King Marketing

What’s a Favicon?

Officially, a favicon is a Windows Icon format file, with the three-letter extension .ico.

The standard favicon is the same size as the smallest Windows icon: 16 x 16 pixels. However, the .ico file itself can contain multiple versions at different sizes and colour depths, ranging from 1-bit black and white to full, 24-bit colour with 8-bit alpha channel transparency.

In practice, hardly anyone uses these larger sizes for favicons, but having a larger size in the file is occasionally useful if you expect people to drag weblinks to the desktop, for instance.

The tradeoff is, of course, that the size of the .ico file increases considerably with every additional size and colour palette version . A basic 16 x 16 icon file in indexed colour (256 colours or less) is usually smaller than 1k.

Despite the limits of this teensy canvas, you can do a lot with it. Consider these three variations on the letter W:

Some online guides say that the .ico file has to be in the 16-colour, IBM PCjr-esque Uniform palette — but feel free to ignore them. In practice, 256-colour Indexed, or 216-colour Web palette graphics are fine, and having hundreds of color gradations makes it a lot easier to create a smooth-looking icon and to match colours from a website or logo.

There’s no law that says .ico files have to be square, either. They can incorporate a 1-bit alpha channel, much like GIFs, so you can mask parts of them off, but be aware that they’ll be jaggy. On Windows XP and Mac OS X, your icons can have 24-bit colour and 256 levels of transparency, so edges can be smoother (anti-aliased), but this won’t work on older systems that don’t support it, so I advise you to avoid that for now; in any case it’s a bit overkill.

Methods and Tools

You can draw your icons from scratch, or take existing graphics and resize them. In both cases, painstaking micro-editing is usually necessary to ensure the best results. To some extent it’s like creating a little Pointillist painting; the adjacent colours blend a bit, so the eye sees a teeny version of, say, your corporate logo, when in fact it’s a very rough approximation.

For example, here’s my company’s logo, the favicon created from it at actual size, and an enlarged view of the favicon with a pixel grid in place.

Sorry, the image is missing. I’ll replace it soon!

As you can see, the favicon has a pretty good resemblance to the original, but when you look at it close up, you realize you’re not seeing what you think you’re seeing. While this favicon started as a scaled-down version of the original EPS artwork, quite a bit of pixel-level editing was necessary to bring out detail in the lion’s tail, to approximate the head, and suggest the shape of the claws.

Alternately, you can decide to work with their pixelly aesthetic, like the Wired favicon above.

I usually use Adobe Photoshop as my editor, with a free plugin from the Australian developer Telegraphics that lets me save in .ico format. This is pretty much all you need to do single-size and colour-depth icons.

To make a true Windows or Mac icon, you have to be able to edit the complete icon table, for which you need a full-blown editor like Iconfactory’s IconBuilder plugin. There are also several popular standalone icon editors like Microangelo on the Windows platform.

Once your .ico file is ready, all you need to do is place it in the root directory of your website and again in any subfolders with pages, for visitors who aren’t coming in through your homepage’s “front door.”

.ICO? .ICK! Can’t I use something else?

Yes. Most browsers support linking a graphic file to be your site’s shortcut icon.

This lets you use any MIME-supported graphic format you like, including GIF, JPEG, and the popular and versatile PNG.

To do this, you need to add a shortcut icon pointer URL in your page header and specify the MIME type of the image you’re using.

<link rel="shortcut icon" href="http://www.myfantasticsite.com/favicon.png" type="image/x-png">

For GIF, you’d substitute “image/x-gif,” and so on. It’s easy to add to templates in blogging or other CMS software, and you don’t have to dump .ico files into every directory on the site.

A Funny Thing Happened On The Way To Redmond
The irony is that Microsoft Internet Explorer has only partial support for favicons, even though it’s their own standard. Testing on both IE 5/Mac and IE6 / Windows reveals that IE doesn’t display favicons in the address bar &emdash; unless you specifically bookmark the site.

Gimme All Your Cache And Make It Quick

I also discovered that RSS readers and browsers don’t necessarily refresh the favicon once initially grabbed from a site, even after you clear browser cache and history. In NetNewsWire, I had to unsubscribe and then re-subscribe to a feed get it to pick up. With some browsers you may need to dig into the cache files and manually clean them out.

There’s a neat tool for Apple Safari, for instance, called Safari Icon Manager that lets you visually browse cached icons and delete them as needed. (Privacy nerds will love that, too, if they’re fanatical about leaving no trace of their web whereabouts on a machine.) You’d be surprised how big your favicon cache can get, too, so it’s useful to clean it out every so often.

Favicons =! RSS Channel Icons

Which brings me back to my original quest. I mistakenly assumed you had to somehow embed a reference to your favicon in your XML feed: in fact most RSS readers simply pick up the same favicon your browser does. How simple is that?

My confusion stemmed from that fact that there’s a standard for a different graphic, 88 x 31 in size, intended as a kind of “banner graphic” for RSS channels. This is useful for incorporating feeds in a web page or a web-based RSS aggregator, I guess. It involves adding some lines of code inside the <channel> statement in your XML feed template; however, after looking through the XML files of several weblogs’ feeds, I can’t find a single one that actually uses it. If you want to be 100% standards-compliant you can add this to your feed, but you can live without it.

So now you know.