icon downloaded from the manifest was empty or corrupted

Question

So I'm setting up a manifest file for my web app, and need a valid icon for it to work. Following the MDN structure, I have provided multiple icons for my application. Here is my manifest so far:

{
  "name": "Tradesolution EPD",
  "short_name": "EPD portal",
  "theme_color": "#007AB5",
  "display": "standalone",
  "start_url": "http://localhost:1384/#/",
  "icons": [
    {
      "src": "content/images/favicon.ico",
      "sizes": "144x144"
    },
    {
      "src": "content/images/favicon.ico",
      "sizes": "16x16"
    },
    {
      "src": "content/images/ts-logo.svg",
      "sizes": "72x72"
    },
    {
      "src": "content/images/ts-logo.svg",
      "sizes": "512x512"
    }
  ],
  "background_color": "#007AB5", 
  "orientation": "portrait" 
}

I get the following error in the console trying to add the manifest:

Site cannot be installed: 
icon downloaded from the manifest was empty or corrupted

Here is my manifest overview from the devtools.

My manifest.json file is also valid according to the W3C standard manifest validator

UPDATE: So i updated my manifest with a new image with the following parameters:

{
  "src": "content/images/pakningssammensetninger/new-B_diagram.png",
  "sizes": "192x192",
  "type": "image/png"
}

I get the same error message in the console:

Site cannot be installed: icon downloaded from the manifest was empty or corrupted

Answer 1

It looks like the path for the images cannot be resolved correctly by the browser.

Be aware that when you use relative paths, like in your example content/images/ts-logo.svg, that the path is relative to the manifest.

If src is a relative URL, the base URL will be the URL of the manifest.

source: https://developer.mozilla.org/en-US/docs/Web/Manifest/icons

So if your manifest is served at for example /content/site.webmanifest, than the icon is expected to be served from /content/content/images/ts-logo.svg.

So either correct the path, or make it absolute like so: /content/images/ts-logo.svg (note the slash in the beginning).

Answer 2

You may refer with this thread. Based from this documentation, when placing the src path of the icon, it must refer to the root directory. You should change the path by removing / at the beginning and compile it again.

Change "src": "/android-chrome-192x192.png", to "src": "android-chrome-192x192.png", (without / at the beginning).

Hope this helps!

Answer 3

To install a PWA in Chrome it must fit a set of criteria. One of those is that the primary icon be in PNG format.

• a 192x192 png icon (the icon declarations must include a mime type of image/png)