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:
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" />
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]
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
Iconsdirectory or, for newer OS X systems, the
WebpageIcons.dbfavicon 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.
Favicons.com Nuff said.
October 7, 2003
After losing a $521 million patent infringement case in August and in an attempt to avoid paying a license fee to the patent holder, Microsoft announced it would change the way future versions of Internet Explorer handle plug-in content such as Macromedia's Flash and Shockwave multimedia players, video players from Apple, Real and Microsoft's own Windows Media Player. Developers were given notice that significant retrofitting would be required to continue to support ActiveX content in the updated IE 6 and beyond, prompting much discussion and not a little sturm und drang.
Today Microsoft, along with interested partners Macromedia, Apple, and Real, outlined those changes, provided a timeframe for implementation/rollout (early 2004) and offered developers a beta version of IE 6 (requires WinXPsp1) to demonstrate said changes and test workarounds.
The skinny: plug-in content is busted, bub. Fortunately, the workaround is easy enough for sites that employ a modest number of plug-in enhanced pages. For the rest, tools will be made available to help automate the conversion process.
The patent apparently rests on the seamless integration in a web page of functionality provided by a code engine external to the browser, for instance, an interactive animation built in Flash and embedded in HTML via the Flash ActiveX control.
The IE 6 update beta intentionally interrupts this "seamlessness" by inserting an alert message reading "Press OK to continue loading the content of this page" whenever simple HTML embedded plug-in content is encountered.
Clearly, your clients and users aren't going to be happy about that.
Many of us already use scripting to detect a particular plug-in version and then to deliver enhanced or degradation content as appropriate. Such sites need only move their code to an external .js file to maintain that seamless user experience.
I'm still going through the documentation provided by Microsoft and its partners, myself, and so may have more to say on this once I've had more time to soak it in. I'm finding the Macromedia doc a good read and a pleasantly surprising provider of resources for concerned clients, developers and hosting providers. Here also you'll find a probably useful email template ready to be modified to suit your own needs.
Summary: Near-future IE 6 upgrade + plug-ins = busted. All new machines sold with Windows will likewise be busted. Everyone who religiously allows those automated security updates to their systems (I hope you are one of them) will find them busted.
It's time to start boning up on these docs and thinking about how you can educate your clients on the issue so that no one ever need know they are busted. Besides, someone has to fund these site conversions.