Recent Posts
Recent Images
Popular Tags

Customise the preview icon used for your website on the iOS homescreen

One of the features available in recent versions of the operating software used on the iPod Touch, the iPad and the iPhone is the ability to add a bookmark to your homescreen. By default the bookmark icon will be a small screenshot of the bookmarked page. However, it is very easy to override this image and set one of your own.

All you need to do is place a 60x60px PNG image, in the top level of your website, with a filename of "apple-touch-icon.png". You don't have to make the image look like an iOS app - shading and highlights will be added automatically. The corners of the icon will also be rounded automatically.

You can also place the icon in a different location and use a meta tag to tell iOS where to look for it. An example would be:

<link rel="apple-touch-icon" href="/images/ios/webapp.png" />

This technique is often used to create webapps - webpages that look and and act like native iOS applications. 

Copyright © CHAZCO 2014