Whether all icon sizes can be used when using SVG in PWA manifest

Question

I am using a SVG file for application Icon. I have my below code in manifest, but I am seeing that sometimes icon is not properly coming in desktop/some mobile models and also not in Web push Notifications. So, How can i determine the size for which my SVG file will fit. Below is manifest content for icon

"icons": [
    {
    "src": "/images/icons/iotradio.svg",
    "sizes": "36x36 48x48 72x72 96x96 120x120 128x128 144x144 152x152 180x180 192x192 384x384 512x512"
    }
]

Answer 1

Better specify the type:

"type": "image/svg+xml",

Your size list is fine, but if you want a more complete list:

36x36 48x48 57x57 60x60 72x72 76x76 96x96 114x114 120x120 128x128 144x144 152x152 180x180 192x192 256x256 384x384 512x512

Common practice (for the best compatibility) is to generate a lot of PNGs of different sizes and list them until 512x512, before an SVG entry at the end which is 513x513.

...(from 36-icon.png to 384-icon.png)...
{
  "src": "512-icon.png",
  "sizes": "512x512",
  "type": "image/png"
},
{
  "src": "icon.svg",
  "sizes": "513x513",
  "type": "image/svg+xml"
}

But we are in 2021 now, an SVG-only manifest should be OK for most latest platforms I guess. People should probably throw those that do not support SVG icon in the bin.

Btw, Google's PWACompat library is really nice. The following code, without any <link rel="[??-icon or -image]"... or <meta name="[web-app / theme / msapplication-related stuff]"..., is the best practice as of 2021 (although it does not solve the potential problem that some legacy browsers do not support SVG icon):

<link rel="manifest" href="manifest.webmanifest" />
<script async src="https://cdn.jsdelivr.net/npm/pwacompat" crossorigin="anonymous"></script>
<!-- for legacy browsers: -->
<link rel="icon" type="image/png" href="res/icon-128.png" sizes="128x128" />