CODEWITHSUNDEEP
androidweb-applicationsgoogle-chrome-extensionmanifestprogressive-web-apps
Kasper
Kasper

Reputation: 13622

How to specify icons in manifest.json?

How to specify the icons in manifest.json? It seems like some use an array and some use a dictionary. For example:

https://developer.chrome.com/webstore/get_started_simple

"icons": {
   "128": "icon_128.png"
},

But in this source, they use it like this:

https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android?hl=en

  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],

If I try to install my web app as a chrome extension, and I use the latter format, I get this error:

So I guess I need to use the first format, for that. However, if I try to install my app as a progressive web app in android, the later format seems required ...

Upvotes: 14

Views: 31752

Answers (1)

abraham
abraham

Reputation: 47893

The short answer is you need both. They are two different manifest files that are used for different purposes and live in different places.

For the Chrome Web Store you will create a manifest locally on your computer following the getting started tutorial. That manifest and the icon image will get added to a zip file and uploaded to the store.

"icons": {
  "128": "icon_128.png"
}

For installable web apps you have to create a manifest file, uploaded it to your website along with the images, and then update your HTML pages to link to the manifest on your website.

  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]

Upvotes: 16

Related Questions