For performance purposes, mobile browsers don’t look for a favicon.ico file in the root folder if we don’t explicitly specify an icon to be used. In valid XHTML, the way to add an icon file is to use the following
<link rel="icon" type="image/png" href="favicon.png" />
Originally, the icons were in Windows ICO format (similar to BMP), but these files are difficult to export from well-known graphic editors and are not optimized in size. Today, you can use GIF or PNG for mobile compatibility. Originally the icon size had to be 16×16 pixels, but now they can be any square size and the browser will resize them.
Safari on iOS adds another type of icon (WebClip), which is available if the user adds the website to the home screen. We will talk about this in Chapter 12, but for now just know that Safari for iPhone and iPod requires a 57×57-pixel PNG file (with no transparency preferred) and the following metatag, which can coexist with the other icon tag:
<link rel="apple-touch-icon" href="iphone_icon.png" />
Warning: Up to iOS 3.1 (known as iPhone OS at that time), 57×57 pixels was the only available size for the WebClip. Starting with iOS 3.2 for iPad, 72×72 is the icon size we should use if we detect this device. For iOS 4.0 or newer, devices with high DPIs (such as iPhone 4) need an icon size of 114×114 pixels. Otherwise, the device will resize the icon with quality loss.
The icon will automatically be given rounded borders and a glossy effect, like that shown in the image below. If you don’t want your icon to have that effect, instead use the following
<link rel="apple-touch-icon-precomposed" href="iphone_icon.png" />
The original 57×57-pixel iPhone icon file, the final appearance once the website has been added to the home screen, and the icon using the precomposed meta tag.
Warning: If you don’t define the
apple-touch-iconlink, mobile Safari will look for the existence of a file called apple-touch-icon.png in the root folder. If it does not find this file, it will look for an apple-touch-icon-precomposed.png file (from iOS 2.0); no effect will be added to this icon.
Android (since version 1.5) supports only the
apple-touch-icon-precomposedmetatag for high-resolution icons.
The table below explores compatibility for this type of icon, including usage of both the favicon ICO files and PNG files, and the final display size.
Icon display compatibility table
|Browser/platform||Usage||PNG||ICO||Final size on screen (px)|
|Safari||iPhone special icon used on the home screen||Yes||No||57×57, or 72×72 for iPad or 114×114 for high-DPI devices|
|Android browser||In the title area and on the home screen||Yes||Yes||16×16, or 57×57 if iPhone precomposed icon defined|
|Nokia Series 40||No|
|BlackBerry||In the title area (some devices)||Yes||Yes||16×16|
|Motorola Internet Browser||No|
|Opera Mobile||Title and bookmarks||Yes||Yes||16×16|
|Opera Mini||Title and bookmarks||Yes||Yes||16×16|
Generally speaking, you should create an icon in PNG format and use it as the icon for your pages. Noncompatible browsers won't use it, but for the ones that do, it will make a difference. It is better to have a favicon.ico and an Apple touch icon, even if you don’t want to use it: some browsers will make the HTTP request regardless of whether you define the reference in the markup, and a 404 response is always worse than delivery of a small file.
Learn more about this topic from Programming the Mobile Web.
How do you take advantage of the new opportunities opening up in mobile web development? With this book, you'll learn the intricacies and pitfalls involved in building HTML and CSS-based apps that you can extend to work with particular devices, including the iPhone, Nokia, Blackberry, Android devices, and other smartphones. You'll not only learn how to deal with platform variations, finicky browsers, CSS compatibility, and other issues, but also how to create pleasant user experiences in a constrained environment.