Mobile Safari allows you to add an icon to the home screen of a device for any web page you visit using the share button. The screen shot below shows the icon that is used if you do this for apple.com.

If your website does not supply an icon it will use a screenshot of the page which will often look less then impressive. You will also see a lot of failed requests for the file apple-touch-icon.png in the error logs for the web site which can be annoying. If you have a web site that you expect to be visited by users with an Apple device (which I guess is most sites) you should probably spend a few minutes to make that icon look good on the users device.

Webpage Touch Icons

The ever growing range of Apple devices with different form factors and screen resolutions makes keeping track of the various icon files you need no easy task. At the time of writing the list of icons file sizes for each device type is as follows:

• apple-touch-icon.png (57x57 iPhone and iPod touch)
• apple-touch-icon-72x72.png (72x72 iPad 1st and 2nd gen)
• apple-touch-icon-114x114.png (114x114 retina iPhone and iPod touch)
• apple-touch-icon-144x144.png (144x144 retina iPad)

The filenames listed above are the default names you should use if you are relying on Safari to find the icon files in your website root directory.

The icon with the most appropriate size for the device will be used if present. The rules for which icon will be used in cases where the preferred size is not available are a little complicated. In theory the next largest is used if present or failing that the largest icon is used. This means that you could just create a single icon of 144x144 pixels and it will be downloaded and resized by the browser as required. However this is a little wasteful given that it does not take much effort to just create each of the icon sizes I listed previously.

By default Safari will also add rounded corners and a glossy shine effect to the icon similar to the way application icons are treated. The ability to specify a precomposed image which will not be modified was introduced in iOS 2.0. If you do not want Safari to mess with the image you can add “precomposed” to the filename (e.g. apple-touch-icon-precomposed.png). If you supply both a normal and precomposed version of an icon Safari will use the precomposed version.

Webpage Touch Icon Links

Rather than relying on Safari searching the root directory of a site you can also explicitly specify the icon files to use in a link element added to the head section of the web page. This can also be useful if you need to name the files differently from the default names or if you want different icons to be used for different pages within a site.

Using the same filenames as before a full set of links would look as follows:

<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

For completeness if you do not want Safari to add any image effects the links would be as follows:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />

Browser Compatibility

The situation gets a little more complicated if you care about supporting older versions of iOS or other mobile browser platforms (e.g. Android, Blackberry, Microsoft). For Safari the only real issue is if you need to support devices running anything earlier than iOS 4.2 which do not support specifying icons with different sizes. For that situation it is a good idea to always include apple-touch-icon-precomposed.png and apple-touch-icon.png files as a fallback.

Other browsers have varying levels of support for the Apple way of doing things. For more on cross-browser compatibility issues and recommendations see this excellent article. Some general guidelines that I end up with:

• Always use the Apple defined names rather than custom names.

• Always place the icon files in the document root if possible.

• I prefer the precomposed variation but also include apple-touch-icon.png as a fallback. For example, this site has the following icon files in the document root:

  apple-touch-icon-72x72-precomposed.png
  apple-touch-icon-114x114-precomposed.png
  apple-touch-icon-144x144-precomposed.png
  apple-touch-icon-precomposed.png
  apple-touch-icon.png
  

• Include the link elements in the page head section in addition to having the files in the standard location.