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

[ghost]

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.

[dominickng]

I noted some of the following on the Chrome bug:

• PNG is the standard format for high quality app icons. JPG, while better for photos, is not really in favour for app icons (c.f. most app stores ask for PNG only icons)
• Chrome lazily requests icons, so the most appropriate icon size for the device is used. A 512x512px icon, if provided in the manifest, would only be used for a screen density that warranted such a large icon (or if no smaller, more appropriately sized icon exists). Having a large icon is future-proofing your app (and potentially making it compatible with desktop systems that explicitly ask for such large icons).
• Icons from the manifest are generally downloaded once, and after that, they're locally cached. So even if a PNG icon is significantly larger than a JPG icon, that size cost is paid on the network only once.
• Support for SVG icons is desirable, but challenging, and is tracked in crbug.com/578122.

[connorjclark]

Thanks for bringing this up @ayumihamsaki, and thanks @dominickng for sharing those details.

Seems that the docs @ayumihamsaki linked to (and the failing audit text) is misleading - a 512x icon is not required for a splash screen. I think it is selected in the same manner as the PWA icon - is that correct @dominickng?

[dominickng]

@Hoten Thanks for weighing in! It's correct that a 512px icon is not required for a splash screen in Chrome. If a large icon is present, a different splash template suitable for the bigger icon is used, but we still generate a splash screen if there's only a 144px icon.

[brendankenny]

See #291 for how we arrived at the 512 recommendation.

Since it's part of the pwa optimized group and not part of installable, it seems ok to stick to that recommendation (maybe we want to tweak the failure title...e.g. "not configured for a good custom splash screen" :)

[Eccenux]

I agree that the recommendation is incorrect. SVG icons are supported by Chrome. And work fine.

For example this is fine for Chrome, but Lighthouse claims that there are no suitable icons in the manifest (both for icon and splash screen):

    "icons": [
        {
            "src": "/ico/apple-touch-icon-72-precomposed.png",
            "type": "image/png",
            "sizes": "72x72"
        },
        {
            "src": "/ico/apple-touch-icon-114-precomposed.png",
            "type": "image/png",
            "sizes": "114x114"
        },
        {
            "src": "/ico/apple-touch-icon-144-precomposed.png",
            "type": "image/png",
            "sizes": "144x144"
        },
        {
            "src": "/ico/catalogue_online.svg",
            "sizes": "145x145 192x192 512x512"
        }
    ],

[dominickng]

@Eccenux The recommendation against SVG is correct. Chrome currently does not support SVG icons for PWAs primary icons. You can only supply PNGs. Part of this limitation is because the underlying platforms don't really support SVG as launcher icons, e.g. Android requires that SVGs are converted to a different format to use as home screen shortcuts. The other part is that rendering an SVG needs to happen in Chrome's renderer process, and there's some complexity in plumbing (this is the reason why Chrome doesn't support SVG favicons yet).

However, you are right in pointing out that your manifest should be supported. Chrome's current requirement is a minimum 144x144px PNG icon (which is present), not a 192x192px icon.

[Eccenux]

@dominickng Well SVG works fine for me on Chrome 71, Android 8.1.0. I'm also almost sure it worked fine last time I checked (both for Chrome and Firefox Mobile). Maybe Chrome generates PNG internally, but it does work. And also what happens internally is not really a developers problem (PNG would also need to be converted to bitmap in the end).

Some screens. This the same manifest I pasted above. App install popup:
https://user-images.githubusercontent.com/1045235/50033946-f741ed80-fffa-11e8-87f6-34f9aa9f2b36.jpg

App icon on desktop/launcher:
https://user-images.githubusercontent.com/1045235/50033954-fd37ce80-fffa-11e8-94c5-b34cff466f5e.jpg

[dominickng]

@Eccenux Your site works in Chrome because you have a 144x144px PNG icon in your manifest. If you remove that, you'll find that it no longer works, since we haven't yet implemented SVG manifest icon support.

[exterkamp]

So, to summarize:

• Chrome doesn't support SVG and won't until this resolves.
• We require 512px because #291

This seems like WAI for now from a Lighthouse perspective, we can't claim SVG (or any non-PNG format) is valid in Chrome because it is not, and we landed on 512px for optimum image size after a lengthy discussion in the past.

[Eccenux]

Hm... That's weird. I didn't expect Chrome not to conform with the standard. So I guess the recommendation is correct for Chrome for Android for now. Hopefully not for long ;-).

The message in Lighthouse could still be more clear though... Could say that a smaller PNG would be used for an icon and might be blurry.

I would also like to note that it's not nice to remove comments... They didn't seem to be out of line for me. Ayumi Hamasaki did provide some valid points in her comments. It would be wise to also consider other browsers and not just Chrome when auditing websites/applications. Would make Lighthouse more useful for developers.

[patrickhulce]

Moving the 512px requirement to a warning could be a feasible alternative, IMO. The motivation and discussion in #291 for 512 was for minimizing downloading of extra icons and preventing unpleasant auto-scaling artifacts, but it certainly doesn't stop being a PWA because the icon is a bit fuzzy. The discussion took place before warnings were a thing, and 2 years is a decent time window to re-evaluate 👍

@ayumihamsaki you're not deleting your own comments are you? I've never been able to see them on the issue, just in the email thread. It's only been a few hours since them when it was ~4am on a Sunday for the core team I'm sure it wasn't us unless some credentials have gone rogue :)

This is definitely constructive conversation and hardly the worst criticism we've received 😉

[ghost]

@patrickhulce Yes I deleted my comment as I saw this issue was closed. I will re-write my comment back here.

I personally disagree with the conclusion, because I thought Lighthouse was Best Practices for all Browsers and not Google Chrome Best Practices. Github Issue here # 291 was dated two years ago and at that time only Google Chrome officially used Manifest. Now in 2018 four Major browsers officially use Manifest and so Lighthouse should reflect that. Another 2 Major Browsers have manifest under review and that would bring the total to 6.

My point is that to pass all four browsers you need the following set of icons:

144px
180px
192px

and Google Chrome suggests 512px

Therefore I feel Lighthouse should change their recommendation to reflect all Browsers and not just Google Chrome.

Also in the near future when Safari adds manifest how is a 512px png file meant to scale down to work on the Apple Watch 3+ for example, I don't think that would work.

[brendankenny]

I think there are three aspects to this issue that we should separate:

• exact icon size suggestions

  It sounds like we want to lower the "installable" icon requirement to the actual Chrome minimum of 144px.

• purpose of the audit(s)

  For the 512x512 recommendation, it's worth pointing out that this isn't a manifest audit, it's a splash screen audit, specifically: if you install your PWA using mobile Chrome, will you get a good looking splash screen?

  Failing this audit does not imply an invalid manifest or PWA (and Lighthouse doesn't (and shouldn't) say this). However, the audit is in the new "PWA optimized"/"polished" section, so I believe we feel comfortable with the stricter 512px requirement for the audit rather than just the minimum needed. It's not that much effort to generate an image that size these days (especially if you already have a vector version), and as mentioned above, the larger file is never requested if the platform doesn't actually need it.

  I believe the file format (jpg, svg) question was handled well above, but just to be clear, Lighthouse should check for whatever formats are actually supported, so any changes will have to start upstream.

• audits for PWAs in browsers other than Chrome/platforms other than mobile

  We've discussed PWA audits for other browsers since almost the beginning of Lighthouse (see #356 for an example), however a lot of those requirements and A2HS UIs were shifting and there wasn't a lot of developer interest way back then.

  That's changing/has changed (Firefox, Windows, ChromeOS, etc etc etc), so I think this is worth revisiting. I think the ideal way to handle this is to share audits when requirements overlap, but add new audits for differing PWA requirements on each platform, not diluting the existing Chrome PWA audits.

[brendankenny]

So I think the actions we'll want here:

• lower the installable-manifest icon requirement to 144px (after double checking this is 👍 :). installable-manifest is the only audit that does the 192px check, so should be an easy change to make
• find some audit champions to go through the new audit checklist for other PWA platforms so we can get a sense of exact requirements for each, think about how we can maintain audits as requirements change or grow in the future, and think about how we should incorporate them into the revamped PWA UI

[charlymz]

it seems not working ok, i got the 192 and 512 icons and stills ask for them

[connorjclark]

@charlymz Looks like your service worker is not installing.

[charlymz]

but ir requests a 192 and a 512 PNG in the manifest and they are there, also it was requiring a theme_color it was added and the warning disapeared, why not disapear the PNG warning if the icons exists

[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?