Skip to content

Instantly share code, notes, and snippets.

@mathiasbynens
Created June 7, 2010 12:41
Show Gist options
  • Save mathiasbynens/428626 to your computer and use it in GitHub Desktop.
Save mathiasbynens/428626 to your computer and use it in GitHub Desktop.
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);
}
@inkeytech
Copy link

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
Copy link

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