Audit: icon size coverage #291

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

Projects

None yet

6 participants

@paulirish
Member
paulirish commented May 5, 2016 edited

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 audit label May 5, 2016
@PaulKinlan
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.

On Thu, 5 May 2016, 22:19 Paul Irish, notifications@github.com wrote:

Homescreen icon requirement

in //src/chrome/android/java/res/values/dimens.xml and
app_banner_data_fetcher.cc
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/banners/app_banner_data_fetcher.cc&q=%22bool%20AppBannerDataFetcher::IsManifestValidForWebApp%22&sq=package:chromium&type=cs

48dp

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 https://code.google.com/p/chromium/codesearch#chromium/src/chrome/android/java/res/values/dimens.xml
128dp
80dp
48dp

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 our magic numbers so far 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: image]
https://cloud.githubusercontent.com/assets/39191/14190734/22b4e052-f749-11e5-8262-f49c8d6a4816.png

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

[image: image]
https://design.google.com/devices/
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: image]
https://cloud.githubusercontent.com/assets/39191/15057535/1c4d3ca2-12cc-11e6-94e7-6b580ccb1aa8.png

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 your
icon in these sizes:

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

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


You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#291

@paulirish
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?

@paulirish paulirish referenced this issue in RealFaviconGenerator/realfavicongenerator May 6, 2016
Closed

Progressive Web App Splash Screen requires higher res images (256px+) #234

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

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

On Tue, 10 May 2016 at 00:02 Jake Archibald notifications@github.com
wrote:

(Unless the larger icon is not just a scaling)


You are receiving this because you commented.

Reply to this email directly or view it on GitHub
#291 (comment)

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

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

On Tue, 10 May 2016, 17:45 Paul Lewis, notifications@github.com wrote:

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


You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#291 (comment)

@phbernard
phbernard commented May 13, 2016 edited

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

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