Website bookmark icons for different iOS devices

A couple of years ago I wrote a short post on how to create an iPhone bookmark icon for your website which would appear if someone were to add your site to their homescreen. That post is getting on a bit now (the screenshot alone shows just how the UI has changed) and now there all sorts of new devices and perhaps more importantly: resolutions to consider when creating an icon.

The process of creating the icon hasn’t changed too much but there are a couple of changes here and there:

App icon dimensions

There are now 4 different sizes for app icons:

57x57 - iPhone (up to 3GS) & iPod touch

72x72 - iPad 1&2

114x114 - iPhone 4+

144x144 - iPad (you know, the ‘resolutionary’ one.)

Where do I put all the icons?

Rather than just putting each icon in the root directory of your site like before, you can now specify which icon should be used for which size using the following tags:

</code>

If the tags above aren’t added to a site then Safari will go back to the original method of searching the root directory for a file called ‘apple-touch-icon.png’.

And there we have it! If you’d like to know more about creating icons for your site, the Apple developer docs are a great place to start.