Skip to content

Commit

Permalink
fix: use only one 180x180px touch icon (#1213)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
alrra authored and nolanlawson committed May 14, 2019
1 parent 9e6bc60 commit cdade05
Show file tree
Hide file tree
Showing 3 changed files with 1 addition and 2 deletions.
3 changes: 1 addition & 2 deletions src/build/template.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@

<link id='theManifest' rel='manifest' href='/manifest.json' >
<link id='theFavicon' rel='icon' type='image/png' href='/favicon.png' >
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120.png" >
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180.png" >
<link rel="apple-touch-icon" href="/apple-icon.png" >
<meta name="mobile-web-app-capable" content="yes" >
<meta name="apple-mobile-web-app-title" content="Pinafore" >
<meta name="apple-mobile-web-app-status-bar-style" content="white" >
Expand Down
Binary file removed static/apple-icon-120.png
Binary file not shown.
File renamed without changes

0 comments on commit cdade05

Please sign in to comment.