Touch icons can be thought of as bookmark icons for mobile devices and tablets. In this post I’ll be explaining where they appear and how to create them for a website…
What are they?
You may have heard about touch icons or have seen other sites reference them, but what are they for?
Touch icons are essentially favicons for mobile devices and tablets. Apple originally implemented them, but some Android devices also now support them. In this article I’ll be concentrating on Apple devices only (iPhone/iPod Touch and iPad).
Where do they appear?
Here I am attempting to show where touch icons are used. On an iPhone or iPad when someone is viewing a website in the browser and presses the share button, they have an option to add a shortcut to their home screen. When added, the website will show up just like any app would, with a rounded square icon.
I have added my website to the home screen on my iPhone, and hopefully you’ll recognise my little blue flower icon alongside all my favourite social apps.
By default without adding any of your own logos or images, the icon will show a cropped screenshot of the website which may not be particularly flattering. Luckily, the opportunity is there to add your own.
How touch icons are added
Adding touch icons for your website is relatively easy; I shall go through what is required to get them working below:
Different sizes for different devices
57 x 57px
72 x 72px
with retina display
114 x 114px
iPad with retina display
144 x 144px
Four different sizes of icons need to be created, as there are four different kinds of devices that the touch icons can be used on: both the iPhone/iPod touch and iPad need different sized icons for obvious reasons, plus there are now retina display versions of the same devices which will need the icons at higher resolutions.
You can just create an icon at the largest size (144 x 144px) and let the devices do the scaling automatically if they require a lower resolution icon. From a bandwidth and user experience perspective it’s best to create the separate sizes, as each device will have to load the large image otherwise.
When creating your icons, don’t worry about putting rounded corners, drop shadows or a gloss effect on them yourself, because these will be added automatically when they’re viewed by the device.
The sizes required for each device are shown to the left. Icons should be created at these sizes and then saved down as png files with recognisable names; I have named mine as follows:
- 57 x 57px: touch-icon-iphone.png
- 72 x 72px: touch-icon-ipad.png
- 114 x 114px: touch-icon-iphone-retina.png
- 144 x 144px: touch-icon-ipad-retina.png
Referencing the icons
Once the icons have been created, they need to be uploaded to the site directory. To reference them, these lines of HTML need to go in the
<head> of the HTML document (make sure the paths to the icons are correct):
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
sizes attribute tells the device which size each icon is, so it can pick the one best suited to its resolution.
If you don’t want effects to be automatically added to your icons when they’re used by a device, the
precomposed keyword can be used to stop this happening, as in this example:
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="touch-icon-ipad-retina-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone-retina-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-ipad-precomposed.png" /> <link rel="apple-touch-icon-precomposed" href="touch-icon-iphone-precomposed.png" />
That should be it – touch icons should show on Apple devices and tablets, providing all paths are correct and all relevant files have been uploaded.