Why use <link rel="apple-touch-icon image_src" ...>?

When Mac iOS users bookmark or save a website to their iOS system, by mobile device, etc, the webpage is saved to the home screen as a screenshot of the page, which can be very unflattering.

Setting up an Apple Touch Icon for your website will over-all boost the visual optimization of your website for iOS users, which can be very flattering..

Apple Touch Icon Sizes

• 144 x 144 is the perfect size for iOS with retina displays. Icons will be compressed for other devices.
• 72 x 72 is used on iPads and 114 x 114 is used on iPhones.

Focus All devices

<link rel="apple-touch-icon" href="/custom_icon.png"/>

Focus Multiple Devices

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-retina-ipad.png" />

iOS has a concept of "Web Clips" for Web sites and applications. There are two main front-facing parts to an iOS Web application's presence on an iOS device: its Home screen icon (or the Web Clip icon), and its startup image. These are represented by apple-touch-icon and apple-touch-startup-image respectively.

The main differences between traditional favicons and Home screen icons are:

• Home screen icons are of a higher resolution. Even the smallest possible icon size, 29x29, is larger than the traditional favicon size, which is 16x16. Favicons in ICO format can have hi-res alternatives, but they weren't very well supported at the time iOS introduced Web Clips anyway.

• iOS prior to 7 would apply a gloss effect to icons by default to make them look at home on a Home screen. To give developers the option of turning this effect off Apple provided another possible value, apple-touch-icon-precomposed. Of course, in iOS 7 these effects are no longer ever applied, but that's how it was previously.

Since Home screen icons are so fundamentally different from favicons, it doesn't make sense to try and make existing shortcut icon schemes work on iOS. Hence, apple-touch-icon (and apple-touch-icon-precomposed).

And of course, following the introduction of the iPad and the Retina display (and a combination of both), Home screen icons now come in all sorts of sizes. Now that Apple has its own icon type to work with it can simply introduce its own sizes attribute for supplying different icon files for different sizes.

More details about Web apps in iOS can be found in the Safari Web Content Guide, particularly the section Configuring Web Applications.