Closed
Bug 1174548
Opened 8 years ago
Closed 8 years ago
Yelp loads with a black SVG favicon instead of their red ICO favicon. (They provide both.)
Categories
(Web Compatibility :: Desktop, defect)
Web Compatibility
Desktop
Tracking
(firefox40+ fixed, firefox41+ fixed)
People
(Reporter: dholbert, Unassigned)
References
()
Details
(Whiteboard: [country-all][sitewait])
Attachments
(2 files)
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•8 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 | |
Updated•8 years ago
|
|
|
Reporter | |
Comment 2•8 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•8 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•8 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.)
|
||
Comment 4•8 years ago
|
||
(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.
Adding a tracking flag for both FF41 and FF40. I was able to repro this on Aurora build 40.0a2 (2015-06-03) too.
|
||
Comment 6•8 years ago
|
||
I sent them a message via their "report a bug" feature: http://www.yelp.com/support/contact/report_bug/.
Whiteboard: [country-all][sitewait]
|
|
Reporter | |
Comment 7•8 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
Closed: 8 years ago
Resolution: --- → FIXED
|
Assignee | |
Updated•5 years ago
|
Product: Tech Evangelism → Web Compatibility
| Comment hidden (spam) |
| Comment hidden (spam) |
| Comment hidden (spam) |
| Comment hidden (spam) |
| Comment hidden (spam) |
| Comment hidden (spam) |
|
||
Updated•1 year ago
|
Restrict Comments: true
You need to log in
before you can comment on or make changes to this bug.
Description
•