Closed Bug 1174548 Opened 4 years ago Closed 4 years ago

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

Categories

(Web Compatibility :: Desktop, defect)

defect
Not set

Tracking

(firefox40+ fixed, firefox41+ fixed)

RESOLVED FIXED
Tracking Status
firefox40 + fixed
firefox41 + fixed

People

(Reporter: dholbert, Unassigned)

References

()

Details

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

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).
(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?)
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)
[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)
Summary: Many yelp pages load with black favicon → Many yelp pages load with black favicon (because that's what they're sending us)
See Also: → 1174552
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.
See Also: → 1174568
Blocks: 366324
Adding a tracking flag for both FF41 and FF40. I was able to repro this on Aurora build 40.0a2 (2015-06-03) too.
I sent them a message via their "report a bug" feature: http://www.yelp.com/support/contact/report_bug/.
Whiteboard: [country-all][sitewait]
See Also: → 1181681
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
Closed: 4 years ago
Resolution: --- → FIXED
Setting status flags to match Comment 7.
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.