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

Embedded pictures order in favicon.ico #135

Closed
phbernard opened this issue Feb 9, 2015 · 5 comments
Closed

Embedded pictures order in favicon.ico #135

phbernard opened this issue Feb 9, 2015 · 5 comments
Labels
Milestone

Comments

@phbernard
Copy link
Contributor

Currently, pictures embedded in favicon.ico are sorted by size (ie. first pic is the smallest one). However, on Mac OS with Retina screen, both Chrome and Firefox use the first favicon.ico embedded picture. This generates poor result.

The order of the embedded pictures should be reversed: highest resolution picture should come first.

@phbernard phbernard added the bug label Feb 9, 2015
@Strobey
Copy link

Strobey commented Apr 29, 2015

I noticed in the imagemagick documentation (http://www.imagemagick.org/Usage/formats/#ico) the following:

ICO
To create a multi-resolution ICO format image simply create all the image sizes you require and write them all to the same ICO file.

convert icon-16.bmp icon-32.bmp icon-64.bmp icon-128.bmp icon-256.bmp myicon.ico

So you just need to change the order of the command line to the equivalent of:
convert icon-48.bmp icon-32.bmp icon-16.bmp favicon.ico

Of course, that might fix the issue for Chrome on a Retina Mac and break it for others...

As for Firefox, it's probably not related - doesn't it pick up the last size PNG declared in the section of your site? So swap the order so the 32x32 or 96x96 is last?

@davidklebanoff
Copy link

Strobey is correct with regard to Firefox (at least on Mac) picking up the last declared image, thusly to get the best result in Firefox (tested in 38.0.5 for Retina Mac) was to place the 32x32 icon last:

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">

Placing higher resolutions such as 96x96 or 194x194 resulted in jagged edges for my circular icon, apparently Firefox can't scale the image well. This raises the issue about non-retina screens. Using a 32x32 icon on non-retina may have jagged edges, where as a 16x16 icon on a retina screen would look blurry.

@phbernard
Copy link
Contributor Author

Implemented in branch package_0_13

@phbernard
Copy link
Contributor Author

After running the tests with latest RFG's package and browsers:

  • Chrome and Firefox take favicon.ico when it is declared in the HTML (but not when it is only implicitly available in the root directory).
  • They both use the 16x16 embedded image.

I was a bit puzzled by this result so I created the 6 possible ICO files (16/32/48, 16/48/32, etc.) and tested with Chrome: it always takes the 16x16 icon. Not good.

My feeling here is that the issue is more complex than what it sounds. So I keep this issue opened as it is and I will address the problem globally as another task.

@phbernard
Copy link
Contributor Author

Deployed yesterday

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

No branches or pull requests

3 participants