Mike Pennington Mike Pennington - 20 days ago 5
HTML Question

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

While I was looking at the HTML source for my favorite website, I noticed that it's using

<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon image_src" href="apple-touch-icon.png">


Obviously the second link has something to do with Apple's iOS, but why isn't
<link rel="shortcut icon" href="favicon.ico">
sufficient? What is special about iOS that it requires a dedicated shortcut icon?

Answer

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.