favicon retina firefox

[kainbacher]

hi,

i added your code and did a test in firefox retina and the icon was pixeld - looks like ff uses the 16x16px image.

so i commented this lines:

`´

<link rel="icon" type="image/png" href="{{ STATIC_URL }}images/favicons/favicon-194x194.png" sizes="194x194">

<link rel="icon" type="image/png" href="{{ STATIC_URL }}images/favicons/favicon-96x96.png" sizes="96x96">

<link rel="icon" type="image/png" href="{{ STATIC_URL }}images/favicons/android-chrome-192x192.png" sizes="192x192">

<link rel="icon" type="image/png" href="{{ STATIC_URL }}images/favicons/favicon-16x16.png" sizes="16x16">

and added this:

<link rel="shortcut icon" href="{{ STATIC_URL }}images/favicons/favicon.ico">

now it looks fine.

[phbernard]

Thank you for reporting. Which OS do you use? Where do you see this pixelated icon? (in the tab? in bookmarks?)

[Tathanen]

I've also been seeing low-res icons in Firefox on a high-PPI device. It's in the tab bar, favorites, everywhere. Using a Surface Book, running Windows 10. The icon looks like it was stretched up in the tab bar, it's not a nearest neighbor scale, kind of an ugly one. Conversely, it's indeed a nearest neighbor scale in the bookmark list, it's perfectly pixelated. Icons look fine in Chrome, Edge, etc.

Haven't tried commenting anything out yet, glad to hear there seems to be a workaround. But an actual fix would be ideal!

[phbernard]

Firefox doesn't support the sizes attribute so a misbehavior like this is not that surprising.

On my 4K screen Dell XPS 15 running Win 10, Firefox takes the 32x32 icon, which is the right choice. That's strange, it doesn't look like that different of a Surface Book. But still, not really a big surprise.

Alright, what I understand here is that removing the 16x16 PNG icon could be a good move.

[Tathanen]

It's not uncommon for Firefox to not load the favicon in the tab bar at all, actually. This'll typically be on first load in a session, a refresh will fix it (by loading the 16x16). This is pretty hard to reproduce reliably, it only happens some of the time, but it may indicate that the actual issue here is a failure to properly load what it's looking for, and the fallback not being selected until subsequent loads.

I'll try just dropping the 16x16 png for now and see how things do.

[Tathanen]

After some additional testing, it seems like this is the one that looks the crummiest:

<link rel="shortcut icon" href="/favicon/favicon.ico?v=Nmmr44wJaG">

If I remove it, it defaults to the 16x16 png, which is what I had been seeing in the bookmark menu as extremely pixelated. If I remove BOTH, it'll use the higher-res PNGs, and look fine. I'm not sure why the ico looks so bad in Firefox, it looks fine in Chrome and in Windows File Explorer. If I open the ico file itself in Firefox it looks okay in the body of the window, but up in the tab it still looks distorted and crummy.

[phbernard]

That might be due to the way favicon.ico is built. Just a guess. See #135. This change will be part of the package v0.13 and I'm going to prepare the corresponding compatibility test.

[Tathanen]

Great, can't wait to try it out.

[phbernard]

Compatibility test was updated an hour ago to reflect the future package v0.13.

On my Dell XPS running Windows 10 and Firefox 45, I got the 32x32 PNG icon every time in the tabs (I displayed 8 pages in total, so the observation is quite reliable). However, I got inconsistent results for bookmarks, as usual: 16x16, then 32x32, etc.

[rugk]

BTW I'd recommend voting for https://bugzilla.mozilla.org/show_bug.cgi?id=751712 to get this issue fixed in Firefox...

As for this issue: It is fixed, is not it? If you, you can close it.

[phbernard]

Not fixed. But RFG will have to address this as a global solution for desktop browsers.

[Tathanen]

So I know this isn't fixed, but I just wanted to share how this is currently rendering for me using the latest package, since it is slightly different than it was before.

The first image is the tab in Chrome, which is perfect. Second, the tab in Firefox, which is what my original issue was regarding. It's better now than it was, but still low res and not great. Third is the Firefox bookmark, which is clearly the lowest res.

I'm using the new default minimal image package, here's what's in my HTML head:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=LbbXv8woNO">
<link rel="icon" type="image/png" href="/favicon-32x32.png?v=LbbXv8woNO" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png?v=LbbXv8woNO" sizes="16x16">
<link rel="manifest" href="/manifest.json?v=LbbXv8woNO">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=LbbXv8woNO" color="#5bbad5">
<link rel="shortcut icon" href="/favicon.ico?v=LbbXv8woNO">
<meta name="theme-color" content="#303f9f">

Running latest versions of Chrome and Firefox in Windows 10 on a Surface Book, so with 200% display scaling on the high-ppi screen.

[phbernard]

@Tathanen Could you run the compatibility test with Chrome and FF on your surface? Actually the package currently tested has no favicon.ico so the observation may not be consistent with what you observe. When you submit the results, please leave a small comment so I know it's related to this issue.

[Tathanen]

@phbernard sure thing, just ran the test.

[rugk]

Starting with Firefox 51 Firefox now saves favicons in 32x32px format: https://bugzilla.mozilla.org/show_bug.cgi?id=798223

[phbernard]

@rugk This doesn't work for me at the moment. Running Nightly FF 51.0a1 (2016-09-01) and visiting the compatibility test, FF is exposed to a 16x16 PNG icon and a 32x32 PNG icon. It picks the 16x16 PNG icon and renders it as 40x40 on my 4K screen.

With PNG icons, I don't understand how #798223 can make sense when #751712 is still opened. I guess it only works with ICO images, or when there is a single, high res PNG image. I commented #751712 and #798223.

[TheDecryptor]

Since it doesn't support the sizes attribute, Firefox just takes the last icon specified (Which is the 16x16 PNG currently). Putting the 32x32 PNG or ICO last will make it use that.

[phbernard]

@TheDecryptor Yep. This is why the 16x16 and 32x32 icons are always declared first and last: to prevent FF from using a higher definition icon (typically the 192x192 icon for Android Chrome when RFG used to generate it systematically).

Now, I didn't took the time to force FF to open icons of various resolution and see how it rendered them. For example, FF displays a 16x16 icon on my monitor:

(cropped, regular screenshot: the icon is 16x16)

And a 40x40 icon on my 4K builtin screen:

(cropped, 4K screenshot: the icon is now 40x40)

But that leads to many tests, since that should work on all desktop browsers.

[lightkraken]

Any updates on this? Icons still look super blurry on Firefox tabs on my Mac

[d-simon]

bump