Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Sep 25, 2014

Conversation

alrra
Copy link
Member

@alrra alrra commented Sep 17, 2014

Documentation and other information

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.

@alrra alrra changed the title Update apple-touch-icon-precomposed.png icon size to 180×180 Update apple-touch-icon-precomposed.png size to 180×180 Sep 17, 2014
@alrra alrra changed the title Update apple-touch-icon-precomposed.png size to 180×180 Update apple-touch-icon-precomposed.png size to 180×180px Sep 17, 2014
@mathiasbynens
Copy link
Member

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
Copy link
Member Author

alrra commented Sep 18, 2014

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:

screen shot 2014-09-18 at 13 13 49 screen shot 2014-09-18 at 13 15 18

@arthurvr
Copy link
Member

@mathiasbynens
Copy link
Member

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
Copy link

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
Copy link
Member

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
Copy link
Member Author

alrra commented Sep 20, 2014

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
Copy link
Member Author

alrra commented Sep 20, 2014

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! 📎

@alrra alrra modified the milestone: 5.0.0 Sep 21, 2014
@alrra alrra force-pushed the update_apple-touch-icon branch from 274ac27 to 901166a Compare September 21, 2014 20:32
@alrra alrra changed the title Update apple-touch-icon-precomposed.png size to 180×180px Update apple-touch-icon-precomposed.png and the documentation related to the apple touch icons Sep 21, 2014
@alrra alrra force-pushed the update_apple-touch-icon branch from 901166a to 9fdfb93 Compare September 21, 2014 21:29
@alrra alrra changed the title Update apple-touch-icon-precomposed.png and the documentation related to the apple touch icons Update apple-touch-icon-precomposed.png and the docs related to the touch icons Sep 21, 2014
@alrra alrra mentioned this pull request Sep 22, 2014
@patrickkettner
Copy link
Contributor

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

@alrra alrra force-pushed the update_apple-touch-icon branch from 9fdfb93 to 286b226 Compare September 22, 2014 14:28
@Rootside
Copy link

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
Copy link
Member Author

alrra commented Sep 22, 2014

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

Thanks @patrickkettner!

@alrra
Copy link
Member Author

alrra commented Sep 22, 2014

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 alrra force-pushed the master branch 2 times, most recently from 8e933d7 to 712568f Compare September 22, 2014 17:09
@alrra
Copy link
Member Author

alrra commented Sep 23, 2014

iPhone 6 Plus uses the 120×120px icon

Also confirmed by Maximiliano Firtman on twitter. 📎

 * Update the documentation regarding the Apple touch icons, by
   reflecting the recent changes brought by the release of iOS 8 and the
   new iPhone 6 and 6 Plus.

   Note: The changes do not follow all Apple's iOS Human Interface
   Guidelines¹, as in practice, the images used by the different devices
   are different² from the ones specified in the Apple documentation.

 * Update the `apple-touch-icon-precomposed.png` to be `180×180px` (this
   is now the largest image size used by any Apple device running iOS).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

¹ https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
² #1599

Close #1599.
@alrra alrra force-pushed the update_apple-touch-icon branch from 286b226 to 1c4fcf3 Compare September 25, 2014 08:29
@phbernard
Copy link

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
Copy link
Member

arthurvr commented Oct 3, 2014

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
Copy link

Rootside commented Oct 3, 2014

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
Copy link
Contributor

I tested on a 6+ on 8.0.2, still 120

@alrra
Copy link
Member Author

alrra commented Oct 5, 2014

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

Thanks again @patrickkettner!

alrra added a commit that referenced this pull request Oct 6, 2014
Clarify that the iPad and iPad mini with @1x display running iOS 8 are
also using the `76×76px` touch icon.

Ref: #1599.
@alrra
Copy link
Member Author

alrra commented Oct 21, 2014

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
Copy link

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
Copy link
Member Author

alrra commented Oct 21, 2014

Thanks @sarukuku!

@alrra alrra added fix icons and removed fix labels Oct 21, 2014
@phbernard
Copy link

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
Copy link
Member Author

alrra commented Oct 23, 2014

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
Copy link

@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
Copy link
Member Author

alrra commented Nov 27, 2014

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
Copy link
Contributor

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

@alrra
Copy link
Member Author

alrra commented Nov 28, 2014

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
Copy link

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

s4-lolli_test

eleanor-byhook pushed a commit to eleanor-byhook/html5-boilerplate that referenced this pull request Feb 29, 2016
 * Update the documentation regarding the Apple touch icons, by
   reflecting the recent changes brought by the release of iOS 8 and the
   new iPhone 6 and 6 Plus.

   Note: The changes do not follow all Apple's iOS Human Interface
   Guidelines¹, as in practice, the images used by the different devices
   are different² from the ones specified in the Apple documentation.

 * Update the `apple-touch-icon-precomposed.png` to be `180×180px` (this
   is now the largest image size used by any Apple device running iOS).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

¹ https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
² h5bp/html5-boilerplate#1599

Close h5bp/html5-boilerplate#1599.
eleanor-byhook pushed a commit to eleanor-byhook/html5-boilerplate that referenced this pull request Feb 29, 2016
Clarify that the iPad and iPad mini with @1x display running iOS 8 are
also using the `76×76px` touch icon.

Ref: h5bp/html5-boilerplate#1599.
jeffreznik pushed a commit to jeffreznik/sw-test that referenced this pull request Oct 15, 2017
 * Update the documentation regarding the Apple touch icons, by
   reflecting the recent changes brought by the release of iOS 8 and the
   new iPhone 6 and 6 Plus.

   Note: The changes do not follow all Apple's iOS Human Interface
   Guidelines¹, as in practice, the images used by the different devices
   are different² from the ones specified in the Apple documentation.

 * Update the `apple-touch-icon-precomposed.png` to be `180×180px` (this
   is now the largest image size used by any Apple device running iOS).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

¹ https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
² h5bp#1599

Close h5bp#1599.
jeffreznik pushed a commit to jeffreznik/sw-test that referenced this pull request Oct 15, 2017
Clarify that the iPad and iPad mini with @1x display running iOS 8 are
also using the `76×76px` touch icon.

Ref: h5bp#1599.
nolanlawson pushed a commit to nolanlawson/pinafore that referenced this pull request May 14, 2019
* Include just one 180x180px touch icon`.

  Over time as Apple released different size displays for their
  devices, the requirements¹ for the size of the touch icon have
  changed quite a bit:

   * 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+

  However, most iOS users will be on the latest 2 versions² of iOS
  and using newer devices, so nowadays, one 180x180px touch icon is
  enough.

  Also, if needed, the icon will be automatically³ downscaled by
  Safari, and the result of the scaling is generally ok.

* Remove unneeded `sizes` attribute.

  When using only one touch icon there is no need to use the `sizes`
  attribute.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

¹ h5bp/html5-boilerplate#1599 (comment)
² https://developer.apple.com/support/app-store/
³ https://realfavicongenerator.net/blog/how-ios-scales-the-apple-touch-icon/

See also: https://mathiasbynens.be/notes/touch-icons
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants