In case an iPhone user saves my site as a favorite on his homescreen I want an icon to displayed instead a thumbnailed screenshot.
How can I do that?
According to Apple’s Human Interface Guidelines, you should create an image in PNG format that “measures 57 x 57 pixels, with 90 degree corners (if the image measures other than this size, iPhone 1.1.3 scales it.)”
Save this image in your root document folder as
apple-touch-icon.png if you want the iPhone to add the default visual effects (rounded corner, drop shadow and gloss), or as
apple-touch-icon-precomposed.png if you don't want it to add any visual effects. This will enable the icon for the entire website.
If you want to add an icon to a specific page, or use a custom file name, use this code:
<link rel="apple-touch-icon" href="/custom_icon.png"/>
You need to add a extra link tag with a PNG image, usually 57 x 57px:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
According to other sites, it looks like it also needs to be in the root of your site, but I haven't confirmed this. Last site I did it on, I just put i in the root since I saw a few other sites had done so. But it looks like other sites have put it inside a sub folder.
Add a favicon to your web page, and give it a specific name:
just that other doctype users won't get into the same troubles:
I created and saved the apple-touch-icon.png with Photoshop CS 2. It didn't worked with "save as...", but with "save for web..."