Maskable Icon

Why manifest should have a maskable icon

PWA

Why manifest should have a maskable icon

In order for your PWA icon to look optimised on Android devices, you should use the maskable icons format: these ensure that the image fills all available space and does not just leave a white background.

 

How the SeoChecker maskable icon audit is displayed

If a page has no maskable icon support, SeoChecker will notify it:

maskable icon

How can I add maskable icons?

If you want to pass the audit, you should set up a web app manifest that needs to have an icons array: this last one should contain one object with a purpose property that includes the value maskable or any maskable.

{
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
  …
}

Share this Guide

Did you like it? Share it!

Share it!

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

Home Back to top of the page