QA finding
No web app manifest or touch icon for saving the site to a phone's home screen
QA Info Severity: Low
Part of the audit Usability rules. Finding id: qa.homeScreenIcons.
What it costs you
A visitor who saves the site to the home screen of a phone gets a screenshot or a letter instead of your logo, and the shortcut looks broken next to the other apps.
What to do
Link a web app manifest with icons of 192 and 512 pixels, and an apple-touch-icon of 180 pixels, from the head of every page.
What it checks
- Home screen icon or app file missing
How to fix it
Link a manifest and a touch icon
- Create /site.webmanifest as JSON with name, short_name and an icons list holding a 192x192 and a 512x512 PNG.
- Create /apple-touch-icon.png at 180 by 180 pixels.
- Add the two link elements above to the head of every page.
How to check: Open the home page on a phone and add it to the home screen: the shortcut shows your icon.
Thresholds
| Name | Default | Meaning |
|---|---|---|
min_icon_px | 192 | The largest icon in the manifest must be at least this many pixels square. A starting value, from the 192 and 512 pixel icons the full-stack-audit checklist asks for. |