1262982 - Some favicons are more pixelated in Firefox than in Chrome and Edge on Retina Macs and HiDPI Windows

Status: NEW

(Firefox :: Tabbed Browser, defect)

Description

[Will]

Attachment: faviconffchrome.png

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0
Build ID: 20160315153207

Steps to reproduce:

Used Firefox on a Surface Pro 4 (I assume this issue is not specific to the SP4 though, it's just the only computer I can test on right now)


Actual results:

I've noticed on the Surface Pro 4 that a good number of favicons in the tab look worse than they do in Chrome. It looks like they aren't scaling as nicely as they do in Chrome. I've attached a screenshot of some examples


Expected results:

Favicons should look normal

Comment 1

[Timothy Nikkel (:tnikkel)]

If I remove all -moz-crisp-edges from:
  browser/base/content/browser.css
  browser/base/content/tabbrowser.css
the problem goes away for me.

I tested on wikipedia. The favicon it return had a variety of sizes between 16x16 and 48x48 IIRC.

These were added in
http://hg.mozilla.org/mozilla-central/rev/ada49c25fe97
of bug 1041845.

Comment 2

[Will]

(In reply to Timothy Nikkel (:tnikkel) from comment #1)
> If I remove all -moz-crisp-edges from:
>   browser/base/content/browser.css
>   browser/base/content/tabbrowser.css
> the problem goes away for me.
> 
> I tested on wikipedia. The favicon it return had a variety of sizes between
> 16x16 and 48x48 IIRC.
> 
> These were added in
> http://hg.mozilla.org/mozilla-central/rev/ada49c25fe97
> of bug 1041845.

I see. If this is messing up favicons, shouldn't it be removed or disabled? I know it's not a serious problem but if there's a quick and easy fix, someone should take a few minutes to do it. It really messes up certain favicons, especially amazon.com's

Comment 3

[Timothy Nikkel (:tnikkel)]

I didn't read bug 1041845 in detail but it seems it was added so that favicons that are only 16x16 when displayed on a retina (or similar) screen and scaled up to 32x32 will not look good using a smoothing type resizing algorithm. For sites with favicons bigger than 16x16 this doesn't seem to work out well.

Comment 4

[Matthew N. [:MattN]]

(In reply to Timothy Nikkel (:tnikkel) from comment #3)
> I didn't read bug 1041845 in detail but it seems it was added so that
> favicons that are only 16x16 when displayed on a retina (or similar) screen
> and scaled up to 32x32 will not look good using a smoothing type resizing
> algorithm.

That's correct. It would probably be easy to disable this on SVG files (using an attribute selector looking at the file suffix assuming they have an SVG suffix) if it's a problem there. To handle this with images it may be harder and require something like 751712 and then send the sizes along with the URL to the tabstrip.

Dolske, is this something that fits into your quality team?

Comment 5

[Will]

Is this a problem on retina macs too or just hidpi windows displays?

Comment 6

[Timothy Nikkel (:tnikkel)]

I see it on retina mac.

Comment 7

[Will]

Attachment: arsfavicon.png

just noticed another example of this, comparing arstechnica.com favicon in Edge vs Firefox on a Surface Pro 4 (which uses 200% scaling by default)

Comment 8

[Johannes Zellner]

Came here to report the same thing, also downsizing larger favicons does not look good.

The usefulness of -moz-crisp-edges can even be seen on hidpi screens with this bugzilla instance's favicon, which is 16x16.
Chrome appears to not smooth icons 16x16 or smaller but does so for everything above. 

So I can confirm that removing crisp edges makes all favicons look good, just like in chrome. 

```
/* Apply crisp rendering for favicons at exactly 2dppx resolution */
@media (resolution: 2dppx) {
  .tab-icon-image {
    image-rendering: -moz-crisp-edges;
  }
}
```

Not sure what the media query has to look like to only apply that image-rendering attribute based on the source size of the favicon.

Comment 9

[Chris Peterson [:cpeterson]]

amazon.com's and wikipedia.org's favicons are also more pixelated in Firefox than in Chrome or Edge. I see this problem on my Retina MacBook Pro and HiDPI Windows 10 laptops.

https://www.amazon.com/
https://www.amazon.com/favicon.ico

https://www.wikipedia.org/
https://en.wikipedia.org/favicon.ico

Comment 10

[Timothy Nikkel (:tnikkel)]

Not sure if we still need -moz-crisp-edges after the rewrite of favicons that happened recently?

Comment 11

[Marco Bonardo [:mak]]

(In reply to Timothy Nikkel (:tnikkel) from comment #10)
> Not sure if we still need -moz-crisp-edges after the rewrite of favicons
> that happened recently?

The recent changes introduced the possiblity to store hidpi favicons through the API, but the browser is still just storing the first icon it finds, it being hires or not. So while it's an improvement when the first icon is hires, in other cases we still just store a 16px icon.
We still need to do follow-up work (bug 1352459 for example, that will likely be worked on by Activity Stream).

Comment 12

[Marco Bonardo [:mak]]

Also, the tabs don't use the favicons service, they just directly fetch the icon. This is mostly because the favicons service doesn't store icons in PB mode for now.

Comment 13

[Will]

Attachment: newyoutubefavicon.png

YouTube updated their logo and favicon today and gosh it looks terrible in Firefox because of this issue. Machine is Windows 10 at 200% scaling

Comment 14

[Will]

I hope this doesn't get forgotten, some favicons still look terrible in Firefox compared to Chrome and Edge, and I don't think websites appreciate Firefox making their favicons looking so bad

Comment 15

[Marco Bonardo [:mak]]

Can you provide examples of pages showing pixelated favicons?

Comment 16

[Johannes Zellner]

https://www.reddit.com/ as an example has a very pixelated icon on hidpi screens with the yesterday's nightly build. The icon looks very smooth in comparison on chromium.

Comment 17

[Johannes Zellner]

Sorry, forgot to mention, that for me this is on Linux/wayland, not as the bug title indicates on windows or mac

Comment 18

[Marco Bonardo [:mak]]

How are your dpi settings?
On Windows I don't see any pixelation (it looks as bad as in Chrome), but likely because we start using image-rendering: -moz-crisp-edges; from 2dppx on, and I'm at 150% dpi.
I think what you see may just be an instance of Bug 1402250, the choice is between pixelated or blurry icons, hopefully most websites today have at least 32px icons, and thus we could just accept a few blurry icons (based on our telemetry, 9% of the pages declaring a sizes attribute have 16px icons, unfortunately many pages don't declare any attribute).

Comment 19

[Chris Peterson [:cpeterson]]

Attachment: Windows_10_250%_default.png

(In reply to Marco Bonardo [::mak] from comment #18)
> How are your dpi settings?
> On Windows I don't see any pixelation (it looks as bad as in Chrome), but
> likely because we start using image-rendering: -moz-crisp-edges; from 2dppx
> on, and I'm at 150% dpi.

I see a blurry Reddit favicon when using Windows 10's default scaling (250% on my laptop), even though Reddit offers favicons in many sizes, from 16x16 and 32x32 up to 192x192. Here is a zoomed screenshot comparing Amazon's and Reddit's favicons at 250% scaling. Amazon's (and Wikipedia's, not shown here) favicons look identical in Firefox and Chrome, but Reddit's is blurry in Firefox.

Comment 20

[Chris Peterson [:cpeterson]]

Attachment: Windows_10_200%.png

When I use my preferred scaling (200%), Amazon's and Wikipedia's favicons are pixelated in Firefox compared to Chrome and Reddit's is still blurry.

Comment 21

[Will]

Attachment: fffc.png

Windows 10 v1709, system scaling is 200% which is significant because there should be no scaling artifact weirdness you could see at 175% system scaling, for example. Firefox 59 stable vs Chrome 65 stable vs Edge. Please zoom in so you can see the differences better

Comment 22

[Marco Bonardo [:mak]]

(In reply to Will from comment #21)
> Windows 10 v1709, system scaling is 200% which is significant because there
> should be no scaling artifact weirdness you could see at 175% system
> scaling, for example. Firefox 59 stable vs Chrome 65 stable vs Edge. Please
> zoom in so you can see the differences better

Yes this is expected and it's Bug 1402250.
I only care about blurry icons here.

(In reply to Chris Peterson [:cpeterson] from comment #19)
> I see a blurry Reddit favicon when using Windows 10's default scaling (250%
> on my laptop), even though Reddit offers favicons in many sizes, from 16x16
> and 32x32 up to 192x192.

Most of them don't scale very well, they look blurry in all the browsers for me at 150%.

> Here is a zoomed screenshot comparing Amazon's and
> Reddit's favicons at 250% scaling. Amazon's (and Wikipedia's, not shown
> here) favicons look identical in Firefox and Chrome, but Reddit's is blurry
> in Firefox.

The pixelated icon is due to Bug 1402250 as I said.

What you see at 250% is really unexpected to me. 
what's the exact url where you see that?
at 250% we should need a 40px icon, since there is not we pick the larger one and scale it down, that is https://www.redditstatic.com/desktop2x/img/favicon/favicon-96x96.png

I wonder if the tab is just picking the largest icon... I will investigate this tomorrow and file a bug in case

Comment 23

[Marco Bonardo [:mak]]

Ok, there's a bug in how ContentLinkHandler picks sizes, I'll file it apart and make it block this one.

Comment 24

[Marco Bonardo [:mak]]

The next nightly should solve the problem of very blurry icons on Reddit (and sites with a similar bug). I plan to uplift the fix to Beta.
If you notice other pages with very blurry icons in the tab, please let me know and I'll investigate.

Comment 27

[taylorking]

Same Issue as of 1-7-21: https://www.reddit.com/r/firefox/comments/ob95ju/low_quality_favicons/h3mx3v3/?context=3