Create a gist now

Instantly share code, notes, and snippets.

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.

Show comment Hide comment
@mathiasbynens

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

Owner

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.

@kitcambridge

This comment has been minimized.

Show comment Hide comment
@kitcambridge

kitcambridge 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 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.

Show comment Hide comment
@mathiasbynens

mathiasbynens Apr 29, 2011

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

Owner

mathiasbynens commented Apr 29, 2011

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

@kitcambridge

This comment has been minimized.

Show comment Hide comment
@kitcambridge

kitcambridge Apr 29, 2011

@mathiasbynens No problem!

@mathiasbynens No problem!

@fritzweisshart

This comment has been minimized.

Show comment Hide comment
@fritzweisshart

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

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.

Show comment Hide comment
@johnhunter

johnhunter Mar 28, 2017

Confirmed works in IE11

Confirmed works in IE11

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment