Menu
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?
843
This icon is used when someone adds your web page as a bookmark. For multiple icons with different device resolutions like iPhone or iPad, add sizes attribute to each link element as follows − <link rel = "apple-touch-icon" href = "touch-icon-iphone.png">
Similar to the Favicon, the Apple touch icon or apple-touch-icon. png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen, this icon is used.
Check out the Add an Apple touch icon to your Progressive Web App codelab to see how adding an Apple touch icon creates a more polished user experience. To provide a good user experience, make sure that: The icon is 180x180 pixels or 192x192 pixels. The specified path to the icon is valid.
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.
88
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
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" /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With