Design the 196x196 PNG picture like the other PNG pictures, not like the iOS pictures

[phbernard]

Currently, the 196x196 PNG picture looks like the iOS icons, not like the other PNG pictures. This is documented here: http://realfavicongenerator.net/faq#why_196x196_different

Although this solution has advantages, it can be surprising. It may be better to just design the 196x196 PNG picture like the other ones.

[stuartpb]

Agreed. The rationale given is that this is so Android browsers will get a similar icon to iOS, but, unlike iOS, the Android app ecosystem has traditionally had icons with transparency.

Making this a special case gives a worse result, not a better one. (If nothing else, "reuse this background for Android browsers" should be an option.)

[phbernard]

This 196x196 icon really makes me feel uncomfortable. Even if Android Chrome documents it, it does not use it when it finds an iOS icon. So right now, this icon is a bit useless...

Android Chrome also recommends to follow Android guidelines to design the icon. Fine. But unlike iOS, which icons are clearly labeled "Apple", Android uses standard HTML5. So no surprise, some browsers like IE11 or Mac Safari use the 196x196 icon, just because. And why Safari would use an icon designed for Android? Or the opposite, why Android would use an icon designed for other platforms?

I plan to ping the Chrome team about this, yet I don't think I can reach them.

[kukulich]

Why not generate 196x196 icon with transparent background and prepare 192x192 for Android browsers?

[phbernard]

Thank you for the suggestion. Sounds like a sensible approach! I made several tests, and Android Chrome does not use anything above 192x192. So the solution you suggest will probably work. With a twist: now I must make sure that all other browsers won't select Android Chrome's icon by mistake.

More of this here: http://realfavicongenerator.net/blog/android-chrome-and-its-favicon/

[stuartpb]

Will 192x192 have a transparent background? As I noted above, Android icons have traditionally been made with a transparent background - 192x192 has no reason to be a special case.

[phbernard]

In the context of this issue: yes, the 192x192 icon is going to look like the other PNG icons.

In a larger context: something needs to be done. While writing the article above, I made the following screenshot:

The Chrome icon on the left looks fine, while my favorite demo icon on the right is not that great. This icon is not bad at all on desktop browsers, where the background is either white or light grey. But on Android, the blue part of the icon is too similar to the background color. Before I made the actual screenshot, I tried all backgrounds offered by default by my Galaxy S5. None of them worked because they were all blue or yellow.

I would like to offer an Android-specific option to add a border, when necessary. Something like:

This is just loud thinking at the moment. But whenever it happens, the "192x192 + larger icon" trick will be quite handy.

[stuartpb]

That's a problem you can have on any platform, though, including iOS (which seems to support transparency as of iOS 7) and PC (for instance, the user could be using a dark Chrome theme). It would be more useful to add an option to make drop shadows for the icon in general.

[phbernard]

iOS 7 prevents transparency, I've made the experiment a few months ago. Thus issue #46.

Regarding desktop icons, I admit I didn't think about darker themes. I have the feeling that themes are not really popular and most people use the light interfaces browsers exhibit nowadays. But I have nothing to prove this.

This point is far from being closed :)

However, the main topic of the issue (design the 196x196 icon after the others + update it to 192x192) will be addressed soon and another issue will be opened to pursue the discussion.

[phbernard]

Fixed and deployed a few hours ago. Compatibility tests were run on most major browsers and platforms.

As a summary, this "fix" contains two things:

• The "Android icon" is now 192x192 due to change in specs.
• The 192x192 icon is now designed after the other PNG icon. Not after the iOS icon (that was the purpose of this fix).

The second step of the "Android icon quest" is issue #83.