This site uses cookies for analytics. By continuing to browse this site, you agree to this use.
A JS Foundation Project

Require an apple touch icon

Require an apple touch icon (apple-touch-icons)

apple-touch-icons requires that a single 180×180px PNG apple-touch-icon is used.

Why is this important?

Since iOS 1.1.3, Safari for iOS has supported a way for developers to specify an image that will be used to represent the web site/app on the home screen. The image is known as the touch icon.

Note: 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-standard apple-touch-icon.

Over time as Apple released different size displays for their devices, the requirements for the size of the touch icon have changed quite a bit:

  • 57×57px – iPhone with @1x display and iPod Touch
  • 72×72px – iPad and iPad mini with @1x display running iOS ≤ 6
  • 76×76px – iPad and iPad mini with @1x display running iOS ≥ 7
  • 114×114px – iPhone with @2x display running iOS ≤ 6
  • 120×120px – iPhone with @2x and @3x display running iOS ≥ 7
  • 144×144px – iPad and iPad mini with @2x display running iOS ≤ 6
  • 152×152px – iPad and iPad mini with @2x display running iOS 7
  • 180×180px – iPad and iPad mini with @2x display running iOS 8+

Declaring one 180×180px PNG image, e.g.:

<link rel="apple-touch-icon" href="apple-touch-icon.png">

in the <head> of the page is enough, and including all the different sizes is not recommended as:

The only downside to using one icon is that some users will load a larger image, while a much smaller file would have worked just as well. But the chance of that happening decreases with every day as users upgrade their devices and their iOS version.

Other notes:

What does the hint check?

The hint checks if a single apple-touch-icon declaration exists in the <head>, and:

  • it has rel="apple-touch-icon"
  • the declared image is accessible (e.g.: doesn’t result in a 404), a PNG, and its size is 180×180px
  • it does not include the sizes attribute

Examples that trigger the hint

No apple-touch-icon was specified:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
...

</head>
<body>...</body>
</html>

The apple-touch-icon is not specified in <head>:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
...

</head>
<body>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
...
</body>
</html>

The apple-touch-icon has a rel attribute different than apple-touch-icon:

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-precomposed.png">

The apple-touch-icon has a sizes attribute:

<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

Multiple apple-touch-icons are specified:

<link rel="apple-touch-icon" sizes="57x57" href="/static/images/touch-icons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/static/images/touch-icons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/static/images/touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/static/images/touch-icons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/static/images/touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/static/images/touch-icons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/static/images/touch-icons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/static/images/touch-icons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/static/images/touch-icons/apple-touch-icon-180x180.png">

The apple-touch-icon is not accessible:

<link rel="apple-touch-icon" href="apple-touch-icon.png">

Response for apple-touch-icon.png:


HTTP/... 404 Not Found
...

HTTP/... 500 Internal Server Error
...

The apple-touch-icon is not a PNG file:

<link rel="apple-touch-icon" href="apple-touch-icon.png">
$ file apple-touch-icon.png

apple-touch-icon.png: JPEG image data, ...

The apple-touch-icon is not 180x180px:

<link rel="apple-touch-icon" href="apple-touch-icon.png">
$ file apple-touch-icon.png

apple-touch-icon.png: PNG image data, 180 x 180, ...

Examples that pass the hint

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
...
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
...

</head>
<body>...</body>
</html>

How to use this hint?

To use it you will have to install it via npm:

npm install @hint/hint-apple-touch-icons

Note: You can make npm install it as a devDependency using the --save-dev parameter, or to install it globally, you can use the -g parameter. For other options see npm's documentation.

And then activate it via the .hintrc configuration file:

{
"connector": {...},
"formatters": [...],
"hints": {
"apple-touch-icons": "error",
...
},
"parsers": [...],
...
}

Further Reading