How to Create a Website Icon for the iPhone and other Mobile Devices

In the early 2000s, everyone rushed to insert favicon.ico files in their websites' root files to see how the icons would be added to Internet Explorer's address bar. Today, in the desktop web those icons are more useful for tab iconography. But what about in mobile browsers?

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 tag:

<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 meta tag:

<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-icon link, 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-precomposed metatag 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
Symbian/S60	No
Nokia Series 40	No
webOS	No
BlackBerry	In the title area (some devices)	Yes	Yes	16×16
NetFront	No
Openwave (Myriad)	No
Internet Explorer	No
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.