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

fix: use only one 180x180px touch icon #1213

Merged
merged 1 commit into from
May 14, 2019
Merged

fix: use only one 180x180px touch icon #1213

merged 1 commit into from
May 14, 2019

Conversation

alrra
Copy link
Contributor

@alrra alrra commented May 12, 2019

  • Include just one 180x180px touch icon`.

    Over time as Apple released different size displays for their devices, 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.


See also: https://mathiasbynens.be/notes/touch-icons

* 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
@nolanlawson
Copy link
Owner

Cool, thanks! 🎉

@nolanlawson nolanlawson merged commit cdade05 into nolanlawson:master May 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants