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

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

Closed
phbernard opened this Issue Feb 28, 2014 · 9 comments

Comments

Projects
None yet
3 participants
@phbernard
Contributor

phbernard commented Feb 28, 2014

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.

@phbernard phbernard added the bug label Feb 28, 2014

@stuartpb

This comment has been minimized.

Show comment
Hide comment
@stuartpb

stuartpb Jun 17, 2014

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

stuartpb commented Jun 17, 2014

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 comment has been minimized.

Show comment
Hide comment
@phbernard

phbernard Jun 19, 2014

Contributor

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.

Contributor

phbernard commented Jun 19, 2014

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

This comment has been minimized.

Show comment
Hide comment
@kukulich

kukulich Sep 6, 2014

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

kukulich commented Sep 6, 2014

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

@phbernard

This comment has been minimized.

Show comment
Hide comment
@phbernard

phbernard Sep 9, 2014

Contributor

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/

Contributor

phbernard commented Sep 9, 2014

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

This comment has been minimized.

Show comment
Hide comment
@stuartpb

stuartpb Sep 9, 2014

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.

stuartpb commented Sep 9, 2014

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

This comment has been minimized.

Show comment
Hide comment
@phbernard

phbernard Sep 10, 2014

Contributor

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:

main_pic

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:

image

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

Contributor

phbernard commented Sep 10, 2014

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:

main_pic

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:

image

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

@stuartpb

This comment has been minimized.

Show comment
Hide comment
@stuartpb

stuartpb Sep 11, 2014

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.

stuartpb commented Sep 11, 2014

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

This comment has been minimized.

Show comment
Hide comment
@phbernard

phbernard Sep 12, 2014

Contributor

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.

Contributor

phbernard commented Sep 12, 2014

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

This comment has been minimized.

Show comment
Hide comment
@phbernard

phbernard Sep 16, 2014

Contributor

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.

Contributor

phbernard commented Sep 16, 2014

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.

@phbernard phbernard closed this Sep 16, 2014

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