Why create an Apple device icon ?
An Apple device icon will appear on the home screen of Apple devices when a user has selected the option add to home screen when viewing your website. The icon can be of whatever you like, generally it’s the logo for the relative site, every now and again it’ll be a picture of somebodies round head, it’s entirely your choice.
If you haven’t got an Apple device icon it’s not the end of the world, when a user adds your website to the home screen of their device a miniature scaled down print screen of your website is used as the alternative icon, it’s not the best looking alternative, but that’s what you get.
How do I create an Apple device icon ?
There are two simple steps you need to follow to add an icon to your website, the first is to create an image which will be your icon, and the second is to add some code to the header of your website.
Since the introduction of the iPad the default size of the apple icon has gone from 58px by 58px to 129px by 129px, you can still create an icon 58px by 58px, however if you want it looking crystal clear on iPads and future Apple devices it’s probably worth creating an icon which is the full 129px by 129px.
The next step is to locate your head tag and paste in the following line of code, you’ll simply need to update the href value to locate your own file and that’s the process complete.
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>
Proof you say
Here you can see a screen grab taken on an iPad, it’s such a simple trick, which at the same time allows you to further optimise your websites for different devices.
