Yelp loads with a black SVG favicon instead of their red ICO favicon. (They provide both.)

RESOLVED FIXED

Status

RESOLVED FIXED
3 years ago
3 years ago

People

(Reporter: dholbert, Unassigned)

Tracking

unspecified

Firefox Tracking Flags

(firefox40+ fixed, firefox41+ fixed)

Details

(Whiteboard: [country-all][sitewait], URL)

(Reporter)

Description

3 years ago
STR:
 1. Load http://www.yelp.com/biz/maddux-park-redwood-city
 2. Look at favicon in your tab

ACTUAL RESULTS:
Favicon is entirely black.

EXPECTED RESULTS:
I'd expect the favicon to be red, matching Yelp's logo.


Looking at the page source, I see:

<link rel="shortcut icon" href="http://s3-media2.fl.yelpcdn.com/assets/2/www/img/118ff475a341/ico/favicon.ico">
<link rel="icon" sizes="any" mask href="//s3-media1.fl.yelpcdn.com/assets/srv0/yelp_styleguide/4374c8fd03d1/assets/img/logos/yelp_burst.svg">
<meta name="theme-color" content="#c41200">


The former (.ico) is the red icon. The latter (SVG) is entirely black.

(Full URL for the black SVG favicon, not just starting with "//":
https://s3-media1.fl.yelpcdn.com/assets/srv0/yelp_styleguide/4374c8fd03d1/assets/img/logos/yelp_burst.svg
)


I'm tentatively filing this as Tech Evang, based on bug 366324 comment 64:
{
Twitter is providing a black icon [1]. I think this is related to Safari 9 pinned tabs implementation [2]. They provide a <meta name="theme-color" content="#55acee"> for Safari. I don't know if websites can provide SVG icons with anything else than black to get the same result in Safari but a normal icon elsewhere. We should reach out to Twitter and Apple here, before Safari 9 ships.

[1] https://abs.twimg.com/a/1434065683/img/t1/favicon.svg
[2] https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW20
}


I'm running Nightly 41.0a1 (2015-06-14).
(Reporter)

Comment 1

3 years ago
(Note: I've got several Yelp tabs open right now. One of them has a red favicon; not sure why. Maybe there's a race condition between their two <link rel="...icon"> tags, and whichever one loads first is the winner?)
(Reporter)

Comment 2

3 years ago
Note that the Safari documentation linked in comment 0 says:
> Note: [...Black SVG favicons...] should be placed before
> other <link rel="icon"> elements to avoid compatibility
> issues with existing icons.

Currently, Yelp's got its black SVG favicon listed *after* the standard favicon, which goes against Apple's recommendation here. Maybe if they swapped the order, we'd reliably pick up the colorful one? (not sure, but it seems like that might be Apple's intent/expectation from their documentation)
(Reporter)

Comment 3

3 years ago
[Tracking Requested - why for this release]: Visual issue in popular website, partially triggered by a Firefox change in Firefox 41 (improved support for SVG favicons)
tracking-firefox41: --- → ?
Summary: Many yelp pages load with black favicon → Many yelp pages load with black favicon (because that's what they're sending us)
(Reporter)

Updated

3 years ago
See Also: → bug 1174552
(Reporter)

Updated

3 years ago
Summary: Many yelp pages load with black favicon (because that's what they're sending us) → Yelp loads with a black SVG favicon instead of their red ICO favicon. (They provide both.)
(In reply to Daniel Holbert [:dholbert] from comment #2)
> Note that the Safari documentation linked in comment 0 says:
> > Note: [...Black SVG favicons...] should be placed before
> > other <link rel="icon"> elements to avoid compatibility
> > issues with existing icons.
> 
> Currently, Yelp's got its black SVG favicon listed *after* the standard
> favicon, which goes against Apple's recommendation here. Maybe if they
> swapped the order, we'd reliably pick up the colorful one?

Yes, we use the last one we find so if they followed Apple's recommendation there shouldn't be a problem.
(Reporter)

Updated

3 years ago
See Also: → bug 1174568
(Reporter)

Updated

3 years ago
Blocks: 366324

Comment 5

3 years ago
Adding a tracking flag for both FF41 and FF40. I was able to repro this on Aurora build 40.0a2 (2015-06-03) too.
status-firefox40: --- → affected
status-firefox41: --- → affected
tracking-firefox40: --- → +
tracking-firefox41: ? → +
I sent them a message via their "report a bug" feature: http://www.yelp.com/support/contact/report_bug/.
Whiteboard: [country-all][sitewait]
(Reporter)

Updated

3 years ago
See Also: → bug 1181681
(Reporter)

Comment 7

3 years ago
This is fixed now -- I see a red favicon, and in their source I see the order has been fixed -- it now looks like:

<link rel="icon" sizes="any" mask href="//s3-media1.fl.yelpcdn.com/assets/srv0/yelp_styleguide/4374c8fd03d1/assets/img/logos/yelp_burst.svg">
<meta name="theme-color" content="#c41200">
<link rel="shortcut icon" href="http://s3-media2.fl.yelpcdn.com/assets/2/www/img/118ff475a341/ico/favicon.ico">
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → FIXED

Comment 8

3 years ago
Setting status flags to match Comment 7.
status-firefox40: affected → fixed
status-firefox41: affected → fixed
You need to log in before you can comment on or make changes to this bug.