Manifest doesn't have a maskable icon
Maskable icons is a new icon format that ensures that your PWA icon looks great on all Android devices. On newer Android devices, PWA icons that don't follow the maskable icon format are given a white background. When you use a maskable icon, it ensures that the icon takes up all of the space that Android provides for it.
How the Lighthouse maskable icon audit fails #
Lighthouse flags pages that do not have maskable icon support:
In order to pass the audit:
- A web app manifest must exist.
- The web app manifest must have an
icons
array. - The
icons
array must contain one object with apurpose
property, and the value of thatpurpose
property must includemaskable
.
How to add maskable icon support to your PWA #
Use Maskable.app Editor to convert an existing icon to a maskable icon.
Add the
purpose
property to one of theicons
objects in your web app manifest. Set the value ofpurpose
tomaskable
orany maskable
. See Values.{
…
"icons": [
…
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any maskable"
}
]
…
}Use Chrome DevTools to verify that the maskable icon is displaying correctly. See Are my current icons ready?
Resources #
- Source code for Manifest doesn't have a maskable icon audit
- Adaptive icon support in PWAs with maskable icons
- Maskable.app Editor
- Add a web app manifest
- The
icons
property on MDN
Last updated: — Improve article