CODEWITHSUNDEEP
google-chromeweb-applicationsmanifestprogressive-web-apps
jasan
jasan

Reputation: 12957

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

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
}

Upvotes: 25

Views: 46357

Answers (9)

ubi sage
ubi sage

Reputation: 93

This happened because u changed the picture: So u need to update the old name of that picture in manifest json with the new one Example In manifest json my image source was logo192.png ,size 192*192 i downloaded an image named android.png of same size so I replaced the name of source-SRC from logo192.png to android.png. IT WORKED

Upvotes: 0

Peppers
Peppers

Reputation: 396

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

Upvotes: 0

Archana Pradhan
Archana Pradhan

Reputation: 21

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.

Upvotes: 2

Morten_564834
Morten_564834

Reputation: 1667

  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.

Upvotes: 0

Ahmed Boutaraa
Ahmed Boutaraa

Reputation: 2178

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

Upvotes: 0

H4NS3L
H4NS3L

Reputation: 11

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

Upvotes: 1

Sunil Pandey
Sunil Pandey

Reputation: 1

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.

Upvotes: 0

Razi Kallayi
Razi Kallayi

Reputation: 900

icons/icon-144x144.png image should have width 144px and height 144px

You can check your manifest in your application tab in chrome inspect

https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps#add-to-homescreen

Upvotes: 13

Matt Gaunt
Matt Gaunt

Reputation: 9831

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

Upvotes: 3

Related Questions