CSS hexadecimal colors with transparency, a conversion tool
This notation works with both 8 digits and 4 digits (shorthand notation) …
Firefox has an annoying bug: If you set the window.location.hash
, your favicon disappears. Very annoying. The bug has been open and confirmed for a long time, and Firefox 3.0 all the way to 3.6 are affected. But it hasn’t been fixed yet, so here’s how to fix it yourself.
I encountered this bug while building Lystener. I change the location hash there quite often, and each time I did, the favicon would disappear. Finding the root cause took me quite a while, and apart from the bug report I could not find any page describing why this happens and what to do about it. So I figured that I’d write a quick post about it to make it Google-able at least.
Luckily, there is an easy fix: Just reset the favicon after changing the window.location.hash
. Here’s a jQuery function that does just that:
function setFavicon() { var link = $('link[type=image/x-icon]').remove().attr("href"); $('<link href="'+ link +'" rel="shortcut icon" type="image/x-icon" />').appendTo('head'); }
It’s fairly straightforward: We find the current <link>
referencing the favicon, remove it, and then, making use of jQuery’s standard of functions returning themselves, get the href attribute of the just-deleted link. Then we simply set that as the href
in a newly created link
element, and add that to the head.
Just execute that function each time you change the window.location.hash
, and you’re all set!
This notation works with both 8 digits and 4 digits (shorthand notation) …
If you look above this text, you can see that the header of this blog has a sloped edge. It’s one of my favorite things about this site’s new design. The technique I used has a consistent angle regardless of screen size, can show background images and only needs one HTML element and no pseudo…
$ npm install postcss-dutch-stylesheets …
Hey! Can we use this together with data urls to animate it?
You can, there are entire libraries for it: Favicon.js. They’re overkill for this problem though, which is why I opted for a two-liner.
Yeah, I just noticed. (I built it and tried it.) Thanks for the link though, will check!
Nice. That has bugged me for a while now.
Thank you! You just save me to ask in stackoverflow :)
THANK YOU!!!!!!!
this display bug has been nagging me for months! i used a 960grid template system, and once integrated lost my favicon! with this little function, IT’S BACK!!!
thank you, thank you, thank you!!! :)
soon will be able to push this new code live, with your helpful function …
This fixes the problem in FF, but seems to break it in IE8. Strangely, the symptoms in IE8 are identical to those in FF without the code :/ Wrapped it in if ($.browser.msie != true) seems to work.
Thanks a lot!
nice one, but your code won’t work with recent jQuery versions, because of the wrong “has attribute selector”.
you have to put your attribute value into quotation marks:
$(‘link[type=”image/ico”]’)
Thanks for sharing! Here is a more compressed version of the code using jQuery’s detach method:
$(‘link[type*=icon]’).detach().appendTo(‘head’);
Thanks, it worked fine