How do I give my websites an icon for iPhone?

Question

How do I set the icon that appears proper on the iPhone for the websites I have created?

Answer 1

See the Specifying a Webpage Icon for Web Clip section of the Configuring Web Applications page of the Safari Web Content Guide in the Safari Reference Library.

Specifying a Webpage Icon for Web Clip

You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iOS.

• To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png.

• To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:
  
  In the above example, replace custom_icon.png with your icon filename.

---

Note: Safari on iOS 7 doesn’t add effects to icons. Older versions of Safari will not add effects for icon files named with the -precomposed.png suffix. See First Steps: Identifying Your App in iTunes Connect for details.