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!
Equal Height columns have been (one of) the holy grail(‘s) of webdevelopment for quite some time. Making columns look balanced can be a struggle sometimes. There is of course the repeat-y background property, but it doesn’t allow for equal height columns with variable width. Disclaimer: This is an article about a fictional, would-be-nice possibility in…
This notation works with both 8 digits and 4 digits (shorthand notation) …
One of the (many) ideas about a so called “web 3.0” is that it’s going to be location based. So it’s not odd that quite some people stress the importance of location. I agree with them, but I also think location is going to become less and less important. Here’s why I think location will…
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