The favorites icon, that little icon displayed next to the URL bar in most PC browsers, can be quite useful for mobile. It allows identification of a site in only 16×16 pixels and just hundreds of bytes. Most favicons are unique, and despite being too small to accommodate text or a complex logo-type, users can identify a site more quickly by its favicon than by reading the URL. For instance, to display a list of bookmarks on a mobile phone, the favicon plus the truncated URL is much more efficient than just the truncated URL. And sometimes the URL can even be entirely replaced with a favicon, thus saving valuable screen real estate! Some well known example s include del.ico.us, yahoo, google …
Unfortunately, the implementation of favicon is not so mobile friendly. First, consider the file format. Originally introduced as a feature of Microsoft Internet Explorer, it used the Microsoft ICO format (similar to BMP). All the popular icons shown below are using MS ICO. And despite the fact that favicon can now make use of GIF or PNG, most of them are still in ICO format, and this is unfortunately not recognized by most mobile phones!
Then, the dimensions. While most sites use a 16×16 image, this is not mandated (since there is no standard) and the actual size of the image can be different. But usually if a site uses a different size, it will have also the 16×16, but stored as multiple pictures in one ICO file, and this format is really badly supported on mobiles.
Next, the way the favicon is linked to a site is also troubling. Most sites are still using the original "passive" or implicit link. This is achieved by simply storing the icon under http:/www.mydomain.tld/favicon.ico. So the browser has to do an extra HTTP request to determine if there is an icon behind this usual url. It's quite a nasty implementation because it requires an extra HTTP connection. (Check your server logs, you'll often see failed request to this kind of URL). This is even worse still in the mobile context, where each connection costs time and money. This is also why most mobile browsers will simply not do it. The other way to link your favicon is through HTML tags:
|
1 2 |
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon"> <link rel="icon" type="image/gif" href="https://find.mobi/favicon.gif" /> |
The second tag is recommended by the W3C.
Recently I've been implementing a favicon feature for find.mobi (our mobile search engine). The aim of this feature is that find.mobi will index, save and display favicons alongside search results. Displaying a list of URLs is one case where favicon can be very valuable, and this is exactly what a search results page is! Having coded it, I've encountered all the difficulties mentioned above. The results page of find.mobi is now showing favicons as 16×16 GIF images, stored locally, and so in this way displayable by all mobile phones.
Despite the multiple bad ways to use favicon, I think they will be used by others in the mobile context (browser, bookmarks sites, pages links etc.)
So, as a mobile website owner some good practices for using favicon are:
- Use a unique and easy to recognise icon; starting from scratch is often better than resizing an existing logo-type. (Old school pixel-art can help!)
- Save in GIF (or PNG, but note that GIF has a better backward compatibility on mobile phones)
- 16×16 is the standard size
- Link it to your pages using a valid XHTML tag
Links:
- Pixel Art tutorial: http://www.pixey.de/12-pixelart-tutorials/
- Favicon gallery: http://mppierce66.home.comcast.net/~mppierce66/web/fi/index.htm
- W3C favicon: http://www.w3.org/2005/10/howto-favicon
- Favicon definition: http://en.wikipedia.org/wiki/Favicon
