Rename Apple touch icon & add <link> in index.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 `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
jeffreznik · Oct 21, 2014 · aa8af33 · aa8af33
1 parent 5d28958
commit aa8af33
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 21 deletions.
diff --git a/apple-touch-icon-precomposed.png → apple-touch-icon.png b/apple-touch-icon-precomposed.png → apple-touch-icon.png
diff --git a/doc/extend.md b/doc/extend.md
@@ -579,16 +579,9 @@ on Apple's site.
 
 ### Apple Touch Icons
 
-Touch Icons can be seen as the favicons of mobile devices and tablets.
+The Apple touch icons can be seen as the favicons of iOS devices.
 
-If your site or icons are in a sub-directory, you will need to reference the
-icons using `link` elements placed in the HTML `head` of your document, e.g.:
-
-```html
-<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
-```
-
-The main sizes of the icons on iOS are:
+The main sizes of the Apple touch icons are:
 
 * `57×57px` – iPhone with @1x display and iPod Touch
 * `72×72px` – iPad and iPad mini with @1x display running iOS ≤ 6
@@ -608,18 +601,16 @@ Displays meaning:
 More information about the displays of iOS devices can be found
 [here](https://en.wikipedia.org/wiki/List_of_iOS_devices#Display).
 
-For non-Retina iPhone, iPod Touch, and Android 2.1+ devices you can use the
-example from above or replace the `apple-touch-icon-precomposed.png` within
-this project's root folder.
+In most cases, one `180×180px` touch icon named `apple-touch-icon.png`
+and including:
 
-In most cases, one `180×180px` touch icon named `apple-touch-icon-precomposed.png`
-is enough. If you use art-direction and want to have different content for each
-size, you can add more touch icons as written above.
+```html
+<link rel="apple-touch-icon" href="apple-touch-icon.png">
+```
 
-As of iOS 7, no special effects are applied to the touch icons. So, if you are
-only targeting iOS 7 and up, you don’t have to use `precomposed` anymore (but
-we [strongly recommend you
-do](https://mathiasbynens.be/notes/touch-icons#effects)!).
+in the `<head>` of the page is enough. If you use art-direction and/or
+want to have different content for each device, you can add more touch
+icons as written above.
 
 For a more comprehensive overview, please refer to Mathias' [article on Touch
 Icons](https://mathiasbynens.be/notes/touch-icons).

diff --git a/doc/usage.md b/doc/usage.md
@@ -33,7 +33,7 @@ A basic HTML5 Boilerplate site initially looks something like this:
 │       └── modernizr.min.js
 ├── .htaccess
 ├── 404.html
-├── apple-touch-icon-precomposed.png
+├── apple-touch-icon.png
 ├── index.html
 ├── humans.txt
 ├── robots.txt

diff --git a/index.html b/index.html
@@ -7,7 +7,8 @@
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
+        <link rel="apple-touch-icon" href="apple-touch-icon.png">
+        <!-- Place favicon.ico in the root directory -->
 
         <link rel="stylesheet" href="css/normalize.css">
         <link rel="stylesheet" href="css/main.css">