@hint/hint-apple-touch-icons
Advanced tools
apple-touch-icons)apple-touch-icons requires that a single 180×180px PNG
apple-touch-icon is used.
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 Touch72×72px – iPad and iPad mini with @1x display running iOS ≤ 676×76px – iPad and iPad mini with @1x display running iOS ≥ 7114×114px – iPhone with @2x display running iOS ≤ 6120×120px – iPhone with @2x and @3x display running iOS ≥ 7144×144px – iPad and iPad mini with @2x display running iOS ≤ 6152×152px – iPad and iPad mini with @2x display running iOS 7180×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:
It will increase the size of the pages with very little to no real benefit (most users will probably not add the site to their home screens).
Most sizes will probably never be used as iOS devices get upgraded quickly, so most iOS users will be on the latest 2 versions of iOS and using newer devices.
The 180×180px image, if needed, will be automatically downscaled
by Safari, and the result of the scaling is generally ok.
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:
Not declaring the touch icon in the page and having it in the root of the site is not recommended as Apple usually changes what is requested by default.
In older versions of Safari for iOS, the precomposed keyword 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 the precomposed
keyword anymore.
Safari for iOS < 4.2 ignored the sizes attribute, so the order
in which the icons were declared mattered. When using
one image there is no need to use the sizes attribute.
The hint checks if a single apple-touch-icon declaration exists in
the <head>, and:
rel="apple-touch-icon"404),
a PNG, and its size is 180×180pxsizes attributeNo 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, ...
<!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>
This package is installed automatically by webhint:
npm install hint --save-dev
To use it, activate it via the .hintrc configuration file:
{
"connector": {...},
"formatters": [...],
"hints": {
"apple-touch-icons": "error",
...
},
"parsers": [...],
...
}
Note: The recommended way of running webhint is as a devDependency of
your project.
FAQs
hint for best practices related to the apple-touch-icons
The npm package @hint/hint-apple-touch-icons receives a total of 18,678 weekly downloads. As such, @hint/hint-apple-touch-icons popularity was classified as popular.
We found that @hint/hint-apple-touch-icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.