Statistically, about 65% of people surfing the web on a mobile device are doing so on an iPhone or iPad. Hopefully you’re getting a lot of this traffic on your web site. Apple makes it easy for iOS users to return to web sites they like by offering the option to Add an icon to their home screen.
As shown in the following image of the Netflix home page, the Safari browser on iOS devices has a Share button at the bottom center of the screen.
When the user taps this button, they see the following options:
Notice the Add to Home Screen option in the center of the screen. It displays a small screen shot of the Netflix home page which is very difficult to read (and pretty unimpressive). Contrast this with the following image that shows what iOS users see when they tap the Share button on the Macworld web site:
Rather than showing a small screen shot of the Macworld home page, a distinctive icon is displayed instead–far more impressive, and much easier to recognize on your iOS home screen. This is known as an Apple Touch Icon.
How to Display an Apple Touch Icon for Your Web Site
Fortunately, it’s very easy to display an Apple Touch icon in the iOS Share screen for your web site. All you have to do is add a 57×57 image file named apple-touch-icon.png or apple-touch-icon-precomposed.png to the root folder of your web site. If you place the apple-touch-icon.png in your web site’s root folder, the standard glass button look will be applied to your icon when it’s added to the user’s home screen. If you place the apple-touch-icon-precomposed.png file in your site’s root folder, no visual effects will be added the icon and it will be displayed “as is”.
For example, I created the following icon for our iOS App Development for Non-Programmers book site. It’s a miniature of the first book in the series:
When you place one of these files in the root folder of your web site, the same icon is used for all web pages on your site. If you want to specify different Apple Touch icons for different pages, then you can add a link element on each page. For example:
<link rel="apple-touch-icon" href="/custom_icon.png"/>
If you want to go the extra mile, you can specify multiple Apple Touch icons for different device resolutions (standard, vs. Retina displays). To do this, just add link elements to your web page for each icon:
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
Providing an Apple Touch icon provides a better, more impressive experience for iOS visitors who visit your site. I recommend trying this on your web site to see what iOS users are seeing!