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 a purpose property, and the value of that purpose property must include maskable.

How to add maskable icon support to your PWA #

1. Use Maskable.app Editor to convert an existing icon to a maskable icon.

2. Add the maskable icon in different sizes to the icons array in your web app manifest. Set the value of purpose to maskable. See Values.

   {
     …
     "icons": [
       …
       {
         "src": "path/to/maskable_icon_192.png",
         "sizes": "192x192",
         "type": "image/png",
         "purpose": "maskable"
       },
       {
         "src": "path/to/maskable_icon_512.png",
         "sizes": "512x512",
         "type": "image/png",
         "purpose": "maskable"
       }
     ]
     …
   }

3. 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