Permalink
Browse files

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/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.pnghttp://www.ravelrumba.com/blog/android-apple-touch-icon/

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

Close h5bp/html5-boilerplate#1622
  • Loading branch information...
1 parent d7976c3 commit 345925f04384b59929d8d39ba428cef548921408 @alrra alrra committed Oct 21, 2014
View
@@ -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)).
View
@@ -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).
View
@@ -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
View
@@ -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">
View
@@ -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).
View
@@ -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
View
@@ -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">
View
@@ -18,7 +18,7 @@ var expectedFilesInDistDir = [
'.gitignore',
'.htaccess',
'404.html',
- 'apple-touch-icon-precomposed.png',
+ 'apple-touch-icon.png',
'browserconfig.xml',
'crossdomain.xml',

0 comments on commit 345925f

Please sign in to comment.