Lighthouse: Audit: icon size coverage

[paulirish]

Homescreen icon requirement

in //src/chrome/android/java/res/values/dimens.xml and app_banner_data_fetcher.cc

 <dimen name="webapp_home_screen_icon_size">48dp</dimen>

Splash screen requirement

TLDR: There are 2 layouts for splash screens. You get the "small icon layout" if the icon you provide is <= 80dp. You get the "large icon layout" if it's over >80 dp. Ideal size for splash screen is 128dp. (There is also a way that a non-provided icon is used, though it's unclear what that is.)

// from chromium   /src/chrome/android/java/res/values/dimens.xml
<dimen name="webapp_splash_image_size_ideal">128dp</dimen>
<dimen name="webapp_splash_image_size_threshold">80dp</dimen>
<dimen name="webapp_splash_image_size_minimum">48dp</dimen>

There are three possible layouts for splash screens, which is chosen based on whether an
icon was auto-generated by Chrome and whether the icon is bigger than a threshold.

see how the splash layout and icon is chosen in //src/chrome/android/java/src/org/chromium/chrome/browser/webapps/WebappActivity.java

---

So far, our magic numbers are 48dp and 128dp...

dp and px

For phone-sized android devices, we mostly care about hdpi and up. (The Android One is hdpi) You can ignore anything less than hdpi

For example, the nexus 5 and nexus 6p are xxhdpi and xxxdpi respectively. (four-x doesn't exist yet, phew!)

So what do we need?

I dumped our key dp numbers into http://androidpixels.net/ (and hacked the page with devtools) for this :moneybag::moneybag::moneybag: screenshot:

So.. tl;dr:

If you'd like to provide native rendering of icon for home-screen and splash-screen across supported screen densities, you should provide an icon in these sizes:

72, 96, 144, 192, 256, 384, 512

And all of these should be explicitly indicated in your manifest.

---

Update: conversation below indicates you need fewer than this:

192, 512

---

Dec 2020 edit: some related stuff in https://github.com/GoogleChrome/lighthouse/issues/11762

[PaulKinlan]

Noooooo, I would argue that 192 is the only icon we need for honescreen
(it's also what we've documented extensively) because it scales down well
on all other densities. If you have this you don't need anything else today
or in near future.

I would not recommend requiring all the other icons at all as it is a
massive overkill and it would get more complex for other platforms, ios
might have different resolutions so then it would be 5 for android, 4 for
iOS etc... just have the one for android for the homescreen at least, and
then one for 80dp at 4x density for spalsh screen.

[paulirish]

Noooooo, I would argue that 192 is the only icon we need for honescreen
(it's also what we've documented extensively) because it scales down well
on all other densities.

I haven't personally tested scaling things down, so i'm in no position to refute this.

:+1: to dropping the recommendation for 72, 96, 144 in manifest then.

just have the one for android for the homescreen at least, and
then one for 80dp at 4x density for spalsh screen.

I'm not crazy about 80dp. It turns into px sizes of 120, 160, 240, and 320.
Whereas using the "ideal" large 128dp turns into 192, 256, 384, 512.

In addition to being the preferred sizes, they also feel like the appropriate extension of bigger sizes. For example, here's the current output from the realfavicongenerator:

Given that, I'd be down with simplifying the splash screen res recommendation to just the highest, so: 512px. (And we end up with a more simple 192 & 512 recommendation, in all.)

wdyt?

[paulirish]

@addyosmani @jakearchibald based on the above i see no reason to recommend devs do any icons but 192 and 512.

192 should be straight up logo.
512 has enough room for extra detail, and will be presented separately.

[jakearchibald]

I'd say just 512 if it scales down nicely. Less for the user to download too.

[jakearchibald]

(Unless the larger icon is not just a scaling)

[PaulKinlan]

512 doesn't fit in to 48 dp scaling properly for homescreen. you would
have to use 528. I think you need 192 and 512 so that they work for HS and
SS.

[jakearchibald]

Why does it have to be a multiple?

FWIW I'm using single icons on my projects and it appears to work fine.

[paullewis]

Won't it be fuzzy if the multiples are out?

[jakearchibald]

It can be fuzzy without that. A sharp line can become two blury lines at
50%.

[phbernard]

TL; DR Regarding scaling down, if the image requires a specific scaling algorithm (eg. it's angular on purpose, such as pixel art) AND you want a perfect result, you should create and declare all icons. Else, declaring a single, large icon is fine.

As @jakearchibald, @PaulKinlan and @paullewis discussed it above, scaling down can be an issue.

I already investigated this issue for iOS because RealFaviconGenerator is in the process of generating only one, 180x180 icon. Since iOS icons are numerous and supposed to be declared right in the page, RFG policy of creating them all is often criticized, with good reasons. But I was concerned by how iOS scales down, wondering if it would produce decent results. So I made some tests and the outcome is: iOS scales down well.

What about Android Chrome? I've just run the same kind of tests and the results are identical: Android Chrome scales icons down correctly.

Note that this comment says nothing about using one (512) or two (192 and 512) icons. It is just about scaling down.

[kaycebasques]

Given this discussion, why does LH have the "manifest has icons greater than or equal to 144px" audit?

Seems like the "... 192px" audit would be sufficient.

Is there plans to add a "... 512px" audit?

[patrickhulce]

Already done

[pmcalmeida]

Thanks for your insights into this, I have been trying to figure out how to use an icon just for the homescreen and another large just for the splash and I really think something is wrong with the auto-generation of splash screens.
I have a Moto G5 (1080p 403dp), and when installing the airhorner pwa, which has all the resolution icons, it uses a lower resolution icon using the small layout instead of the large. The only way I was able to create a splash with the large layout image was to just use the 512x512 in the manifest.

[quercusdk]

I confirm, that I also had to remove the 192x192 part from manifest leaving only 512x512 to get a large splashscreen.

[paulirish]

Thanks Hendrik and Pedro. We'll look into it.

[phbernard]

As of today, RealFaviconGenerator creates both 192x192 and 512x512 icons. On a Samsung Galaxy S7, Chrome is using the 192x192 for home screen and the 512x512 for splash screen (full results).

For a quick check, you can run the compatibility test.

[akyoto]

@paulirish Is there a separate issue for this which we can subscribe to?
I'd love to stay up to date on the topic (512px splash screen not showing when 192px icon is provided).
It seems to be an Android or Chrome for Android related problem.

[hulkhaugen]

Thanks for your insights into this, I have been trying to figure out how to use an icon just for the homescreen and another large just for the splash and I really think something is wrong with the auto-generation of splash screens.
I have a Moto G5 (1080p 403dp), and when installing the airhorner pwa, which has all the resolution icons, it uses a lower resolution icon using the small layout instead of the large. The only way I was able to create a splash with the large layout image was to just use the 512x512 in the manifest.

I'm attempting the same as you, and I had it working with providing only 192x192 and 512x512. But yesterday I did some updates, added 384x384 and 1024x1024 based of some other examples, and now it uses the 192x192 at splash. I've been scratching my head about this earlier also. I believe at one point, I gave up on the big splash icon, but suddenly it replaced the small with the big icon after a long time use. I will remove the 384 and 1024 icons today anyway and try again, hopefully it will go back like it was. Strangely inconsistent in my experience.

EDIT: Just noticed that the url to my 512 and 1024 was the same as the url to the 384 in my manifest.json (lazy copy/paste). Changed that and now it uses either 384 or 512 as splash, i think 384. It seems smaller than the one i had before i added 384 to the mix.

[brendankenny]

This is actually complete, and the splash screen issue sounds like a crbug.

We do have more recommendation work tracked in https://github.com/GoogleChrome/lighthouse/issues/6700#issuecomment-447979822