Lower the installable-manifest icon requirement to 144px, add audits for A2HS in other browsers

Lighthouse suggest to Developers to use 512px by 512px .png files for the icons in the manifest file. You can see the following information recommendation by Lighthouse found here: https://developers.google.com/web/tools/lighthouse/audits/custom-splash-screen#recommendations

This seems to be a complete waste of file size space and will give a negative performance to PWA’s and use up people’s Data Plans on Mobile networks.

Though I am not suggesting to not use 512px by 512px icons and maybe in the future we end up having 1024 x 1024 with Mobile devices getting better screen displays as time goes by.

I’m suggesting that using the .png format is not a good idea at all. In fact it would be better to use .jpg (for reduced file size) or the next gen image format .webp (for even better reduced file size and quality) or a vector such as .svg which would have the best quality displaying various icon sizes.

Please note I have filed an issue with the Google Chrome team found here: https://bugs.chromium.org/p/chromium/issues/detail?id=910880

I would like to see both Google Chrome and Lighthouse work together to create a solution by allowing Developers to use 512px by 512px icon sizes and better image formats .jpg or .webp or .svg thus saving Users Data and Speeding up the loading of a PWA.

[lafeber]

Soo, I need to add a 512px png next to the following icons:

<!-- generics -->
<link rel="icon" href="/path/to/favicon-32.png" sizes="32x32">
<link rel="icon" href="/path/to/favicon-57.png" sizes="57x57">
<link rel="icon" href="/path/to/favicon-76.png" sizes="76x76">
<link rel="icon" href="/path/to/favicon-96.png" sizes="96x96">
<link rel="icon" href="/path/to/favicon-128.png" sizes="128x128">
<link rel="icon" href="/path/to/favicon-192.png" sizes="192x192">
<link rel="icon" href="/path/to/favicon-228.png" sizes="228x228">

<!-- Android -->
<link rel="shortcut icon" sizes="196x196" href=“/path/to/favicon-196.png">

<!-- iOS -->
<link rel="apple-touch-icon" href="/path/to/favicon-120.png" sizes="120x120">
<link rel="apple-touch-icon" href="path/to/favicon-152.png" sizes="152x152">
<link rel="apple-touch-icon" href="path/to/favicon-180.png" sizes="180x180">

<!-- Windows 8 IE 10-->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">

<!— Windows 8.1 + IE11 and above —>
<meta name="msapplication-config" content="/path/to/browserconfig.xml" />

I need all the twitter:x and og:x meta tags too, which means I’m running into a problem with the maximum amount of tags in the head.

Can we please all agree on a favicon.svg standard which we can also use for the PWA?

[connorjclark]

@charlymz Looks like your service worker is not installing.