Re: [EXTERNAL] Webmanifest Icons

SVG support is currently available for favicons and we have a backlog item to support them in the manifest as well (for Chromium at least).

Cheers,

Aaron


[xdgAEWGQCRxObR8AAAAAElFTkSuQmCC]
Aaron Gustafson (he/him/his)
PWAs + Accessibility + Web Standards
@AaronGustafson<https://twitter.com/aarongustafson>


Book a time with me!<https://book.ms/aarongu@microsoft.com>


From: Glen Peterson <glen.k.peterson@gmail.com>
Date: Saturday, October 31, 2020 at 9:11 AM
To: public-webapps@w3.org <public-webapps@w3.org>
Subject: [EXTERNAL] Webmanifest Icons
Thank you for all your work on Progressive Web Application Specifications!

I've noticed that both Google and Microsoft are expecting PWA's to provide PNG images (icons) for the client browser or OS to resize.  But PNG is a raster format, and resizing causes aliasing (jagged edges) and blurriness.  For the site I'm currently working on, a single 1.6K SVG would suffice, but I have to provide over 30K of PNG icons.

If you look at the history of the apple-touch-icon, they keep specifying larger and larger PNG sizes.  It seems like a resizable SVG would be more future-proof.

It would be nice to have something in the spec say that a single SVG can be specified as a resizable icon, or the primary icon, with optional PNG files for specific sizes for people who want to get complicated.  I think all relevant browsers and operating systems support SVG already.

I don't want to force anyone to use SVG or PNG.  Just that if I provide a resizable SVG, I shouldn't then have to provide a dozen sizes of PNG files too.  Maybe something that says client browsers and OS's should prefer SVG files to PNGs for resizing, and PNGs for specific sizes.

Microsoft requires at least one 512x512 PNG icon which it will resize:
https://github.com/pwa-builder/pwabuilder-windows-chromium-docs/blob/master/image-recommendations.md<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fpwa-builder%2Fpwabuilder-windows-chromium-docs%2Fblob%2Fmaster%2Fimage-recommendations.md&data=04%7C01%7Caarongu%40microsoft.com%7C2440ba3df8464ad4d91b08d87db79867%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637397574803512471%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=XshWJ4fqSUde88E5XJ9f8Ry1ODe8oRfa5g77%2F196mkI%3D&reserved=0>
Note the large number of sizes at the higher levels.

Google requires a 512x512 and/or (not sure) 192x192 which it will *resize*:
https://web.dev/add-manifest/#icons<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fweb.dev%2Fadd-manifest%2F%23icons&data=04%7C01%7Caarongu%40microsoft.com%7C2440ba3df8464ad4d91b08d87db79867%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637397574803512471%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=PN%2BOUgP7cbck9r0z386hPArsipBwY6c5A6MAKt%2F6%2Ffg%3D&reserved=0>

Also:
https://stackoverflow.com/questions/48839338/which-icon-sizes-are-required-for-progressive-web-apps-pwa-as-of-q1-2018<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F48839338%2Fwhich-icon-sizes-are-required-for-progressive-web-apps-pwa-as-of-q1-2018&data=04%7C01%7Caarongu%40microsoft.com%7C2440ba3df8464ad4d91b08d87db79867%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637397574803522418%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=1Nz32MgaOfgM08pFX1eJBnM4%2F9ciVtBLYOQzkQDRVE4%3D&reserved=0>

Anyway, it would be nice to prefer the resizable format when resizing images.  Let me know if this is not the right place to post this.

--
Glen K. Peterson