17

While running react app my console always shows this error message.

> "Error while trying to use the following icon from the Manifest:
> http://localhost:3000/favicon.ico (Resource size is not correct - typo
> in the Manifest?)"

Why this is showing?

Vega
  • 27,856
  • 27
  • 95
  • 103
Mohamed Sabith
  • 171
  • 1
  • 1
  • 7

9 Answers9

22

Change sizes in the manifest.json.

Try this:

"sizes": "16x16"
Shamshirsaz.Navid
  • 2,224
  • 3
  • 22
  • 36
Volkan Temel
  • 321
  • 2
  • 4
  • The solution is that the default size in manifest - 192x192 - is too big and needs a reduce? – Timo Apr 02 '23 at 10:49
11

Go to the index file and comment out <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

Ib Abayomi Alli
  • 361
  • 3
  • 6
8

In public > manifest.json change this:

"icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]

to this:

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

And do not throw away the favicon.ico file. This keeps a placeholder for a custom favicon, you may want to add later on.

totallytotallyamazing
  • 2,765
  • 1
  • 20
  • 26
7

I was having the same issue. If you open up your manifest.json located in the public folder of you'll notice a bunch of specifications for icons. If you deleted them when cleaning up your app or added one that does not fit the parameters within the manifest you will get the error you're getting. Edit the "src" within the manifest for your new favicon.ico, or delete the ones your not using and your problem should disappear.

Have a look here as well: What is public/manifest.json file in create-react-app?

Not An Alien
  • 85
  • 2
  • 7
3

The issue was with the icon I was no longer using still in manifest.json. Once that information was removed, I did not see any error anymore

MircheeMN
  • 31
  • 1
2

You have to check if value of sizes attribute in your manifest.json matches with the real image size in the icon file! If not you have to:

  • Resize your image file with an image editor
  • Or change the sizes value with the correct one. In this case I'm not sure there are standard values, I haven't found anything about them... but I will take care to put a squared size!
Eros Mazza
  • 304
  • 3
  • 7
2

Go to your index.html file and comment out the line

<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
Shakil- The Coding monster
  • 653
  • 8
  • 8
1

Try to change the "x" to "*"

Super Kai - Kazuya Ito
  • 22,221
  • 10
  • 124
  • 129
秋辞冬至
  • 11
  • 1
0

if you have this error 

Error while trying to use the following icon from the Manifest

You have just to verify the src attribute if it matches the right path to your png file.

Ayoub Zerouali
  • 3
  • 3