Information Gift

Faviconic

Originally an Internet Explorer innovation, Favicons allow online properties the opportunity to extend their brand to the browser interface. Bookmarking a site in the PC version of IE triggers a request to the web site's root directory for a file named favicon.ico and if found, will subsequently present the icon in the Location Bar, Favorites lists, the links bar and in URL shortcuts dragged to the desktop.

Today, many browsers support Favicons, and if you are not providing or recommending Favicon branding for your clients, be assured that your competitors will.

Creating and assigning Favicons to your site that work well across the range of browsers and platforms can be trivially simple or maddeningly troublesome. What follows is my experience in creating masked Favicons that work well across the various supporting browsers and operating systems.

First off, let's list the browsers that currently support Favicons and their level of support:

View Favicon Support Table

You'll notice that Favicon support differs across browser and platform. Most notably, some browsers will recognize and present a Favicon simply if an icon file named "favicon.ico" is dropped on the root level of a website, while others require the placement in your site's pages of a specific Link tag to activate this feature.

To mix things up a bit, the PC version of Internet Explorer only presents Favicons after a user has bookmarked a page in the site, and then only presents Favicons for other pages in the site if the aforementioned Link tag is also present in those pages (the former behavior has been used to provide a metric on users who have bookmarked your site—as IE PC users are by far the majority on most sites, this could be usable information).

Therefore, if you want Faviconic branding to persist across your site and for all browsers that support them, then you need to add the following to all your pages (assumes xhtml dtd):

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Simple Favicon:
The simplest way to create a Favicon is to create a 16x16 pixel image using the 16-color (4-bit) Windows palette, saving in the .ico format by any one of a number of icon editors and tools (see below). A 32x32 pixel, 256-color (8-bit) Windows palette icon should also be created if desktop shortcuts are to be supported. Keep in mind that Win IE and Netscape 7 browsers both favor 4-bit icons and will display these instead of 8-bit icons when both types are included in the .ico file. Actually, these multi-res results turn out to be incorrect due to a badly formed favicon used in my original tests. However, until Safari 3, a 1-bit or a 4-bit icon, depending on whether you are using a PPC or Intel Mac, was favored out of a multi-res favicon that included 1, 4, 8 and 32-bit resources. [edited 12.11.2007]

Masked Favicon:
Often, you'll want to create an icon that has a transparent background in order to break out of the square mold. Making an 8-bit masked icon turned out to be much more trouble than I ever imagined; looks like if an icon color is not present in the Windows 16-color palette and you are trying to make that icon have a transparent background, then you may have difficulties making the background transparent because on PCs the background instead will become mapped to some other color, ruining the effect.

I wish I could claim to understand what is going on here, but what seems to fix the problem is to make sure you are only providing a single icon and mask when creating 8-bit non-rectangular favicons.

Troubleshooting:
Besides having to deal with tricky transparency issues, both Safari on the Mac and Win IE can be finicky platforms on which to test your favicon implementation. I've found that both will present cached favicons when you are trying to test your edits. Manually deleting the stored icons is the best way to be sure your changes are reflected in these browsers.

Deleting favicons in OS X's Safari
Sadly, Safari doesn't make it easy to identify the individual stored favicons, so I find it expedient to simply trash the entire Icons directory or, for newer OS X systems, the WebpageIcons.db favicon database, both of which may be found in:

/Users/<your_user_name_here>/Library/Safari/

Deleting favicons in WinXP
Luckily, Windows shows .ico resources as they are in:

C:\Documents and Settings\<your_user_name_here>\Local Settings\Temporary Internet Files

Tools:
I've looked at several tools, and, at least for Mac users, the best in my opinion is Mscape Software's Iconographer(shareware, $15), which handles every type of Mac and Windows icon in a graceful interface.

There's also a Photoshop plugin you can get from Telegraphics (donationware, $5)

I'm sorry to say I don't have as strong a recommendation for Windows users, but I've used Icon Forge (shareware, $37.95) in the past and it does the job.

Resources:
Since Microsoft started this whole thing, you can expect them to have a technote named something like How to Add a Shortcut Icon to a Web Page.

GoLivein24.com has a favicon creation tutorial using Photoshop and the Telegraphics plugin.

Favicons.com Nuff said.