Skip to content
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

Closed
paulirish opened this issue May 5, 2016 · 19 comments
Closed

Audit: icon size coverage #291

paulirish opened this issue May 5, 2016 · 19 comments
Assignees
Labels

Comments

@paulirish
Copy link
Member

@paulirish 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
Copy link
Member

@PaulKinlan 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
Copy link
Member Author

@paulirish 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
Copy link
Member Author

@paulirish 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
Copy link

@jakearchibald jakearchibald commented May 10, 2016

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

@jakearchibald
Copy link

@jakearchibald jakearchibald commented May 10, 2016

(Unless the larger icon is not just a scaling)

@PaulKinlan
Copy link
Member

@PaulKinlan 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
Copy link

@jakearchibald 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
Copy link
Member

@paullewis paullewis commented May 10, 2016

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

@jakearchibald
Copy link

@jakearchibald jakearchibald commented May 10, 2016

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

@phbernard
Copy link

@phbernard 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
Copy link
Contributor

@kaycebasques 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
Copy link
Collaborator

@patrickhulce patrickhulce commented Sep 26, 2017

Already done

@pmcalmeida
Copy link

@pmcalmeida 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
Copy link

@quercusdk 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
Copy link
Member Author

@paulirish paulirish commented Mar 26, 2018

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

@phbernard
Copy link

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

@akyoto
Copy link

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

@paulirish paulirish added P1.5 and removed P1 labels Aug 27, 2018
randytarampi added a commit to randytarampi/android-icons that referenced this issue Mar 10, 2019
I mean, they're used on the splash screen, but they're still icons no?

Per GoogleChrome/lighthouse#291 (comment)
randytarampi added a commit to randytarampi/android-icons that referenced this issue Mar 10, 2019
I mean, they're used on the splash screen, but they're still icons no?

Per GoogleChrome/lighthouse#291 (comment)
randytarampi added a commit to randytarampi/android-icons that referenced this issue Mar 10, 2019
I mean, they're used on the splash screen, but they're still icons no?

Per GoogleChrome/lighthouse#291 (comment)
randytarampi pushed a commit to randytarampi/android-icons that referenced this issue Mar 10, 2019
[skip ci]

# [2.1.0](v2.0.4...v2.1.0) (2019-03-10)

### Features

* Add PWA splash screen icons. ([2ee286c](2ee286c)), closes [/github.com/GoogleChrome/lighthouse/issues/291#issue-153328672](https://github.com//github.com/GoogleChrome/lighthouse/issues/291/issues/issue-153328672)
* **travis:** `android-icons` -> `[@randy](https://github.com/randy).tarampi/android-icons` ([2e5eaa0](2e5eaa0))
randytarampi pushed a commit to randytarampi/android-icons that referenced this issue Mar 10, 2019
[skip ci]

# [2.1.0](v2.0.4...v2.1.0) (2019-03-10)

### Features

* Add PWA splash screen icons. ([2ee286c](2ee286c)), closes [/github.com/GoogleChrome/lighthouse/issues/291#issue-153328672](https://github.com//github.com/GoogleChrome/lighthouse/issues/291/issues/issue-153328672)
* **travis:** `android-icons` -> `[@randy](https://github.com/randy).tarampi/android-icons` ([52db43a](52db43a))
randytarampi pushed a commit to randytarampi/android-icons that referenced this issue Mar 10, 2019
[skip ci]

# [2.1.0](v2.0.4...v2.1.0) (2019-03-10)

### Features

* Add PWA splash screen icons. ([2ee286c](2ee286c)), closes [/github.com/GoogleChrome/lighthouse/issues/291#issue-153328672](https://github.com//github.com/GoogleChrome/lighthouse/issues/291/issues/issue-153328672)
* **travis:** `android-icons` -> `[@randy](https://github.com/randy).tarampi/android-icons` ([52db43a](52db43a))
@hulkhaugen
Copy link

@hulkhaugen hulkhaugen commented Mar 10, 2019

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.

randytarampi added a commit to randytarampi/android-icons that referenced this issue Mar 17, 2019
I mean, they're used on the splash screen, but they're still icons no?

Per GoogleChrome/lighthouse#291 (comment)
EvanBacon added a commit to expo/expo-cli that referenced this issue Apr 15, 2019
EvanBacon added a commit to expo/expo-cli that referenced this issue Apr 17, 2019
* fixed resizeMode in splash screen

* Update icons.js

* [WIP] updating image speed

* Update icons.js

* Removed default apple tags in favor of generated PWA tags

* Fixed splashscreens not being generated

* Removed iOS from web splash screen

* webSplash.supportsTablet

* Update Config.js

* Removed extra icons: GoogleChrome/lighthouse#291
@brendankenny
Copy link
Member

@brendankenny brendankenny commented Jun 25, 2019

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

We do have more recommendation work tracked in #6700 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.