Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dynamically changing favicons with JavaScript
/*!
* 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);
}
@mathiasbynens

This comment has been minimized.

Copy link
Owner Author

commented Apr 29, 2011

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.

@ghost

This comment has been minimized.

Copy link

commented Apr 29, 2011

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

@mathiasbynens

This comment has been minimized.

Copy link
Owner Author

commented Apr 29, 2011

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

@ghost

This comment has been minimized.

Copy link

commented Apr 29, 2011

@mathiasbynens No problem!

@fritzweisshart

This comment has been minimized.

Copy link

commented Jun 23, 2016

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);
}

@johnhunter

This comment has been minimized.

Copy link

commented Mar 28, 2017

Confirmed works in IE11

@inkeytech

This comment has been minimized.

Copy link

commented Jun 28, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.