Cambiar dinámicamente el favicon del sitio web
Tengo una aplicación web que tiene la marca según el usuario que ha iniciado sesión actualmente. Me gustaría cambiar el favicon de la página para que sea el logotipo de la etiqueta privada, pero no puedo encontrar ningún código ni ejemplos de cómo para hacer esto. ¿Alguien ha hecho esto con éxito antes?
Me imagino que tengo una docena de íconos en una carpeta, y la referencia a qué archivo favicon.ico usar se genera dinámicamente junto con la página HTML. ¿Pensamientos?
¿Por qué no?
var link = document.querySelector("link[rel~='icon']");
if (!link) {
link = document.createElement('link');
link.rel = 'icon';
document.head.appendChild(link);
}
link.href = 'https://stackoverflow.com/favicon.ico';
Aquí hay un código que funciona en Firefox, Opera y Chrome (a diferencia de cualquier otra respuesta publicada aquí). Aquí hay una demostración diferente de código que también funciona en IE11. Es posible que el siguiente ejemplo no funcione en Safari o Internet Explorer.
/*!
* 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);
}
Luego lo usarías de la siguiente manera:
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
changeFavicon('http://www.google.com/favicon.ico');
};
Bifurque o vea una demostración .
