Dynamically changing favicons with JavaScript

change-favicon.js

/*!
 * Dynamically changing favicons with JavaScript
 * Works in all A-grade browsers except Safari and Internet Explorer
 * Demo: http://mathiasbynens.be/demo/dynamic-favicons
 */

// HTML5™, baby! http://mathiasbynens.be/notes/document-head
document.head || (document.head = document.getElementsByTagName('head')[0]);

function changeFavicon(src) {
 var link = document.createElement('link'),
     oldLink = document.getElementById('dynamic-favicon');
 link.id = 'dynamic-favicon';
 link.rel = 'shortcut icon';
 link.href = src;
 if (oldLink) {
  document.head.removeChild(oldLink);
 }
 document.head.appendChild(link);
}

Update: The Chrome bug was fixed in Chrome 6 (released Sep 10th, 2010), so the Chrome hack that broke the forward button isn’t really necessary anymore.

@mathiasbynens Minor nitpick: Line 8 should read document.head || (document.head = document.getElementsByTagName('head')[0]);. Omitting the parentheses produces a syntax error.

@kitgoncharov That’s not a nitpick at all, just a silly typo on my end. Thanks!

@mathiasbynens No problem!

In order to avoid caching of the favicon, I added +'?='+Math.random()

function changeFavicon(src) {
src = src+'?='+Math.random(); // so wird das cachen zuverlässig vermieden
var link = document.createElement('link'),
oldLink = document.getElementById('dynamic-favicon');
link.id = 'dynamic-favicon';
link.rel = 'icon';
link.href = src;
if (oldLink) {
document.head.removeChild(oldLink);
}
document.head.appendChild(link);
}

Confirmed works in IE11

Hello, please excuse my ignorance, but I'm a newbie.

Do I need anything special in the header?

I please this in the middle of my code:

document.head || (document.head = document.getElementsByTagName('head')[0]);
function changeFavicon(src){
	var link = document.createElement('link');
	var oldLink = document.getElementById('dynamic-favicon');
	link.id = 'dynamic-favicon';
	link.rel = 'shortcut icon';
	link.href = src;
	if (oldLink){
		document.head.removeChild(oldLink);
	}
 document.head.appendChild(link);
}

And then when I want to change my favicon, I simply call:

changeFavicon('img/usms-favicon-16px-red.png');

I'm testing in the latest Chrome.

Any help would be greatly appreciated.

Regards,

Ian Watson

This is a VERY simple way to change the Favicon on your website.
link rel="icon" type="image/x-icon" href="STARTING FAVICON URL GOES HERE" id="icon" / ---- Add < at the start and > at the end for it to work!

<script type="text/javascript"> var url = 'YourURLHere'; function changeIcon() { document.getElementById("icon").href = url; } </script>