FireFox 3.6 - 9 drops favicon when changing window.location

Question

Problem exists only on FireFox (from 3.6 up to current 9), other browsers are fine. My code looks like this:

jQuery.extend({
    AnchorFromUrl : function(url) {
        var anchor = url.substr(1).replace('.html','');
        $.fizzer_anchor = anchor;
        window.location.hash = anchor;
        return anchor;
    }
});

The most weird thing is that if I place an alert before the window.location.hash = anchor; line, after clicking Ok favicon doesn't disappear, remove that alert() and you get your favicon disappearing.

Note: it also drops the favicon if you just do window.location = something.

Answer 1

I had the same problem, but found this interesting post and it worked for me, its just adding 2 lines of javascript. The problem occure when the hash element changes, so, we need to re-stablish it via javascript

http://kilianvalkhof.com/2010/javascript/the-case-of-the-disappearing-favicon/

this is the code

function setFavicon() {
  var link = $('link[type="image/x-icon"]').remove().attr("href");
  $('<link href="'+ link +'" rel="shortcut icon" type="image/x-icon" />').appendTo('head');
}

Or (thanks to Mottie) using jQuery detach

$('link[type*=icon]').detach().appendTo('head');

Answer 2

It worked for me :

var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'FAV_ICON_URL';
document.getElementsByTagName('head')[0].appendChild(link);

Refer : Changing Website Icon Dynamically