When users add a bookmark of your website to their iOS Home screen, the device takes a rather ugly screenshot and uses it as an icon. It doesn’t really look like an app when viewed among many other apps on the Springboard.
But there is a simple way to add your own App Icon to your site by adding this code to your theme, and placing a file called “apple-touch-icon.png” into your home directory:
<link rel="apple-touch-icon" href="apple-touch-icon.png">
or, if you don’t like the gloss effect (not compatible with older devices):
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
The icon is resized depending on which iOS device is browsing it. Don’t worry about the rounded corner effect, iOS generates that for you automatically. Deliver a plain square image as your icon.
To be as hi-res as possible make your icon to 152×152 pixels, and then it will look great anywhere from cutting-edge Retina iPads to vintage iPhone 3gses and anything in between. I hear it even works on some Android devices.
You can add the above link anywhere inside the html, but I recommend to put it in your footer.php, just before the closing body tag. This means the rest of the site can be loaded without being held up by the icon.
Test it on this site: if you’re browsing from an iOS device, hit the “share” button in Safari which brings up the UIActivityViewController and shows your icon together with the native ones:
