Using `/apple-touch-icon-precomposed.png` no longer works #1615

alrra · 2014-10-11T14:14:02Z

It seems that Safari for iOS 8 (?) will no longer request the /apple-touch-icon-precomposed.png. Simple way to test this: just try to Add to Home Screen http://html5boilerplate.com/ (the site contains the /apple-touch-icon-precomposed.png in the root)

Notes:

The data below was generated using an iPad 3 running iOS 8.0.2.

Safari will make the following requests when the user touches the icon:

192.168.2.101 - - [11/Oct/2014:16:12:14 +0300] "GET /apple-touch-icon-152x152-precomposed.png HTTP/1.1" 404 238
192.168.2.101 - - [11/Oct/2014:16:12:14 +0300] "GET /apple-touch-icon-152x152.png HTTP/1.1" 404 226
192.168.2.101 - - [11/Oct/2014:16:12:15 +0300] "GET /apple-touch-icon.png HTTP/1.1" 404 218
192.168.2.101 - - [11/Oct/2014:16:12:15 +0300] "GET /apple-touch-icon.png HTTP/1.1" 404 218

so, it won't make any request for the /apple-touch-icon-precomposed.png.

If a <link> is included, e.g.:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

Safari will make, as intended, the following request:

192.168.2.101 - - [11/Oct/2014:17:34:21 +0300] "GET /apple-touch-icon-precomposed.png HTTP/1.1" 200 3962

Cc: @mathiasbynens

The text was updated successfully, but these errors were encountered:

arthurvr · 2014-10-11T14:21:35Z

Confirmed on iPad Air running IOS 8.0.2 and iPhone 6 running 8.0.2. If we rename /apple-touch-icon-precomposed.png to /apple-touch-icon.png, will it break compatibility with older IOS versions?

What are the apple docs saying about this topic?

Update: from the apple docs:

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png

alrra · 2014-10-11T14:36:22Z

If we rename /apple-touch-icon-precomposed.png to /apple-touch-icon.png

@arthurvr Just renaming will still get you two 404 requests, plus IMHO, we don't know what the future holds, so I think we'll need to include a <link> tag (and of course test everything more).

192.168.2.101 - - [11/Oct/2014:17:29:56 +0300] "GET /apple-touch-icon-152x152-precomposed.png HTTP/1.1" 404 238
192.168.2.101 - - [11/Oct/2014:17:29:56 +0300] "GET /apple-touch-icon-152x152.png HTTP/1.1" 404 226
192.168.2.101 - - [11/Oct/2014:17:29:56 +0300] "GET /apple-touch-icon.png HTTP/1.1" 200 3962

arthurvr · 2014-10-11T14:39:52Z

@alrra True. 3 requests is totally unneeded.

+1 for including a <link>

drublic · 2014-10-11T15:23:05Z

Just renaming will still get you two 404 requests, so I think we'll need to include a <link> tag (and of course test everything more).

Thought we can get around include a <link> tag but in this case it seems to be a possible solution. +1.

mathiasbynens · 2014-10-15T14:17:53Z

+1 to adding a <link>.

Since -precomposed hasn’t been useful for the last few iOS versions, why not use this instead:

<link rel="apple-touch-icon" href="apple-touch-icon.png">

alrra · 2014-10-15T19:50:23Z

Since -precomposed hasn’t been useful for the last few iOS versions, why not use this instead:
<link rel="apple-touch-icon" href="apple-touch-icon.png">

@mathiasbynens SGTM (will open a PR ~~tomorrow~~ in the next few days that also updates the docs).

Ref: h5bp/html5-boilerplate#1615 https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

alrra · 2014-10-21T16:33:57Z

Closing this in favor of #1622.

alrra · 2014-10-21T17:06:43Z

Note: Safari on iOS 8.1 (iPad 3) will make the following requests when the user touches the icon:

192.168.2.101 - - [21/Oct/2014:20:05:00 +0300] "GET /apple-touch-icon-152x152-precomposed.png HTTP/1.1" 404 129
192.168.2.101 - - [21/Oct/2014:20:05:01 +0300] "GET /apple-touch-icon-152x152.png HTTP/1.1" 404 129
192.168.2.101 - - [21/Oct/2014:20:05:01 +0300] "GET /apple-touch-icon.png HTTP/1.1" 404 129

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

Ref h5bp/html5boilerplate.com@71b10e1 h5bp/html5-boilerplate#1615 https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

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

This is no longer needed. More info: http://stackoverflow.com/questions/20716490/apple-touch-icon-precomposed-is-not-a-real-value-for-the-rel-attribute h5bp/html5-boilerplate#1615 google/web-starter-kit#492

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

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

alrra added bug awaiting feedback labels Oct 11, 2014

alrra added this to the 5.0.0 milestone Oct 11, 2014

alrra self-assigned this Oct 21, 2014

alrra mentioned this issue Oct 21, 2014

Rename Apple touch icon & add <link> in index.html #1622

Closed

alrra closed this as completed Oct 21, 2014

alrra removed the awaiting feedback label Oct 21, 2014

alrra added the icons label Oct 21, 2014

alrra removed their assignment Nov 27, 2014

ImBobby mentioned this issue Jan 30, 2015

Safari no longer use apple-touch-icon-precomposed ImBobby/suit-baze#12

Closed

JosefJezek mentioned this issue Feb 10, 2015

Use head content from web starter kit yeoman/generator-polymer#109

Closed

alrra mentioned this issue Jul 2, 2015

Make minor icon related improvements operasoftware/devopera#312

Merged

gjb2048 mentioned this issue Apr 1, 2017

Fix Apple touch icon gjb2048/moodle-theme_essential#818

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using `/apple-touch-icon-precomposed.png` no longer works #1615

Using `/apple-touch-icon-precomposed.png` no longer works #1615

alrra commented Oct 11, 2014

arthurvr commented Oct 11, 2014

alrra commented Oct 11, 2014

arthurvr commented Oct 11, 2014

drublic commented Oct 11, 2014

mathiasbynens commented Oct 15, 2014

alrra commented Oct 15, 2014

alrra commented Oct 21, 2014

alrra commented Oct 21, 2014

Using /apple-touch-icon-precomposed.png no longer works #1615

Using /apple-touch-icon-precomposed.png no longer works #1615

Comments

alrra commented Oct 11, 2014

arthurvr commented Oct 11, 2014

alrra commented Oct 11, 2014

arthurvr commented Oct 11, 2014

drublic commented Oct 11, 2014

mathiasbynens commented Oct 15, 2014

alrra commented Oct 15, 2014

alrra commented Oct 21, 2014

alrra commented Oct 21, 2014

Using `/apple-touch-icon-precomposed.png` no longer works #1615

Using `/apple-touch-icon-precomposed.png` no longer works #1615