October 29, 2003


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.

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:


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

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.

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.

Posted by Lewis Francis at October 29, 2003 11:41 PM

thanks for the favicon info....

nice looking site too!

Posted by: andrea at February 19, 2004 12:12 AM

I've updated the Favicon chart to include new behavior by IE7, Firefox and newer Opera Browsers.

Note that IE 7 no longer requires a bookmark event to generate a favicon request, in this way IE 7 now follows the behavior of all the other browsers.

Posted by: Lewis Francis at November 10, 2006 10:38 PM

Wikipedia now has an article on favicons which, as usual, is well worth checking out.

Posted by: lewis Francis at December 29, 2006 5:48 PM

The new version of Web Browser for S60 has favicon support! All S60 3rd Edition Feature Pack 1 and later phones will have it, starting with Nokia N95.

Posted by: Franklin Davis at March 23, 2007 4:06 PM

NOTE: the following is excerpted from Faviconic Revisited for continuity.

The Favicon Support Chart has been updated to reflect changes in newer versions of Safari and AOL along with needed corrections due to an improperly formed multi-res favicon.

A couple things brought me back to the Favicon Support Chart this week. The first was a Bugzilla update on a Webkit favicon-related bug I had filed some time ago, and the second was a feature I discovered in Leopard's updated Preview application; exploring the first while leveraging the second exposed a problem in my original tests.

Turns out the multi-res favicon I had created was flawed, invalidating some of the multi-res results. I exposed this problem when I decided on a whim to try and load the favicon into Preview, which can display all the icons at their assigned bit-depths.

When I did so, I noticed that Iconographer had saved the 32-bit icon over the 8-bit, and nothing I could do with the editor seemed to succeed in making an 8-bit icon "stick". Iconographer no longer appears to be in development, but I remembered noting a Photoshop plug-in for editing favicons in the original article and decided to try Telegraphic's ICOFormat and ICOBundle. ICOFormat is donationware plug-in for all versions of Photoshop which edits and saves individual favicons, and ICOBundle is a drag and drop utility that combines them into a single multi-res favicon. Both rock.

See Faviconix Revisited for a screengrab animation of Leopard's Preview displaying the corrected multi-res favicon.

The properly formed multi-res favicon now behaved differently in some of the browsers that previously exhibited issues; re-testing followed and I believe the latest version of the chart is better for it.

Posted by: Lewis Francis at December 11, 2007 10:48 PM

HTML-Kit's online Favicon tool converts common graphic formats into .ico and allows basic editing.

Posted by: Lewis Francis at September 8, 2009 3:12 PM

How about adding the file types that each browser supports for favicon? GIF/PNG/ICO/AGIF/APNG

Posted by: gschoep at January 8, 2010 11:23 PM

The Favicon Support Chart indicates Firefox has no Links Bar support. This is not true. Firefox's equivalent "Bookmarks Toolbar" does support favicons.

Posted by: Mike at February 27, 2011 10:14 AM

Hey Mike, thanks, you're right -- the Windows version of Firefox's Bookmarks Toolbar supports favicons at least as far back as FFX 2, but Mac support has lagged until v4. Chart updated.

Posted by: Lewis Francis at March 3, 2011 10:44 AM

Just came across this FAQ from the developer who implemented IE7's Favicon support: Why doesn't the favicon for my site appear in IE7?.

Biggest takeaway for me is that IE7 (and apparently later versions) ignore favicon links to non-root locations unless the path is fully qualified (ignores base tag).

Posted by: Lewis Francis at May 12, 2011 10:01 AM
TrackBack URL for this entry:

Listed below are links to weblogs that reference 'Faviconic' from Information Gift.

IE7 Faviconix
Excerpt: One of the changes in IE 7 is in the way favicons are handled. No longer are favicons requested and displayed only by the action of a user bookmarking your site; if a favicon is present, IE 7 will display...
Weblog: Information Gift
Tracked: April 24, 2007 11:48 AM

Faviconic Revisited
Excerpt: The Favicon Support Chart has been updated to reflect changes in newer versions of Safari and AOL along with needed corrections due to an improperly formed multi-res favicon. Check it out and let me know what you think....
Weblog: Information Gift
Tracked: December 12, 2007 9:06 AM

Post a comment

Remember personal info?

Voigt-Kampf verification (needed to reduce spam):