Reputation: 808

PWA "Manifest does not contain a suitable icon"

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

Upvotes: 32

Answers (4)

bilelz

Reputation: 297

As @pakut2 said https://stackoverflow.com/a/65618862/1977459, I use this and I no longer have a warning

"icons": [
    {
      "src": "assets/icons/favicon-16x16.png",
      "sizes": "16x16",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/icons/favicon-180x180-apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/icons/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "assets/icons/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]

Upvotes: 8

Ezekias BOKOVE

Reputation: 168

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

Upvotes: 5