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

score 35 · Answer 1 · answered Jan 29 '20 at 03:45

35

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

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

answered Jan 29 '20 at 03:45

Robbie Wadley

738
1
6
10

1

This is not working for me. Error message is the same as if there's no any "purpose' field. – fathergorry Oct 19 '20 at 13:04
I have set it to any. Still it is not working for me. – ajparag Nov 27 '20 at 14:05
I used "purpose":"maskable" but I had to add it to both the 192x192 and the 512x512 icons for lighthouse to be happy. – Vincent Oct 28 '22 at 21:21

score 5 · Answer 2 · answered Jan 13 '23 at 09:27

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"
    }
  ]

pakut2 · Answer 3 · 2021-01-07T22:13:50.263

4

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

edited Jan 07 '21 at 22:13

answered Jan 07 '21 at 19:37

pakut2

500
5
21

1

Can you provide a source? That is pretty specific and must be documented somewhere... – Zack Biernat Jan 22 '21 at 16:42
3

Adding the "purpose" : "maskable" property to 2 images worked for me. – Vegeta ZA Feb 04 '21 at 16:03

score 4 · Answer 4 · answered Jan 25 '21 at 21:15

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

I agree with you and I was surprised when the manifest DevTool said that the icon's `purpose` _must_ contain an `any`. But when you do, it also warns you about how it isn't an optimal solution. This is awkwardly self-contradicting. (Chrome `v99`) — Aniruddha, Mar 19 '22 at 12:46

PWA "Manifest does not contain a suitable icon"

4 Answers4