Other notes:
- Not declaring the touch icon in the page and having it in the root of the site is not recommended, as Apple may change what is requested by default.
- In older versions of Safari for iOS, the
precomposedkeyword could be used to prevent iOS from adding different visual effects to the touch icon (i.e., rounded corners, drop shadow, reflective shine). Starting with iOS 7, no special effects are applied to touch icons, so there is no need to use theprecomposedkeyword anymore. - When using one image, there is no need to use the
sizesattribute. - As of
iOS 11.1.0, Safari for iOS supports the web app manifest file which provides a standard, cross-browser way of defining, among other, the icons browsers can use in various contexts (home screen, application menu, etc.). However, Safari ignores the icons defined in the web app manifest and still uses the non-standardapple-touch-icon.
What does the hint check?
The hint checks if one or more apple-touch-icon declarations exist in the <head>, and:
- each has
rel="apple-touch-icon" - each declared image is accessible (e.g., doesn’t result in a
404), - each declared image is a
PNGof one of the resolutions specified above
Examples that trigger the hint
No apple-touch-icon was specified:
