Embedded pictures order in favicon.ico #135

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

Projects

None yet

3 participants

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

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 phbernard added this to the Package v0.13 milestone Apr 13, 2016
@phbernard
Contributor

Implemented in branch package_0_13

@phbernard
Contributor

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
Contributor

Deployed yesterday

@phbernard phbernard closed this Jul 1, 2016
@evilebottnawi evilebottnawi referenced this issue in haydenbleasel/favicons Aug 15, 2016
Merged

Remove unused google tv icon and right order. #143

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