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?

  • and will a existing screenshot icon be displayed, if i add support for an icon? vikingosegundo about 7 years ago

4 answers

8
points
This was chosen as the best answer

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"/>       

Sources:

Answered about 7 years ago by Guillermo Esteves
  • You should still add the link tag no matter what because in general if you want to update an icon (favicon more likely), then browsers won't update their cache. Darryl Hein about 7 years ago
  • This is pretty much all you need to do. Add the link to your index, you probably won't need to for any other page. And any users that have already added the webapp to their homepage will have their icon updated. Cameron Munro almost 7 years ago
2
points

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.

Answered about 7 years ago by Darryl Hein
0
points

Add a favicon to your web page, and give it a specific name:

http://pixelspread.com/blog/320/iphone-favicons

Answered about 7 years ago by Brian Hollenbeck
0
points

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..."

Answered about 7 years ago by vikingosegundo