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

phbernard opened this issue Feb 9, 2015 · 5 comments

Embedded pictures order in favicon.ico #135

phbernard opened this issue Feb 9, 2015 · 5 comments


Copy link

@phbernard phbernard commented Feb 9, 2015

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

@Strobey Strobey commented Apr 29, 2015

I noticed in the imagemagick documentation ( the following:

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?

Copy link

@davidklebanoff davidklebanoff commented Jun 9, 2015

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.

Copy link
Contributor Author

@phbernard phbernard commented May 17, 2016

Implemented in branch package_0_13

Copy link
Contributor Author

@phbernard phbernard commented Jun 27, 2016

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.

Copy link
Contributor Author

@phbernard phbernard commented Jul 1, 2016

Deployed yesterday

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

Successfully merging a pull request may close this issue.

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