New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Audit: icon size coverage #291

Open
paulirish opened this Issue May 5, 2016 · 17 comments

Comments

Projects
None yet
10 participants
@paulirish
Member

paulirish commented May 5, 2016

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
image

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

image

So what do we need?

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

image

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

@paulirish paulirish self-assigned this May 5, 2016

@paulirish paulirish added the new_audit label May 5, 2016

@PaulKinlan

This comment has been minimized.

Show comment
Hide comment
@PaulKinlan

PaulKinlan May 6, 2016

Member

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.

Member

PaulKinlan commented May 6, 2016

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish May 6, 2016

Member

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:
image

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?

Member

paulirish commented May 6, 2016

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:
image

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish May 10, 2016

Member

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

Member

paulirish commented May 10, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@jakearchibald

jakearchibald May 10, 2016

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

jakearchibald commented May 10, 2016

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

@jakearchibald

This comment has been minimized.

Show comment
Hide comment
@jakearchibald

jakearchibald May 10, 2016

(Unless the larger icon is not just a scaling)

jakearchibald commented May 10, 2016

(Unless the larger icon is not just a scaling)

@PaulKinlan

This comment has been minimized.

Show comment
Hide comment
@PaulKinlan

PaulKinlan May 10, 2016

Member

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.

Member

PaulKinlan commented May 10, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jakearchibald

jakearchibald May 10, 2016

Why does it have to be a multiple?

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

jakearchibald commented May 10, 2016

Why does it have to be a multiple?

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

@paullewis

This comment has been minimized.

Show comment
Hide comment
@paullewis

paullewis May 10, 2016

Member

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

Member

paullewis commented May 10, 2016

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

@jakearchibald

This comment has been minimized.

Show comment
Hide comment
@jakearchibald

jakearchibald May 10, 2016

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

jakearchibald commented May 10, 2016

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

@phbernard

This comment has been minimized.

Show comment
Hide comment
@phbernard

phbernard May 13, 2016

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.

phbernard commented May 13, 2016

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

This comment has been minimized.

Show comment
Hide comment
@kaycebasques

kaycebasques Sep 21, 2016

Contributor

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?

Contributor

kaycebasques commented Sep 21, 2016

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

This comment has been minimized.

Show comment
Hide comment
@patrickhulce

patrickhulce Sep 26, 2017

Contributor

Already done

Contributor

patrickhulce commented Sep 26, 2017

Already done

@pmcalmeida

This comment has been minimized.

Show comment
Hide comment
@pmcalmeida

pmcalmeida Mar 3, 2018

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.

pmcalmeida commented Mar 3, 2018

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

This comment has been minimized.

Show comment
Hide comment
@quercusdk

quercusdk Mar 26, 2018

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

quercusdk commented Mar 26, 2018

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

@paulirish paulirish reopened this Mar 26, 2018

@paulirish paulirish added the P1 label Mar 26, 2018

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Mar 26, 2018

Member

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

Member

paulirish commented Mar 26, 2018

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

@phbernard

This comment has been minimized.

Show comment
Hide comment
@phbernard

phbernard Mar 26, 2018

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.

phbernard commented Mar 26, 2018

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.

@blitzprog

This comment has been minimized.

Show comment
Hide comment
@blitzprog

blitzprog Apr 23, 2018

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

blitzprog commented Apr 23, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment