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:

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.

Filed under:

Rewilding the planet with animation and motion design

We've only got one planet, and right now it needs all the help it can get. Climate change and biodiversity loss are massive challenges that we need to tackle head on.

That's why, for every animation project over £1000 a donation of 2% of the total budget will be made to the World Land Trust, on your behalf.

The money will go towards WLT's "buy an acre" programme; buying up and protecting vital habitats around the world, and helping fight against climate change.

Any projects under £1000 will have a tree planted on your behalf.

Acres saved so far:

Thanks to my wonderful clients and the animations we've produced, enough money has been donated to save around 12 Acres of vital habitats around the world.