Skip to content
Learn Measure Blog Case studies About
On this page
  • How the Lighthouse maskable icon audit fails
  • How to add maskable icon support to your PWA
  • Resources

Manifest doesn't have a maskable icon

May 6, 2020
Available in: Español, 日本語, 한국어, Português, Русский, 中文, English
On this page
  • How the Lighthouse maskable icon audit fails
  • How to add maskable icon support to your PWA
  • Resources

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:

The maskable icon audit in the Lighthouse Report UI.

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.

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 #

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

  2. Add the purpose property to one of the icons objects in your web app manifest. Set the value of purpose to maskable or any maskable. See Values.

    {
    …
    "icons": [
    …
    {
    "src": "path/to/maskable_icon.png",
    "sizes": "196x196",
    "type": "image/png",
    "purpose": "any 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
Last updated: May 6, 2020 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.