700943 - Favicon background should be close to white, since icons often assume a white background

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect, P3)

Description

[Alex Limi (:limi) — Firefox UX Team]

Attachment: Favicon with white background, notice how it looks bad on the gray background

The area where the favicon is rendered should probably have a subtle glow trending towards white (instead of the current gray), since a lot of favicons assume that they will be rendered on white.

Attached is a screenshot that illustrates how bad it looks when sites have favicons like this. (This also includes the change suggested in bug 700936 where tab switcher is on right side)

Comment 1

[Madhava Enros [:madhava]]

Yes! We're moving to having a more familiar tappable field visual in the top bar, along these lines:
http://www.flickr.com/photos/61892693@N03/6309082243/in/photostream/

Which should address this.

Comment 2

[Ian Barlow (:ibarlow)]

Well, it sort of addresses it. We'll still need an area around the favicon that goes to pure white, which those mocks don't currently do. 

I'll mock something up and we can take a look.

Comment 3

[Matt Brubeck (:mbrubeck)]

For counterpoint, our default theme on Ubuntu places favicons against a very dark background in the tab bar, and on all platforms we place them against green and blue icons in the address bar, and problems like this are very rare.

The nytimes.com favicon is actually black with a transparent background, so it should work against almost any background.  The problem in the attached screenshot is that we *are* putting white behind it.  If we just drew it on a transparent background, it would look fine.

Comment 4

[Matt Brubeck (:mbrubeck)]

(In reply to Matt Brubeck (:mbrubeck) from comment #3)
> The nytimes.com favicon is actually black with a transparent background, so
> it should work against almost any background.

Correction: actually, the nytimes.com favicon is transparent on other platforms, but either they are serving a non-transparent icon to Fennec, or we are drawing it in a way that loses the transparency.

Comment 5

[Ian Barlow (:ibarlow)]

Hm, we should find that out... It would be preferable to just get transparent favicons to begin with.

Comment 6

[Alex Limi (:limi) — Firefox UX Team]

(In reply to Matt Brubeck (:mbrubeck) from comment #3)
> For counterpoint, our default theme on Ubuntu places favicons against a very
> dark background in the tab bar, and on all platforms we place them against
> green and blue icons in the address bar, and problems like this are very
> rare.

The favicon is on its way out of the URL bar on desktop, but on mobile we are very space-constrained (and tab and URL bar are the same thing), so it has to look better there.

On desktop; rendering it on blue/green was always wonky and looks bad, not to mention the duplication with the favicon on the tab itself.

Comment 7

[Doug Turner (:dougt)]

brian, can you see if the icon is really transparent, and if so, why we aren't using the transparency when drawing.

Comment 8

[Brian Nicholson (:bnicholson)]

I can't reproduce this; I assume it was fixed with bug 701985.  Alex, are you still having this issue?

Comment 9

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to Brian Nicholson (:bnicholson) from comment #8)
> I can't reproduce this; I assume it was fixed with bug 701985.  Alex, are
> you still having this issue?

Probably was fixed by bug 701985

Comment 10

[Catalin Suciu [:csuciu]]

I still can see the nytimes favicon with white background on the latest fennec native build.
Mozilla/5.0 (Android;Linux armv7l;rv:11.0a1)Gecko/20111115
Firefox/11.0a1 Fennec/11.0a1
Devices: Samsung Galaxy S
OS: Android 2.2

Comment 11

[Mark Finkle (:mfinkle) (use needinfo?)]

This must be because the nytimes favicon has a white background. If you go to http://mozilla.org, the favicon is transparent.

The only way to truly fix this is to make the URLbar background white, and I don't think we plan on doing that.

Since the favicon image is working fine with transparent favicons, I am considering closing this bug. Checking with UX first.

Comment 12

[Ian Barlow (:ibarlow)]

Looking at the latest Nightly on a Galaxy S, nytimes favicon is transparent for me. 

FWIW the background will also be slightly lighter under the favicon anyway, once we get the URL field in place: http://cl.ly/2C1U371W0b1y182Q0W10

Comment 13

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to Ian Barlow (:ibarlow) from comment #12)
> Looking at the latest Nightly on a Galaxy S, nytimes favicon is transparent
> for me. 

For me too

> FWIW the background will also be slightly lighter under the favicon anyway,
> once we get the URL field in place: http://cl.ly/2C1U371W0b1y182Q0W10

That is happening in a separate bug, for those interested. So I am closing this bug.

Comment 14

[Catalin Suciu [:csuciu]]

Verified fixed on the latest fennec native build. The nytimes favicon's white background is not visible anymore.
Mozilla/5.0 (Android;Linux armv7l;rv:11.0a1)Gecko/20111117 Firefox/11.0a1 Fennec/11.0a1