Kilian Valkhof

Building tools that make developers awesome.

The case of the disappearing favicon

Javascript, 23 August 2010, < 1

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!

Polypane browser for responsive web development and design Hi, I'm Kilian. I make Polypane, the browser for responsive web development and design. If you're reading this site, that's probably interesting to you. Try it out!