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

@mathiasbynens mathiasbynens 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

@ghost ghost 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

@mathiasbynens mathiasbynens 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

@ghost ghost commented Apr 29, 2011

@mathiasbynens No problem!

@fritzweisshart

This comment has been minimized.

Copy link

@fritzweisshart fritzweisshart 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

@johnhunter johnhunter commented Mar 28, 2017

Confirmed works in IE11

@inkeytech

This comment has been minimized.

Copy link

@inkeytech inkeytech 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

@TigerMANEK426

This comment has been minimized.

Copy link

@TigerMANEK426 TigerMANEK426 commented Aug 19, 2019

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>

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.