simply replacing icons for progressive web app leads to error in manifest

22
votes

I had generated a manifest file with icons, later i decided to just change the icons folder with different icons(by copying & paste and overriding) when i did that I get the following error in chrome devtools as i click add to home screen in the application tab:

Error while trying to use the following icon from the Manifest: https://x.firebaseapp.com/icons/icon-144x144.png (Resource size is not correct - typo in the Manifest?) x.firebaseapp.com/:1 App banner not shown: no icon available to display

However, on chrome mobile the icon is updated(confirmed using add to homescreen)

{
  "name": "Duckr",
  "short_name": "Duckr",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "orientation": "portrait",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}
8
google-chromeweb-applicationsmanifestprogressive-web-apps

8 Answers

3
votes

Is the icon actually 144px by 144px? That's what the error suggests to me.

2
votes

Error-"Error while trying to use the following icon from the Manifest:" When I modifed the manifest.json with following change , it worked for me .

"icons": [
{
  "src": "favicon.ico",
  "sizes": "64x64 32x32 24x24 16x16",
  "type": "image/x-icon"
}

This might help someone who is facing a similar issue.

1
votes

I do not see any response that resolves your comment, and I was also playing with the Manifest of my PWA and got this problem in my response headers of the element inspector.

GET http://localhost/android-icon-144x144.png 404 (Not Found) (index):1 Error while trying to use the following icon from the Manifest: http://localhost/android-icon-144x144.png (Download error or resource isn't a valid image)

And it's just that you need to point your image where your favicon is and change in ** manifest.json ** the key:

"icons": [
    {
      "src": "/favicon/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
]

And in your application place the following path.

<link rel="icons" type="image/png" sizes="144x144"  href="/favicon/android-icon-144x144.png">

If you do with a favicon generator you will get the different rel like this:

<link rel="icon" type="image/png" sizes="144x144"  href="/favicon/android-icon-144x144.png">
0
votes

Don't know if it's a good solution or not but commenting following lines worked for me :

 {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },

As, I checked into images folder image of mentioned size were not present either avail image of that size or comment that size in manifest.

0
votes

if you don't want to see this error go to your public folder and then to your index.html and delete this links if you have accidentally removed the icon image logo192.png or this link manifest.json or try changing the sizes in your manifest.json file

0
votes

  1. Image size needs to fit size written in manifest.json

  2. If you know the size is right, try renaming both the icon file and the icon name inside manifest.json to something else. There's some "black magic" caching going on (and CTRL-F5 won't work). This way you force it to think it's changed.

0
votes

I have just met this error when I change my --script-version 1.1.5 to 1.0.13. I resolve it by changing my manifest.json like:

"icons": [
  {
     "src": "favicon.ico",
     "sizes": "64x64 32x32 24x24 16x16",
     "type": "image/x-icon"
  }
]