If you own an iphone or an itouch, 
you’ll be aware of when you ‘bookmark’ a page to your homepages from the internet, some sites have a specially-created icon the resembles an ‘app’ and other sites just have a small portion of the actual page. Today, I’ll show you how easy it is to apply a custom-made icon to load on any iphone/itouch.
Now usually, when you bookmark a page on the iphone, it normally captures the screen that was last visible before you pressed the ‘+’ button then ‘Add to Home Screen’ buttons. This screenshot gets used as an icon on the iphone – but you can customise this logo in the same way as a Favicon appears on a PC or Mac.
These are the steps to create an icon for your website:
1. Create a 57px × 57px PNG file (preferably non-transparent) to use as your icon
2. Name it ‘apple-touch-icon.png’ and place it in the root HTML folder of your site
3. To apply the icon, insert this simple code in the <head> tag of the header:
<link rel="apple-touch-icon" href="/apple-touch-icon.png” />
The iPhone automatically changes your icon to fit the style of the other icons including adding rounded corners to the shape and the glossy effect for the glassy-reflection style so you don’t need to do that yourself.
If you notice a slight delay after clicking the ‘Add to Home Screen’ button on your iPhone it is simply that the icon is being downloaded and ‘shine’ added.
Here’s the exact image I used for my iphone bookmark icon for this website:
Twitter
Facebook
Flickr
Linkedin