How to create a icon for any iOS device – Part 2
At the beginning of the year we blogged about how to add your favourite websites to your Apple iOS devices as a shortcut on your home screen.
We have had a few questions asking how this was achieved, here’s how in three easy steps.
Step 1
Create a .PNG image file in an image editing software of your company logo at 114 pixels by 114 pixels.
It does not matter if your logo is square, as the HTML code below will round off the corners like an app.
Step 2
Name your file: apple-touch-icon-precomposed.png and save it in to the root directory folder on your web server.
Step 3
And for the icing on the cake enter this simple HTML code below in the HEAD part of your websites HTML.
<link rel=”apple-touch-icon” href=”/apple-touch-icon-precomposed.png”/>
Let us know how you get on and any questions please post them on here.
Contributed by Nilesh Parmar
Nice tip but can I check something?
Is the link file location correct? If you save the icon in your images folder then surely the link should point the the images folder. What you have is only going to look in the root folder for your site.
Hi John, thanks for you comment. You are correct, we had missed off part of the url for this. I have now changed Step 2 to reference the root directory rather than the images sub-folder.
Nilesh