diff --git a/CHANGELOG.md b/CHANGELOG.md index 63e6d61ff1..49e575d4b6 100644 --- a/CHANGELOG.md +++ b/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)). diff --git a/apple-touch-icon-114x114-precomposed.png b/apple-touch-icon-114x114-precomposed.png deleted file mode 100644 index 1a7d0a542d..0000000000 Binary files a/apple-touch-icon-114x114-precomposed.png and /dev/null differ diff --git a/apple-touch-icon-144x144-precomposed.png b/apple-touch-icon-144x144-precomposed.png deleted file mode 100644 index 6c0ab269ee..0000000000 Binary files a/apple-touch-icon-144x144-precomposed.png and /dev/null differ diff --git a/apple-touch-icon-57x57-precomposed.png b/apple-touch-icon-57x57-precomposed.png deleted file mode 100644 index d155af6bf4..0000000000 Binary files a/apple-touch-icon-57x57-precomposed.png and /dev/null differ diff --git a/apple-touch-icon-72x72-precomposed.png b/apple-touch-icon-72x72-precomposed.png deleted file mode 100644 index 10e2a49e48..0000000000 Binary files a/apple-touch-icon-72x72-precomposed.png and /dev/null differ diff --git a/apple-touch-icon-precomposed.png b/apple-touch-icon-precomposed.png index d155af6bf4..1ea85edc6f 100644 Binary files a/apple-touch-icon-precomposed.png and b/apple-touch-icon-precomposed.png differ diff --git a/apple-touch-icon.png b/apple-touch-icon.png deleted file mode 100644 index d155af6bf4..0000000000 Binary files a/apple-touch-icon.png and /dev/null differ diff --git a/doc/extend.md b/doc/extend.md index 572f166547..87ba790fae 100644 --- a/doc/extend.md +++ b/doc/extend.md @@ -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 + +``` + +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 diff --git a/doc/html.md b/doc/html.md index 1ac39b4eed..b7fbbd6031 100644 --- a/doc/html.md +++ b/doc/html.md @@ -91,19 +91,14 @@ a simple setup that strikes a good balance for general use cases. ``` -## 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 diff --git a/doc/usage.md b/doc/usage.md index 29ea6ce77f..df54996b0f 100644 --- a/doc/usage.md +++ b/doc/usage.md @@ -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/).