Closed Bug 1181681 Opened 4 years ago Closed 4 years ago

Flickr loads with a black SVG favicon instead of their blue/pink ICO favicon. (They provide both.)

Categories

(Web Compatibility :: Desktop, defect)

defect
Not set

Tracking

(Not tracked)

VERIFIED FIXED

People

(Reporter: ts.bugzilla, Unassigned)

References

()

Details

Attachments

(1 file)

+++ This bug was initially created as a clone of Bug #1174548 +++

Same as the Yelp, Pinterest, Twitter bugs.
Quoting their source:

<link rel="shortcut icon" type="image/ico" href="https://s.yimg.com/pw/favicon.ico">
[...]
<link rel="icon" sizes="any" mask href="https://s.yimg.com/pw/images/icon_black_white.svg"/>

So, as with Yelp & Twitter & Pinterest's earlier bugs, they're providing the SVG mask-favicon last (against Apple's recommendation), and that makes us use it over their intended colorful .ico one.
Status: UNCONFIRMED → NEW
Ever confirmed: true
See Also: → 1174548
See Also: → 1174568
See Also: → 1174552
As with the Yelp/Twitter/Pinterest bugs, the easiest fix here is for Flickr to follow Apple's guidelines and provide the new "mask" icon *before* other icons, to avoid issues in other browsers that don't recognize Apple's special mask icon syntax.

Reference:
> Note: This markup should be placed before other <link rel="icon"> elements
> to avoid compatibility issues with existing icons.
https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW20
Reached out to @FlickrHelp over Twitter:
 https://twitter.com/CodingExon/status/618867644486152192

Any Flickr devs arriving here: please see comment 1 & comment 2 above for the issue & fix. Thanks!
Contacted Eric Ferraiuolo by mail.
https://github.com/ericf
(I think https://twitter.com/dokas is already working on this, based on responses to my twitter-ping, FWIW)
Eric put me in contact with Phil Dokas who said:

> I deployed a fix for this today :)
Bravo to Flickr Team for the quick response time! <3 from Mozilla.
That's great news, although it's very inconsistent now.
I can confirm it fixed on the homepage, when logged in - but not in private browsing mode. The fix is also not effective for me on individual photo pages, user pages or the groups page. I still see this markup:

	<link rel="shortcut icon" type="image/ico" href="https://s.yimg.com/pw/favicon.ico">
	<link rel="apple-touch-icon-precomposed" href="https://s.yimg.com/pw/apple-touch-icon.png">
	<link rel="icon" sizes="any" mask href="https://s.yimg.com/pw/images/icon_black_white.svg"/>

https://www.flickr.com/groups
https://www.flickr.com/photos/thomasstache/18854262654/
That just means the fix hasn't made it to production yet. (The randomness / first-time-broken-ness you're seeing is bug 366324 comment 45; that bug is fixed in Firefox 40 [currently in Firefox Developer Edition])
(In reply to Daniel Holbert [:dholbert] from comment #10)
> That just means the fix hasn't made it to production yet. 

I figured that. 

> (The randomness /
> first-time-broken-ness you're seeing is bug 366324 comment 45; that bug is
> fixed in Firefox 40 [currently in Firefox Developer Edition])

I did all my tests on current Nightly and DevEdition builds...
Ah, ok, my mistake.  Did you happen to notice whether the markup being sent (in working & not-working cases) had inconsistent <link> ordering, too? i.e. do you know if you were simply seeing Flickr serving different content, or serving the same content with Firefox rendering it inconsistently? (In the latter case, bug 366324 may not be 100% fixed...)
(In any case, this seems to be fixed on Flickr's end, for me at least -- I'm seeing the colorful favicon at https://www.flickr.com/ and both URLs from comment 9 now, with correct <link> ordering according to Apple's spec [w/ SVG coming first]. So, resolving this as FIXED.)

(This may mean that the inconsistency that Thomas mentioned may be harder to reproduce now, if there is really a Firefox bug involved there.)
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Indeed, now all pages have the fixed markup. Yesterday I saw different markup on different pages, with varying whitespace and linebreaks between the tags. Today it's consistent like this:

	<link rel="icon" sizes="any" mask href="https://s.yimg.com/pw/images/icon_black_white.svg">
	<link rel="shortcut icon" type="image/ico" href="https://s.yimg.com/pw/favicon.ico">
	<link rel="apple-touch-icon-precomposed" href="https://s.yimg.com/pw/apple-touch-icon.png">
	<meta name="theme-color" content="black"/>

So, yeah? \o/
(In reply to Thomas Stache from comment #14)
> Yesterday I saw different markup on different pages

Phew, that calms my worries in comment 12. Thanks!  Calling this "VERIFIED" based on your confirmation of fixedness in comment 14.
Status: RESOLVED → VERIFIED
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.