Appending a hash onto the end of my URL causes favicon not to display in FireFox

Question

I'm having issues with my favicon on a Shopify store in FireFox. This issue is only with FireFox, it does not happen in IE, Safari or Chrome.

Basically, I have a script to append a hash(either #en or #can) to the end of my website URL. For some reason, if I have this code in place, the favicon does not show up in the tab on Firefox even though it works in all other browsers I've tried. Does anyone have any ideas as to what might be causing this? Here's the code I am using to append the hash:

var cc_code = get_cookie("cc_code"); 
if (cc_code == null) {
set_cookie("cc_code","en", 3,"/","");
location.replace(location.href.split('#')[0] + "#en");

} else {
    location.replace(location.href.split('#')[0] + "#"+cc_code);
}

I don't know much about javascript but if I had to take a guess, I'd say it has something to do with location.replace towards the end? Any help would be greatly appreciated. Thanks!

Answer 1

Here's the solution (from http://kilianvalkhof.com/2010/javascript/the-case-of-the-disappearing-favicon/):

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

And then just call

setFavicon();

Wherever you are appending the hash.