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 }
A web application manifest, as defined in the Web Application Manifest specification, provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users ...
Using manifest. json , you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension's functionality (such as background scripts, content scripts, and browser actions).
The start_url member is a string that represents the start URL of the web application — the preferred URL that should be loaded when the user launches the web application (e.g., when the user taps on the web application's icon from a device's application menu or homescreen).
The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience.
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
Is the icon actually 144px by 144px? That's what the error suggests to me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With