Search:
Tip: Please give your vote in at least one Picks Poll to enable search results. Thank you.
Search for phrase rather than keywords
(e.g. turn on to find exact phrase “Vanessa Hudgens bush” rather than pages featuring “Vanessa”, “Hudgens”, and “bush” within but not necessarily exact phrase).

Create an Apple Touch icon for your site for Apple and Android Devices

4th May 2013

Page: prev. | 1 | next

You may have seen errors in your websites logs locating the files apple-touch-icon.png or apple-touch-icon-precomposed.png. This is when a visitor is using an Apple (or Android) mobile device such as the iPod Touch or iPhone which uses either of those files as a webpage icon when the visitor adds your site to their devices. Or you may just be wondering yourself how to add such a custom icon. In effect, they are like the favicon used by a regular browser. (How to create a Favicon for your website.)

Repair Girl
Wondering how to add a custom icon for your website on a mobile device?

Creating and adding these files to your site is simple. Technically there are four different sizes for different devices:

  • 144 x 144 pixels for high-resolution iPad ‘Retina’ displays
  • 114 x 114 pixels for high-resolution iPhone ‘Retina’ displays
  • 72 x 72 pixel for iPads without a high-resolution display (the first two generations)
  • 57 x 57 pixels for everything else

You can either create png file images for each resolution or a single image at 144 x 144 pixels which will be scaled down accordingly. The files can be saved as either PNG-8 or PNG-24.

To precompose or not to precompose

Apple devices can use either apple-touch-icon.png—to which it will apply the Apple glass effect—or apple-touch-icon-precomposed.png which it will display as-is. Android devices display the icon as-is with either. For an Apple device which you use depends upon your preference, but for an Android device to pick up the icon the apple-touch-icon-precomposed must be used.

Locating the icon

When a visitor using an Apple device visits it will either automatically attempt to locate the icons via a link HTML tag in the page’s head section if present, or detect them in the site’s root directory if not. Android devices however require a link tag to locate the icon at present.

With link HTML tag

Apple touch icon:

Line
  1. <link rel="apple-touch-icon" href="http://www.domain-name/apple-touch-icon-precomposed.png"/>

Apple touch icon precomposed:

Line
  1. <link rel="apple-touch-icon-precomposed" href="http://www.domain-name/apple-touch-icon-precomposed.png"/>

In either, replace domain-name with your site and the filename for the icon if different.

If you wish to specify multiple icons for different devices add a sizes attribute to each link element as follows:

Line
  1. <link rel="apple-touch-icon-precomposed" href="http://www.domain-name/filename.png"/>
  2. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.domain-name/filename.png"/>
  3. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.domain-name/filename.png"/>
  4. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.domain-name/filename.png"/>

The size attribute can be added for either apple-touch-icon or apple-touch-icon-precomposed.

Without link HTML tag

If no icons are specified using a link element, the website root directory is searched for icons in the following order:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

The visitors mobile device will now show your created icon when the page is added. Here’s mine.

apple-touch-icon-precomposed.png
apple-touch-icon-precomposed.png
Note: bear in mind the icon is likely to be displayed as small as 57 x 57 pixels, so there is little point putting text on your icon.

Page: prev. | 1 | next

Tags: website icon, Apple Touch icon.