Quick Tip: Force web manifest to use your tiny svg instead of larger 192x192px png

[Chris Bennett]

2021 update
These things change and get tweaked over time, as stuff always does.

We can make the size declaration a little more relevant.

Declare a selection of sizes for your svg to "encourage" chromium-based browsers to use it instead of the larger bitmapped 192x192 and other assorted icons.
We also need to thread the needle to ensure app start icons don't get confused and end up with an icon that is smaller than desired.

1. Declare it last, after your png fallbacks - last one that is suitable size *must* get the nod.
2. Counter-intuitively, declare that your svg is 150x150.   (adjusted for 2021)

? "sizes": "48x48 72x72 96x96 128x128 150x150 256x256 512x512 1024x1024",

{
    "name": "Alfresco bar + bistro, Eumundi",
    "short_name": "Alfresco",
    "description": "Relaxed outdoor dining on our spacious deck in Eumundi",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#acbd72",
    "theme_color": "#acbd72",
    "icons": [
	
        {
            "src": "https://www.alfresco-bar-bistro.com.au/site/assets/files/favicons/favicon-48x48.png",
            "sizes": "48x48",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "https://www.alfresco-bar-bistro.com.au/site/assets/files/favicons/favicon-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "https://www.alfresco-bar-bistro.com.au/site/assets/files/favicons/favicon-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "https://www.alfresco-bar-bistro.com.au/site/assets/files/favicons/maskable-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        }, 
        {
            "src": "https://www.alfresco-bar-bistro.com.au/site/assets/files/favicons/favicon.svg",
            "sizes": "48x48 72x72 96x96 128x128 150x150 256x256 512x512 1024x1024",
            "type": "image/svg+xml",
            "purpose": "any"
        }
		
    ]
}

Cross-Origin-Resource-Policy (CORP) manifest/icon bug
A slightly-related testing note, if you are incorporating Cross-Origin-Resource-Policy (CORP) to enhance site security.

Please note there is a chromium bug which affects chromium dev tools ability to properly display your manifest icons:
Chromium DevTools bug: Cross-Origin-Resource-Policy prevents manifest icons from loading

This long-term bug doesn't seem to affect the way the manifest itself works or the icons, just their display in Dev tools > Application > Manifest in  Chrome, Edge, Brave, Opera... sheesh.
Firefox Dev tools continues to happily display them without a problem.

------------------------------------------------------------------------------------

Quick tip for 2020 web manifests, which I couldn't find anywhere else.

Wanted web manifest on Chrome/Edge to download the tiny favicon svg, instead of the larger 192x192 png it wanted to by default.
Not a big deal, but mildly annoying: 15kb (non-scalable) png vs 1.5kb (infinitely scalable) svg.
After a little head-scratching and fiddling around, came up with a solution that seems to do the trick.

1. Declare it last, after your png fallbacks - last one that is suitable size *must* get the nod.
2. Counter-intuitively, declare that your svg is 150x150.   (adjusted for 2021)

Mine isn't. Never has been, it's a scalable vector graphic.
Simply declaring it is 150x150 in the manifest is enough to get the job done.

Suspect the Chrome/Edge engine declares that any non-specified svgs are given that 150x150 size and anything else returns as a "fail".
Without declaring a size on it, or declaring it as anything other than 150x150, it just wouldn't load. 

Weird, but works, so I'm happy ?
 

{
    "name": "Longer App/Business Name",
    "short_name": "Short Name",
    "description": "Description of App/Business",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#880000",
    "theme_color": "#880000",
    "icons": [

        {
            "src": "favicon-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "favicon-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "maskable-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        },
		{
            "src": "favicon.svg",
            "sizes": "150x150",
            "type": "image/svg+xml",
            "purpose": "any"
        }
    ]
}

 

[Chris Bennett]

Slight adjustments to enhance use for 2021 and to remind me how I can make it work when I forget and need to use Google as my offline memory