Progressive Web App "Manifest does not contain a suitable icon"

Question

I am building a dynamic progressive web app. Due to this the Icons have to be able to change. For this I have a public S3 bucket that I am pointing to in the manifest.json file.

Here is what that looks like:

{
"name": "Tenant 3",
"short_name": "Tenant 3",
"description": "Tenant 3",
"manifest_version": "0.11",
"icons": [{
        "src": "https://s3.amazonaws.com/myBucket/smallIcon",
        "sizes": "192x192"
    }, {
        "src": "https://s3.amazonaws.com/myBucket/largeIcon",
        "sizes": "512x512"
    }
],
"display": "standalone",
"start_url": "http://localhost:60003/",
"scope": "http://localhost:60003/"
}

However, when it loads I get the error:

Manifest does not contain a suitable icon - PNG format of at least 144px is required, the sizes attribute must be set, and the purpose attribute, if set, must include "any"

Both of my icons are PNG and are the exact sizes I have set in the manifest when I go to my S3 URL and download the images the are PNG and the correct dimensions. Also it looks like they are loading fine, here is a screenshot of the DevTools window.

Is there an issue with using a URL as the src and not a file directly? If so are they any alternatives to point to a image that is not in my code directory and hosted remotely?

Macneil

Adding "type" : "image/png" fixed the issue. – Macneil

Answer 1

This is a relatively old question. In a few words, your manifest.js file does not have a declaration for the default icon size of 144x144 in PNG, SVG, or WebP format. Also, remember the new purpose attribute.

The current warning message would be:

"Not supplied icon is at least 144px square in PNG, SVG or WebP format.".

Therefore you might want to have the following declaration for a PNG example:

{
    "src": "/relative-path-to-icon-file-with-dimensions-144x144.png",
    "sizes": "144x144",
    "type": "image/png",
    "purpose": "any"
}

for SVG or WebP change the type to "image/svg" or "image/webp"

Trochilus

Answer 2

Icon must be place in public directory. And give that path in package.json for generating assets.

Materfamilias

would that solve the initial OP's problem? – Orian