Use one apple-touch-icon instead of six

This commit removes five Apple Touch Icons with different sizes for
the same icon and adds a new icon `apple-touch-icon-precomposed.png`
with a resolution of 152×152px.
Apart from that it adds documentation on how to add more icons if
you need them within your project.
Using only one Apple Touch Icon saves time and is enough in most
cases.

Closes #1367.
Closes #1425.

Author: drublic

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### HEAD
 
+* Use one apple-touch-icon instead of six ([#1367](https://github.com/h5bp/html5-boilerplate/issues/1367))
 * Move font-related declarations from `body` to `html` ([#1411](https://github.com/h5bp/html5-boilerplate/issues/1411)).
 * Update to Apache Server Configs 1.1.0.
 * Vertical centering for audio-, canvas- and video-tags ([#1326](https://github.com/h5bp/html5-boilerplate/issues/1326)).

apple-touch-icon-114x114-precomposed.png

@@ -516,6 +516,34 @@ Home Screen icon. This works since iOS 6.
 For further information please read the [official documentation](http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)
 on Apple's site.
 
+### Apple Touch Icons
+
+Touch Icons can be seen as the favicons of mobile devices and tablets.
+
+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.
+
+```html
+<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
+```
+
+The main sizes of the icons on iOS are:
+
+* iPad, high-resolution display, iOS 7: 152x152
+* iPad, high-resolution display, iOS ≤ 6: 144x144
+* iPhone, high-resolution display, iOS 7: 120x120
+* iPhone, high-resolution display, iOS ≤ 6: 114x114
+* iPad, non-Retina, iOS ≤ 6: 72x72
+
+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.
+
+Please refer to Mathias' [article on Touch
+Icons](http://mathiasbynens.be/notes/touch-icons) for a comprehensive overview.
+
+### Apple Touch Startup Image
+
 Apart from that it is possible to add start-up screens for web apps on iOS. This
 basically works by defining `apple-touch-startup-image` with an according link
 to the image. Since iOS devices have different screen resolutions it is

apple-touch-icon-144x144-precomposed.png

@@ -91,19 +91,14 @@ a simple setup that strikes a good balance for general use cases.
 <meta name="viewport" content="width=device-width, initial-scale=1">
 ```
 
-## Favicons and Touch Icons
+## Favicons and Touch Icon
 
 The shortcut icons should be put in the root directory of your site. HTML5
-Boilerplate comes with a default set of icons (include favicon and Apple Touch
-Icons) that you can use as a baseline to create your own.
-
-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.
-
-For a comprehensive overview, please read [Everything you always wanted to know
-about touch icons](http://mathiasbynens.be/notes/touch-icons) by Mathias
-Bynens.
+Boilerplate comes with a default set of icons (include favicon and one Apple
+Touch Icon) that you can use as a baseline to create your own.
 
+Please refer to the more detailed description in the [Extend section](extend.md)
+of these docs.
 
 ## Modernizr
 

apple-touch-icon-57x57-precomposed.png

@@ -34,12 +34,12 @@ A basic HTML5 Boilerplate site initially looks something like this:
 │       └── modernizr.min.js
 ├── .htaccess
 ├── 404.html
+├── apple-touch-icon-precomposed.png
 ├── index.html
 ├── humans.txt
 ├── robots.txt
 ├── crossdomain.xml
-├── favicon.ico
-└── [apple-touch-icons]
+└── favicon.ico
 ```
 
 What follows is a general overview of each major part and how to use them.
@@ -101,9 +101,13 @@ Edit this file to include any pages you need hidden from search engines.
 A template for working with cross-domain requests. [About
 crossdomain.xml](crossdomain.md).
 
-### icons
+### Icons
 
-Replace the default `favicon.ico` and apple touch icons with your own. You
-might want to check out Hans Christian's handy [HTML5 Boilerplate Favicon and
-Apple Touch Icon
+Replace the default `favicon.ico` and Apple Touch Icon with your own.
+
+If you want to use different Apple Touch Icons for different resolutions please
+refer to the [according documentation](extend.md#apple-touch-icons).
+
+You might want to check out Hans' handy [HTML5 Boilerplate Favicon and Apple
+Touch Icon
 PSD-Template](http://drublic.de/blog/html5-boilerplate-favicons-psd-template/).