Update apple-touch-icon-precomposed.png and the docs related to the touch icons

[alrra]

Documentation and other information

• From the Apple documentation https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html:

  

  (thanks @arthurvr)

• From: http://www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers:

  

  edit: see Update apple-touch-icon-precomposed.png and the docs related to the touch icons #1599 (comment).

Testing

The information from above needs to be tested and confirmed! (@mathiasbynens updated his test page)

Note: I'll update the commit as we go along and more information is confirmed.

[mathiasbynens]

I’ve updated https://mathiasbynens.be/demo/touch-icon. If you are the lucky owner of an iPhone 6 Plus, please visit the page (use this easy-to-type short URL: mths.be/bta), add it to your homescreen, and report back which icon it uses. Thanks!

[alrra]

I can confirm that the iPad (3rd generation) running iOS 8.0 also uses the 180×180px touch icon.

 

---

Out of curiosity I've also tested using the iOS Simulator (MacBook Pro without a retina display running OS X 10.9.4), however I only got the 120×120px touch icon for iPhone 6 Plus:

[arthurvr]

Check out the official docs on this topic: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html

[mathiasbynens]

Ah, looks like the docs have been updated in the mean time. Thanks @arthurvr – and thanks for testing, @alrra.

The HIG now mentions 120×120px icon as well instead of the 114×114px one, so I’ve updated https://mathiasbynens.be/demo/touch-icon once again to include a 120×120px icon as well.

I can confirm that an iPhone 5S running iOS 8 uses the 120px icon.

[Rootside]

Just to confirm:

iPad 3rd gen (the first with a retina display), iOS 8: 180x180
iPhone 5, iOS 8: 120x120

So while the HIG recommends 152x152 for iPad (@ 2x), iOS 8 actually uses 180x180 if available.

[mathiasbynens]

The iPhone 6 Plus uses the 120×120px icon, as per https://twitter.com/JZdziarski/status/513011619212038144:

@mathias it uses the 120x120 icon on the 6 Plus.

[alrra]

Thanks for testing @Rootside!

iPhone 6 Plus uses the 120×120px icon

@mathiasbynens Interesting. However, it would be nice to have at least one or two more sources that confirm that. :)

[alrra]

From: http://www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers:

A new icon size is available for iPhone 6 Plus, 180×180. iPhone 6 will use the same 120×120 that you should be using today for iOS 7 and (iPhone 4/5)s.

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">

Not yet confirmed! 📎

[patrickkettner]

iPhone 6 Plus uses the 120×120px icon

@mathiasbynens Interesting. However, it would be nice to have at least one or two more sources that confirm that. :)

I can also confirm that the iPhone 6 Plus uses the 120×120px icon

[Rootside]

If the iPhone 6 Plus requests 120x120, then it’s either a mistake on Apple’s part, or the 180x180 size is meant for a forthcoming @ 3x iPad – or both.

[alrra]

I can confirm that the iPhone 6 Plus uses the 120×120px icon

Thanks @patrickkettner!

[alrra]

So, It seems that we have the following (please correct me if I made a mistake!):

• 57×57px – iPhone with @1x display and iPod Touch
• 72×72px – iPad and iPad mini with @1x display running iOS ≤ 6
• 76×76px – iPad and iPad mini with @1x display running iOS ≥ 7
• 114×114px – iPhone with @2x display running iOS ≤ 6
• 120×120px – iPhone with @2x and @3x display running iOS ≥ 7
• 144×144px – iPad and iPad mini with @2x display running iOS ≤ 6
• 152×152px – iPad and iPad mini with @2x display running iOS 7
• 180×180px – iPad and iPad mini with @2x display running iOS 8

Displays meaning:

• @1x - non-Retina
• @2x - Retina
• @3x - Retina HD

More information about the displays of iOS devices can be found here.

[alrra]

iPhone 6 Plus uses the 120×120px icon

Also confirmed by Maximiliano Firtman on twitter. 📎

[phbernard]

I could test with my own iPad mini with @1x display running iOS 8.0.2:

• Home screen icon: 76x76
• Bookmark icon: 152x152

In other words, no change compared to iOS 7.

(I ran RFG compatibility tests).

[arthurvr]

Probably this should be tested on an iPhone 6 plus running IOS 8.0.2 too. Maybe this wasn't a problem with the docs, but with the software itself.

[Rootside]

Update: in iOS 8.0.2, iPad 3rd gen (@2x) uses 180x180

As a sidenote, Apple seems to be struggling a little bit with the software updates. Without an actual statement from Apple, it might take a while to find out what’s a mistake and what’s intended behaviour – I wouldn’t be surprised if this isn’t addressed until new iPads come out.

[patrickkettner]

I tested on a 6+ on 8.0.2, still 120

[alrra]

I tested on a 6+ on 8.0.2, still 120 📎

Thanks again @patrickkettner!

[alrra]

I can confirm that the iPad (3rd generation) running iOS 8.0 also uses the 180×180px touch icon.

Same result on iOS 8.1.

If anyone can run the test for:

• iPhone 6 / 6 Plus running iOS 8.1
• iPad Air 2
• iPad Mini 3

and report back, we would be very grateful! :D

[sarukuku]

iPhone 6 on iOS 8.1 seems to use 120x120px touch icon. This seems to be the case when the Display Zoom option is set to Standard or Zoomed, tested both.

[alrra]

Thanks @sarukuku!

[phbernard]

I've run the RFG compatibility test (not Mathias's) on an iPhone 6 and an iPhone 6 Plus. Both gave the same results:

• Add to home screen: 120x120
• Add to bookmarks: 180x180

So yes, the 180x180 touch icon was used... but not for the "Add to HS" use case.

[alrra]

an iPhone 6 and an iPhone 6 Plus ... Add to home screen: 120x120

@phbernard Just to be clear: iOS 8.1?

Add to bookmarks: 180x180

Using the RFG compatibility test and Add Bookmarks on an iPad 3 running iOS 8.1, I got the 180×180px image:

However, using @mathiasbynens's test that also has this line:

<link rel="apple-touch-icon" sizes="228x228" href="https://dummyimage.com/228x228.png">

I got the 228x228px image:

Which made me wander if Safari would use an even bigger image. So I tested for multiple values and I ended up with 300x300px as the maximum image size that Safari for iOS 8.1 on iPad 3 will use when bookmarking.

<link rel="apple-touch-icon" sizes="300x300" href="https://dummyimage.com/300x300.png">

Beyond that value it would just use the 180×180px image.

@phbernard Can you test if Safari for iPhone 6 Plus would use images bigger the 180x180px when bookmarking? Thanks!

[phbernard]

@alrra User agent parsing said "iOS 8.2" (done by ua-parser) so I think that means "8.0.2".

Sure I can test larger pictures. However, I have to go to an Apple Center for this. I'll try to get there in a week or two and perform several tests on all available devices (iPad Air 2 will have been released). I'll get the iOS version from device settings instead of relying on the user agent.

[alrra]

Sure I can test larger pictures. However, I have to go to an Apple Center for this. I'll try to get there in a week or two and perform several tests on all available devices (iPad Air 2 will have been released). I'll get the iOS version from device settings instead of relying on the user agent.

@phbernard Did you by any chance had the time to do the tests?

[marcobiedermann]

According to this post, iPhone Classic iOS 7 uses 60x60
http://css-tricks.com/favicon-quiz/

[alrra]

According to this post, iPhone Classic iOS 7 uses 60x60

@marcobiedermann From what I can tell, none of the iPhones with @1x display (original iPhone, iPhone 3G, iPhone 3GS) ever received the iOS 7 update.

[ArnaudDelafosse]

On Samsung S4 / Android Lollipop (5.0.1), the 228x228 is used for both Home screen et Favorite list.