Web app manifest with SVG icon

[Stephen Eisenhauer]

I've attempted to use an SVG icon in my web app manifest (which the spec seems to condone: https://www.w3.org/TR/appmanifest/#icons-member) and currently experience inconsistent behavior from Chrome. Here is an example of my current "icons" section:

"icons": [
  {
    "src": "img/icon-144.png",
    "sizes": "144x144",
    "type": "image/png"
  },
  {
    "src": "img/icon.svg",
    "sizes": "48x48 72x72 96x96 128x128 256x256"
  }
]

Originally, I had tried to only declare the SVG alone:

"icons": [
  {
    "src": "img/icon.svg",
    "sizes": "any"
  }
]

In either case, the results are strange. Chrome on my Nexus 5 uses the icon, Chrome on my Nexus 7 does not. When I choose "Add to desktop..." in Chrome on my Linux PC, it uses the completely different icon from my apple-touch-icon HTML link tag in the dialog that pops up and in the desktop launcher, but uses the correct icon from the manifest in the chrome://apps/ page.

Can anyone elaborate on how this is supposed to work?

[Dominick]

It's expected that the behaviour differs from device to device. On mobile, Chrome tries to pick the icon that is exactly the size it wants, with respect to the density of the device it's running on. Failing that, it'll take a bigger icon than the minimum required; failing that, it'll take an icon of size "any".

On desktop, Chrome grabs the manifest as well as all of the favicons (including the touch icons), since many desktop-only sites don't include a manifest. Similarly, Chrome tries to pick the closest to correctly-sized icon to show in the bubble, as well as in the desktop shortcut (these are different sizes). On desktop, it will fall back to upscaling an icon that's too small if it has to (since again, many desktop only sites don't have manifests, or only have tiny favicons). However, in general, Chrome tries to avoid resizing, and choosing an icon provided by the developer in the size that it's looking for. So it's entirely possible that you see a different icon on all of your different devices, and in the different locations.