Rename Apple touch icon & add <link> in index.html #1622
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
LGTM. The file tree in |
@arthurvr Fixed, thanks! |
|
👍 |
|
Works in my tests. Good to ship IMO. |
|
Solid and acceptable. 👍 |
Until now we recommended to our users to include an image named
`apple-touch-icon-precomposed.png` in the root of their website.
Since the iOS 8 release however, Safari will no longer request¹
the `/apple-touch-icon-precomposed.png` by default, and instead,
it will make the following requests¹:
/apple-touch-icon-152x152-precomposed.png
/apple-touch-icon-152x152.png
/apple-touch-icon.png
In order to fix this issue we decided¹ to rename
`apple-touch-icon-precomposed.png` to `apple-touch-icon.png`,
and include a `<link>` element in the `index.html`:
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Notes:
* Just renaming `apple-touch-icon-precomposed.png` to
`apple-touch-icon.png` would have also worked², even with
older version of iOS. Unfortunately, it wouldn't have
represented a good solution as Apple may change again what
is requested by default, plus, it would have generated quite
a few 404s³.
* We decided to rename the touch icon because most iOS users⁴
are on iOS 7+, so the `precomposed` keyword no longer brings
much benefit (as of iOS 7, no special effects are applied to
touch icons).
* Adding `<link rel="apple-touch-icon" ...>` in `index.html`
will also allow⁵ (some of) the default Android 2.2+ browsers
to use the touch icon.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
¹ #1615
² https://mathiasbynens.be/notes/touch-icons
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
³ https://code.google.com/p/chromium/issues/detail?id=259681
#1615
⁴ According to Apple (as measured by the App Store on October 13, 2014):
* 5% iOS < 7
* 47% iOS 7
* 48% iOS 8
From: https://developer.apple.com/support/appstore/
https://cloud.githubusercontent.com/assets/1223565/4720999/2aa8ba26-5935-11e4-9492-92ff6a50ad7d.png
⁵ http://www.ravelrumba.com/blog/android-apple-touch-icon/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Close #1622
alrra
added a commit
to use-init/init
that referenced
this pull request
Oct 24, 2014
Until now we recommended to our users to include an image named
`apple-touch-icon-precomposed.png` in the root of their website.
Since the iOS 8 release however, Safari will no longer request¹
the `/apple-touch-icon-precomposed.png` by default, and instead,
it will make the following requests¹:
/apple-touch-icon-152x152-precomposed.png
/apple-touch-icon-152x152.png
/apple-touch-icon.png
In order to fix this issue we decided¹ to rename
`apple-touch-icon-precomposed.png` to `apple-touch-icon.png`,
and include a `<link>` element in the `templates/header.html `:
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Notes:
* Just renaming `apple-touch-icon-precomposed.png` to
`apple-touch-icon.png` would have also worked², even with
older version of iOS. Unfortunately, it wouldn't have
represented a good solution as Apple may change again what
is requested by default, plus, it would have generated quite
a few 404s³.
* We decided to rename the touch icon because most iOS users⁴
are on iOS 7+, so the `precomposed` keyword no longer brings
much benefit (as of iOS 7, no special effects are applied to
touch icons).
* Adding `<link rel="apple-touch-icon" ...>` in
`templates/header.html` will also allow⁵ (some of) the default
Android 2.2+ browsers to use the touch icon.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
¹ h5bp/html5-boilerplate#1615
² https://mathiasbynens.be/notes/touch-icons
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
³ https://code.google.com/p/chromium/issues/detail?id=259681
h5bp/html5-boilerplate#1615
⁴ According to Apple (as measured by the App Store on October 13, 2014):
* 5% iOS < 7
* 47% iOS 7
* 48% iOS 8
From: https://developer.apple.com/support/appstore/
https://cloud.githubusercontent.com/assets/1223565/4720999/2aa8ba26-5935-11e4-9492-92ff6a50ad7d.png
⁵ http://www.ravelrumba.com/blog/android-apple-touch-icon/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ref: h5bp/html5-boilerplate#1622
eleanor-byhook
pushed a commit
to eleanor-byhook/html5-boilerplate
that referenced
this pull request
Feb 29, 2016
Until now we recommended to our users to include an image named
`apple-touch-icon-precomposed.png` in the root of their website.
Since the iOS 8 release however, Safari will no longer request¹
the `/apple-touch-icon-precomposed.png` by default, and instead,
it will make the following requests¹:
/apple-touch-icon-152x152-precomposed.png
/apple-touch-icon-152x152.png
/apple-touch-icon.png
In order to fix this issue we decided¹ to rename
`apple-touch-icon-precomposed.png` to `apple-touch-icon.png`,
and include a `<link>` element in the `index.html`:
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Notes:
* Just renaming `apple-touch-icon-precomposed.png` to
`apple-touch-icon.png` would have also worked², even with
older version of iOS. Unfortunately, it wouldn't have
represented a good solution as Apple may change again what
is requested by default, plus, it would have generated quite
a few 404s³.
* We decided to rename the touch icon because most iOS users⁴
are on iOS 7+, so the `precomposed` keyword no longer brings
much benefit (as of iOS 7, no special effects are applied to
touch icons).
* Adding `<link rel="apple-touch-icon" ...>` in `index.html`
will also allow⁵ (some of) the default Android 2.2+ browsers
to use the touch icon.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
¹ h5bp/html5-boilerplate#1615
² https://mathiasbynens.be/notes/touch-icons
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
³ https://code.google.com/p/chromium/issues/detail?id=259681
h5bp/html5-boilerplate#1615
⁴ According to Apple (as measured by the App Store on October 13, 2014):
* 5% iOS < 7
* 47% iOS 7
* 48% iOS 8
From: https://developer.apple.com/support/appstore/
https://cloud.githubusercontent.com/assets/1223565/4720999/2aa8ba26-5935-11e4-9492-92ff6a50ad7d.png
⁵ http://www.ravelrumba.com/blog/android-apple-touch-icon/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Close h5bp/html5-boilerplate#1622
5 tasks
jeffreznik
pushed a commit
to jeffreznik/sw-test
that referenced
this pull request
Oct 15, 2017
Until now we recommended to our users to include an image named
`apple-touch-icon-precomposed.png` in the root of their website.
Since the iOS 8 release however, Safari will no longer request¹
the `/apple-touch-icon-precomposed.png` by default, and instead,
it will make the following requests¹:
/apple-touch-icon-152x152-precomposed.png
/apple-touch-icon-152x152.png
/apple-touch-icon.png
In order to fix this issue we decided¹ to rename
`apple-touch-icon-precomposed.png` to `apple-touch-icon.png`,
and include a `<link>` element in the `index.html`:
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Notes:
* Just renaming `apple-touch-icon-precomposed.png` to
`apple-touch-icon.png` would have also worked², even with
older version of iOS. Unfortunately, it wouldn't have
represented a good solution as Apple may change again what
is requested by default, plus, it would have generated quite
a few 404s³.
* We decided to rename the touch icon because most iOS users⁴
are on iOS 7+, so the `precomposed` keyword no longer brings
much benefit (as of iOS 7, no special effects are applied to
touch icons).
* Adding `<link rel="apple-touch-icon" ...>` in `index.html`
will also allow⁵ (some of) the default Android 2.2+ browsers
to use the touch icon.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
¹ h5bp#1615
² https://mathiasbynens.be/notes/touch-icons
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
³ https://code.google.com/p/chromium/issues/detail?id=259681
h5bp#1615
⁴ According to Apple (as measured by the App Store on October 13, 2014):
* 5% iOS < 7
* 47% iOS 7
* 48% iOS 8
From: https://developer.apple.com/support/appstore/
https://cloud.githubusercontent.com/assets/1223565/4720999/2aa8ba26-5935-11e4-9492-92ff6a50ad7d.png
⁵ http://www.ravelrumba.com/blog/android-apple-touch-icon/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Close h5bp#1622
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Until now we recommended to our users to include an image named
apple-touch-icon-precomposed.pngin the root of their website.Since the iOS 8 release however, Safari will no longer request the
/apple-touch-icon-precomposed.pngby default, and instead, it will make the following requests:In order to fix this issue we decided to rename
apple-touch-icon-precomposed.pngtoapple-touch-icon.png, and include a<link>element in theindex.html:Notes:
Just renaming
apple-touch-icon-precomposed.pngtoapple-touch-icon.pngwould have also worked, even with older version of iOS. Unfortunately, it wouldn't have represented a good solution as Apple may change again what is requested by default, plus, it would have generated quite a few 404s.We decided to rename the touch icon because most iOS users are on iOS 7+, so the
precomposedkeyword no longer brings much benefit (as of iOS 7, no special effects are applied to touch icons).According to Apple (as measured by the App Store on October 13, 2014)
(and yeah, Apple doesn't know how to count)
Adding
<link rel="apple-touch-icon" ...>inindex.htmlwill also allow (some of?) the default Android 2.2+ browsers to use the touch icon (but not the default Android 2.1 browser as it requires theprecomposedkeyword, however Android 2.1 is kinda dead).This fixes #1615
(to test, just go to http://html5boilerplate.com/ and
Add to Home Screen).Cc: @mathiasbynens