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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

¹ #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

CHANGELOG.md

@@ -1,5 +1,8 @@
 ### HEAD
 
+* Rename Apple touch icon to `apple-touch-icon.png` and add
+  `<link>` in `index.html`
+  ([#1622](https://github.com/h5bp/html5-boilerplate/issues/1622)).
 * Update Apache Server Configs to v2.10.0.
 * Add vertical centering for `iframe`
   ([#1613](https://github.com/h5bp/html5-boilerplate/issues/1613)).

dist/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).

dist/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

dist/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">

src/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).

src/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

src/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">

test/tests.js

@@ -18,7 +18,7 @@ var expectedFilesInDistDir = [
     '.gitignore',
     '.htaccess',
     '404.html',
-    'apple-touch-icon-precomposed.png',
+    'apple-touch-icon.png',
     'browserconfig.xml',
     'crossdomain.xml',