Question

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?

Was it helpful?

Solution

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.

OTHER TIPS

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

It's the image you can see if you add the website to your home screen.

See the Safari Web Content Guide for details.

All the current answers only partially reply to the question. They explain the meaning of apple-touch-icon but not the meaning of image_src.

This answer helped me to understand the meaning of image_src. Here is what he said:

And image_src has indeed been registered there, with the information that it is used to “specify a Webpage Icon for use by Facebook, Yahoo, Digg, etc.”, no specification has been identified but an article about it is linked to, and it is “probably redundant with rel=icon”.

I would add to this answer image_src is the recommended image to use when we want to represent the website when PNG image is supported for icons. While rel=icon is the legacy way to do - probably when the application (ie: browser) does not support png.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top