PWA Manifest Icons failing to fetch

Question

I am wondering what the path and issue is for this error from Lighthouse Audit:

Web app manifest does not meet the installability requirements Failures: Manifest icon failed to be fetched.

I have all of my images icons from 72x72 to 512x512 so I am wondering what the problem is?

in the public folder i have a folder: assets/icons/(all the icons)

This is the manifest.json

{
  "name": "Chronowell",
  "short_name": "Chronowell",
  "theme_color": "#000099",
  "background_color": "#000099",
  "display": "fullscreen",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

Oh you know what I think I see it now it looks like the array keyname got replaced during a word search and replace! — Michael Paccione, Jul 31 '20 at 19:33
Updating the question because it still gives a failed to fetch — Michael Paccione, Jul 31 '20 at 20:37
@MichaelPaccione I am facing the same issue. Were you able to fix it? — Ramesh Kanjinghat, Oct 06 '20 at 14:00
Ah yes I believe the one of the images was not actually the correct size as it was labeled... and it produced a generic error. — Michael Paccione, Jan 24 '21 at 04:54

score 1 · Answer 1 · answered Dec 27 '20 at 19:08

Make sure that the icons are accessible. You can find the URL that chrome is trying to access under "Application" tab under "manifest", they will be shown there if there is a problem.

One problem I had was that the icons and the manifest are requested without sending cookies. My server would return "Unauthorized" in that case.

The manifest can be adjusted to send cookies like this:

<link rel="manifest" href="/app/manifest.json" crossorigin="use-credentials">

For the icons I'm not sure if there is a option to send them with credentials. I resolved the issue by putting them in a publicly accessible folder and updating the manifest to contain absolute URL's.

score 0 · Answer 2 · answered May 23 '22 at 23:16

You are not able to fetch your icons because you're setting the URL in the wrong way. Your URL should be: "/assets/icons/icon-72x72.png" in this case. First of all, make sure you're passing the right URL, and test if your icons are accessible first. Hope this answer helps you.

PWA Manifest Icons failing to fetch

2 Answers2