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

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.)

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:

Apple touch icon precomposed:

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:

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.

Tags: website icon, Apple Touch icon.