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 💰💰💰 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

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

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