HTML and CSS Reference
HTML5 Boilerplate comes with a set of icons in the root folder that are of the right
sizes for all the required icons for both touch screen icons (used by both Android and
iOS devices) and favicons. You can use them as a guide when you are working on
HTML5 Boilerplate comes with the following set of icons:
• favicon.ico : The default icon used by desktop browsers to render the
icons on tabs or next to the title.
• apple-touch-icon.png : If nothing else is specified, iOS will use this icon
to render on the home screen. Unfortunately, this also means iOS will
add its own effects such as drop-shadow, rounded corners, and reflective
shine on top of this icon. This is also a good fallback icon format if nothing
else is supported, for example, iOS 1 and BlackBerry OS 6.
• apple-touch-icon-precomposed.png : This prevents iOS from applying
any kind of effects on top of your icon and have it be presented as it is.
Providing this icon will also ensure that Android 2.1 and above devices
will use this as the icon when your web page is added to the home
• apple-touch-icon-57x57-precomposed.png : This will be used by iOS
devices that do not have Retina display.
• apple-touch-icon-72x72-precomposed.png : This will be used by iPad,
which does not have a high-resolution display.