Want iOS users to keep your website on their home screen?
It’s difficult enough trying to find new ways to attract new visitors to your website so it is important to find the tricks that keep them coming back. As an iPhone user a key thing I do, when I like a website enough, is to save it to my home screen. If you have done this much you will have noticed that some sites will form a nice icon for your home screen but many just show a poor rendering of the page?
Well it’s very actually very easy to show a nice icon for your website. Depending on what iOS devices you intend to support (for their native resolution) you should have the following sized icons:
- iPhone/iPod standard - 57x57px
- iPhone/iPod retina - 114x114px
- iPad standard - 72x72px
- iPad retina - 144x144px
To support all of the above you would want to add the following code into the web page tag:
Here’s how your icon would likely look if you do nothing:
(iPad 3)
(iPhone 4)
If you just add the low res version of your logo:
(iPad 3)
(iPhone 4)
If you support the native resolution:
(iPad 3)
(iPhone 4)
Personally I have found that a nice looking icon is certainly more likely to be given the prime real estate of my iPhone's home screen.
For more information about the implementation of this, check the Apple spec here at:
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html and http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW11
