diff --git a/CHANGELOG.md b/CHANGELOG.md index 747e863c64..59136d97cc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ ### HEAD +* Rename Apple touch icon to `apple-touch-icon.png` and add + `` 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)). diff --git a/dist/apple-touch-icon-precomposed.png b/dist/apple-touch-icon.png similarity index 100% rename from dist/apple-touch-icon-precomposed.png rename to dist/apple-touch-icon.png diff --git a/dist/doc/extend.md b/dist/doc/extend.md index ad19eef0a8..b5feab5918 100644 --- a/dist/doc/extend.md +++ b/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 - -``` - -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 + +``` -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 `` 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/dist/doc/usage.md b/dist/doc/usage.md index ed37597cb3..7a875aac91 100644 --- a/dist/doc/usage.md +++ b/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 diff --git a/dist/index.html b/dist/index.html index 57e2b8c119..d67fba57bd 100644 --- a/dist/index.html +++ b/dist/index.html @@ -7,7 +7,8 @@ - + + diff --git a/src/apple-touch-icon-precomposed.png b/src/apple-touch-icon.png similarity index 100% rename from src/apple-touch-icon-precomposed.png rename to src/apple-touch-icon.png diff --git a/src/doc/extend.md b/src/doc/extend.md index ad19eef0a8..b5feab5918 100644 --- a/src/doc/extend.md +++ b/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 - -``` - -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 + +``` -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 `` 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/src/doc/usage.md b/src/doc/usage.md index ed37597cb3..7a875aac91 100644 --- a/src/doc/usage.md +++ b/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 diff --git a/src/index.html b/src/index.html index 2b472d5672..2fe5088029 100644 --- a/src/index.html +++ b/src/index.html @@ -7,7 +7,8 @@ - + + diff --git a/test/tests.js b/test/tests.js index f328af2cd3..992bde25a8 100644 --- a/test/tests.js +++ b/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',