Breaking News: Grepper is joining You.com. Read the official announcement!

Manifest doesn't have a maskable icon

CoderHomie answered on March 21, 2022 Popularity 8/10 Helpfulness 8/10

answer Manifest doesn't have a maskable icon

related Manifest doesn't have a maskable icon

Manifest doesn't have a maskable icon

Comment

/* 
	Lighthouse flags pages that do not have "maskable icon support".
    To get around this issue you'll need to update your manifest.json
    file with the additional lines (below). Note, this needs to be added
    to the icons: [] array.
*/
{
      "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"
}
/*
	Full example below of manifest.json below
*/
{
    "theme_color": "#333",
    "background_color": "#eee",
    "display": "standalone",
    "scope": "/path/to/project/directory/",
    "start_url": "/index.php",
    "name": "My Project",
    "short_name": "Project",
    "description": "Short description here",
    "icons": [
        {
            "src": "path/to/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "path/to/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "path/to/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "path/to/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        },
		{
	    	"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"
		}
    ]
}

Popularity 8/10 Helpfulness 8/10 Language javascript

Source: Grepper

Tags: javascript manifest

Link to this answer
Share Copy Link

Contributed on Aug 03 2022

CoderHomie

0 Answers Avg Quality 2/10

Closely Related Answers

Manifest doesn't have a maskable icon

Comment

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

Popularity 9/10 Helpfulness 5/10 Language whatever

Source: web.dev

Tags: whatever manifest manifes

Link to this answer
Share Copy Link

Contributed on Mar 21 2022

Joyous Jackal

0 Answers Avg Quality 2/10

Manifest doesn't have a maskable icon

Contents

More Related Answers

Manifest doesn't have a maskable icon

Closely Related Answers

Manifest doesn't have a maskable icon

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.