Kilian Valkhof

The case of the disappearing favicon

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!