Create an Apple Touch icon for your site for Apple and Android Devices
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.)
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:
- <link rel="apple-touch-icon" href="http://www.domain-name/apple-touch-icon-precomposed.png"/>
Apple touch icon precomposed:
- <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:
- <link rel="apple-touch-icon-precomposed" href="http://www.domain-name/filename.png"/>
- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.domain-name/filename.png"/>
- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.domain-name/filename.png"/>
- <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:
The visitors mobile device will now show your created icon when the page is added. Here’s mine.
Page: prev. | 1 | next