The iPhone is capable of showing a custom icon of web pages the user has added to their home screen, however by default the image is a simple snap shot of the screen. Here’s how to make a custom icon that will show up in the iPhone’s springboard when a user adds your website.
Your icon will receive the a glossed look as well as rounded corners.
In fact with a little coding, we can reference any png image as an icon for any individual page. Just use the following syntax:
<link rel="apple-touch-icon" href="icon.png">
where icon.png is the name of your icon. This code should be placed in between head tags in your html document. The file name will be taken from the HTML document title.
Thats all there is to it.