PWA "Manifest does not contain a suitable icon"

Question

I'm building a progressive web app. Chrome says it has icon problems: "Manifest does not include a suitable icon" and "No supplied icon is at least 144px square".

I have icons and they do work on my phone (so it's installable on android, at least).

I have several different icon sizes, including up to 512px. I have tried pre-caching the icons, but that didn't seem to help.

Here's an excerpt from my manifest:

{
  "src": "images/icons/icon-96x96.png",
  "sizes": "144x144",
  "type": "image/png",
  "purpose": "maskable"
},

screenshot of error

Answer 1

"purpose" should be "any" or "maskable any"

just "maskable" will not be detected like a regular icon

Answer 2

I had the same problem and I solved the problem with "any" for the 144px image.

While you can specify multiple space-separated purposes like "any maskable", in practice you shouldn't. Using "maskable" icons as "any" icons is suboptimal as the icon is going to be used as-is, resulting in excess padding and making the core icon content smaller. Ideally, icons for the "any" purpose should have transparent regions and no extra padding, like your site's favicons, since the browser isn't going to add that for them.

For more information web.dev

Answer 3

You need to include at least 2 images, one must be 192x192 and another 512x512