Manifest doesn't have a maskable icon
Stay organized with collections
Save and categorize content based on your preferences.
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 don't 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.
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.Note: 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.
Add the purpose property to one of the icons objects in your web app manifest .
Set the value of purpose to maskable. See Values .
{
…
"icons ": [
…
{
"src ": "path / to / maskable_icon . png ",
"sizes ": "196 x196 ",
"type ": "image / png ",
"purpose ": "maskable "
}
]
…
}
Use Chrome DevTools to verify that the maskable icon is displaying correctly.
See Are my current icons ready?
Resources
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 . Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-04-16 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
{"lastModified": "Last updated 2024-04-16 UTC."}
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-04-16 UTC."],[],[]]
