Creating touch icons for a website

Creating touch icons for a website

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?

Where touch icons 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

  • iPhone touch icon size

    iPhone/iPod touch
    57 x 57px

  • iPad touch icon size

    iPad
    72 x 72px

  • iPhone with retina display touch icon size

    iPhone/iPod touch
    with retina display
    114 x 114px

  • iPad with retina display touch icon size

    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" />

The sizes attribute tells the device which size each icon is, so it can pick the one best suited to its resolution.

Precomposed icons

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.

One thought on “Creating touch icons for a website”

Leave a Reply

Your email address will not be published. Required fields are marked *