How to add an iOS App Icon to your WordPress website

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:

AppIconScreenshot





Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.