Incorrect apple-touch-icon is being loading

Question

This code, put in the head element, loads the 120px icon on my iPhone 6 Plus when I go to add the site to the home screen, even though the Apple documentation says that shouldn't be the case.

<link rel="apple-touch-icon" sizes="120x120" href="img/icon-120.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/icon-180.png">

Thoughts?

Answer 1

This is either a bug of iOS or a bug in Apple specs, but in any case this is not normal.

This issue was discussed as an issue of the html5-boilerplate project and also documented in RealFaviconGenerator compatibility page (full disclosure: I'm the author of this site). The bottom line:

• Despite of the specs, the iPhone 6 / iOS 8 does not use the 180x180 icon for the home screen, but the 120x120 icon. This is what you observe.
• The 180x180 icon is used in two situations: when a bookmark is created on an iPhone 6 / iOS 8 (so the iPhone 6 does use this icon after all) and for add to home screen on an iPad 3rd generation / iOS 8 (so some iOS devices do use this icon for home screen).