Jul2909Jul 29, 09
This is a notice of passing. The long-lived favicon.ico has officially been phased out in Firefox - it still works, but it's no longer the best way to provide an icon for your site's bookmarks and desktop shortcuts. Instead, browser makers are adopting the new method for providing icons to Apple's iPhone and iPod touch: apple-touch icon. In short, it's a very similar declaration within the head section of a document similar to how we specify favicons currently. However, instead of being forced to condense a site's entire identity into a 16 pixel square GIF-like format, the apple-touch icon format is simply a 57x57 PNG image. Best practices indicate that Apple's products first search for the meta tag in a document's header, and if no icon is specified then the device will attempt to find the PNG image at your-website.com/apple-touch-icon.png. Obviously the first format is preferred in order to prevent unnecessary HTTP requests for users when bookmarking your site, though the second method allows static websites to adopt the system without having to manually update every single document to include the meta tag.
Getting into this a little deeper, the iPhone and iPod actually support a second image format, apple-touch-icon-precomposed.png. This is necessary because those two devices will apply transformations to any icon you provide in order to give it a more iPhone-like appearance (adding glass, rounded corners and a drop shadow). Ideally, we would like to serve the best favicon replacement to every platform in one quick bit of HTML. To the best of my knowledge, that is accomplished in the code example below:
<link rel="favicon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
.. with the appropriate images placed in your site's web root. The important thing to note is that the order does matter. In my testing, Firefox will use the last declared favicon/touch-icon in your document's head section. The iPod Touch and iPhone don't seem to care, although they prefer to use the precomposed icon if it is available.
Obviously none of this works in Internet Explorer, and it probably never will. Microsoft is probably the last person to use the word "apple" in conjunction with anything, particularly in a proprietary specification. But, for the time being, we've got a great alternative that provides better images to those who can use them.
Now go and read about the crazy thing I stumbled across while researching this article... ⌘