Update Apple touch icons and according docs

Close h5bp#227 Close h5bp#232
shiaumayi · Oct 15, 2014 · 38e1a6e · 38e1a6e
1 parent cb1dd1b
commit 38e1a6e
Show file tree

Hide file tree

Showing 14 changed files with 42 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 == HEAD
 
+* Update _"Apple touch icons"_
 * Update to Apache Server Configs 2.9.0
 * Update Normalize.css to v3.0.2
 * Use `<!doctype html>` instead of `<!DOCTYPE html>`

diff --git a/doc/html.md b/doc/html.md
@@ -57,39 +57,38 @@ Media Queries - The Complete Idiot's Guide"). You can find out more in [the
 Apple developer docs](http://j.mp/mobileviewport). HTML5 Mobile Boilerplate comes with
 a simple setup that strikes a good balance for general use cases.
 
-## Home screen icon set
+## Touch Icons
 
-```html
- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
-```
-
-For the third generation iPad with high-resolution Retina Display
+Touch Icons can be seen as the favicons of mobile devices and tablets.
 
 ```html
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">
+<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
 ```
 
-For the iPhone 4 with high-resolution Retina Display
-
-```html
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png">
-```
+The main sizes of the icons for IOS are:
 
-For the first-generation iPad
+* `57×57px` – iPhone with @1x display and iPod Touch, Android stock browser
+* `72×72px` – iPad and iPad mini with @1x display running iOS ≤ 6
+* `76×76px` – iPad and iPad mini with @1x display running iOS ≥ 7
+* `114×114px` – iPhone with @2x display running iOS ≤ 6
+* `120×120px` – iPhone with @2x and @3x display running iOS ≥ 7
+* `144×144px` – iPad and iPad mini with @2x display running iOS ≤ 6
+* `152×152px` – iPad and iPad mini with @2x display running iOS 7
+* `180×180px` – iPad and iPad mini with @2x display running iOS 8
 
-```html
-<link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">
-```
+Displays meaning:
 
-For non-Retina iPhone, iPod Touch, and Android 2.1+ devices
+* @1x - non-Retina
+* @2x - Retina
+* @3x - Retina HD
 
-```html
-<link rel="shortcut icon" href="img/l/apple-touch-icon.png">
-```
+More information about the displays of iOS devices can be found
+[here](https://en.wikipedia.org/wiki/List_of_iOS_devices#Display).
 
-For a comprehensive overview, please read [Everything you always wanted to know about touch icons](https://mathiasbynens.be/notes/touch-icons) by Mathias Bynens.
+Also, there are `192x192px` and `128x128px` icons included for Chrome 31+.
 
-For Nokia devices
+For a more comprehensive overview, please refer to Mathias' [article on Touch
+Icons](https://mathiasbynens.be/notes/touch-icons).
 
 ## Mobile Internet Explorer ClearType Technology
 

diff --git a/img/touch/apple-touch-icon-114x114-precomposed.png b/img/touch/apple-touch-icon-114x114-precomposed.png
diff --git a/img/touch/apple-touch-icon-120x120-precomposed.png b/img/touch/apple-touch-icon-120x120-precomposed.png
diff --git a/img/touch/apple-touch-icon-144x144-precomposed.png b/img/touch/apple-touch-icon-144x144-precomposed.png
diff --git a/img/touch/apple-touch-icon-152x152-precomposed.png b/img/touch/apple-touch-icon-152x152-precomposed.png
diff --git a/img/touch/apple-touch-icon-180x180-precomposed.png b/img/touch/apple-touch-icon-180x180-precomposed.png
diff --git a/img/touch/apple-touch-icon-76x76-precomposed.png b/img/touch/apple-touch-icon-76x76-precomposed.png
diff --git a/img/touch/apple-touch-icon-precomposed.png b/img/touch/apple-touch-icon-precomposed.png
diff --git a/img/touch/touch-icon-128x128.png b/img/touch/touch-icon-128x128.png
diff --git a/img/touch/touch-icon-192x192.png b/img/touch/touch-icon-192x192.png
diff --git a/img/touch/touch-icon-196x196.png b/img/touch/touch-icon-196x196.png
diff --git a/img/touch/touch-icon-60x60.png b/img/touch/touch-icon-60x60.png
diff --git a/index.html b/index.html
@@ -9,13 +9,32 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta http-equiv="cleartype" content="on">
 
+        <!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
+        <link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">
+        <!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
+        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">
+        <!-- iPad (with @2× display) iOS ≤ 6 -->
         <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
+        <!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
+        <link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">
+        <!-- iPhone (with @2× display) iOS ≤ 6 -->
         <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
+        <!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
+        <link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">
+        <!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
         <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
+        <!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
         <link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
-        <link rel="shortcut icon" sizes="196x196" href="img/touch/touch-icon-196x196.png">
+        <!-- Fallback for everything else -->
         <link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
 
+        <!--
+            Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions).
+            If it’s not defined on that size it will take 128×128.
+        -->
+        <link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png">
+        <link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png">
+
         <!-- Tile icon for Win8 (144x144 + tile color) -->
         <meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
         <meta name="msapplication-TileColor" content="#222222">