One question I’ve been getting asked lately is how to make Home Screen icons for iPhone and/or iPad for your website and that also look great on the new Retina displays. Well it’s actually really easy.
Simply open your handy graphics editor app like PhotoShop or in my case Pixelmator and create a new image that is 512×512 pixels. This will make it look great for Apple’s new Retina displays, but don’t worry… Apple will auto scale it down to also look great on non Retina devices like the iPhone 3G or iPad’s version 1 or 2.
Save your icon as apple-touch-icon.png if you want the bubble highlight overlay or apple-touch-icon-precomposed.png if you don’t want it. You can see both examples towards the end of this post.
Upload your saved icon to your websites root directory. In WordPress this typically would be where all your WordPress core files are located.
Visit your website on your iPhone or iPad and tap the Add to Home Screen/Share/Whatever they call that button. (I put a red square around it in the pic to highlight it.;)
Tap Add to Home Screen.
Call it whatever you want. It pulls this from the website’s home page title tag, but can be edited.
That’s it! Now you have your shiny new Retina ready iOS icon on your iPhone or iPad. Now your only choice is to use the bubble overlay or not. I decided to not for this site. You can see both examples of this site’s icon below.