Jump to content

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

+ 1
  Maximiliano Firtman's Photo
Posted Oct 07 2010 09:43 AM

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.
Attached Image

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/platformUsagePNGICOFinal size on screen (px)
SafariiPhone special icon used on the home screenYesNo57×57, or 72×72 for iPad or 114×114 for high-DPI devices
Android browserIn the title area and on the home screenYesYes16×16, or 57×57 if iPhone precomposed icon defined
Nokia Series 40No
BlackBerryIn the title area (some devices)YesYes16×16
Openwave (Myriad)No
Internet ExplorerNo
Motorola Internet BrowserNo
Opera MobileTitle and bookmarksYesYes16×16
Opera MiniTitle and bookmarksYesYes16×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.

Programming the Mobile Web

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.

See what you'll learn

1 Subscribe

3 Replies

  Sean Neylon's Photo
Posted Feb 13 2013 03:03 AM

Thanks, works a treat, though I found that if the image is too big, the resizing can cause some clarity problems - best to stick to 114px x 114px I think.
+ 1
  Indianic's Photo
Posted Feb 13 2013 04:05 AM

First glance and I was taken aback with your Answer. Must say, brilliant work! Truly commendable. Your Answer has been well designed along with the little addition of all your minor details here and there and a fabulous account of your profile.
  jimmyjjohn's Photo
Posted Oct 22 2013 01:03 AM

We have done this with php inline with html, input is taken through html. I tried getting values for android app by making http requets. The entire php is removed from the file and making. Shoud the site be re-written again for easy base? I don't to write business logic again and again. Consistency is also an issue.

Social Club Insurance , Koh Phangan Hotels , Hay Day Hack , Make a Mobile Website , Blumenzwiebeln Bestellen Online , Kitchen Cabinet Hardware , Phytoceramides , Xbox One Modded Controllers , How to Stop Blushing