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 a 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
iconsarray must contain one object with a
purposeproperty, and the value of that
purposeproperty must include
Caution: Lighthouse does not inspect the image that's specified as the maskable icon. You'll need to manually verify that the image displays well.
Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.
How to add maskable icon support to your PWA
Use Maskable.app Editor to convert an existing icon to a maskable icon.
"purpose": "any maskable"
Use Chrome DevTools to verify that the maskable icon is displaying correctly. See Are my current icons ready?
- 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
iconsproperty on MDN