Modification dynamique de la favicon d'un site web

Question

J'ai une application Web qui est marquée en fonction de l'utilisateur qui est actuellement connecté. J'aimerais changer le favicon de la page pour qu'il soit le logo de la marque privée, mais je n'arrive pas à trouver de code ou d'exemple sur la façon de le faire. Quelqu'un a-t-il déjà réussi à le faire ?

J'imagine avoir une douzaine d'icônes dans un dossier, et la référence au fichier favicon.ico à utiliser est générée dynamiquement avec la page HTML. Qu'en pensez-vous ?

Answer 1

Pourquoi pas ?

var link = document.querySelector("link[rel~='icon']");
if (!link) {
    link = document.createElement('link');
    link.rel = 'icon';
    document.getElementsByTagName('head')[0].appendChild(link);
}
link.href = 'https://stackoverflow.com/favicon.ico';

Answer 2

Voici un code qui fonctionne dans Firefox, Opera et Chrome (contrairement à toutes les autres réponses postées ici). Voici une autre Démonstration d'un code qui fonctionne dans IE11 aussi. L'exemple suivant peut ne pas fonctionner dans Safari ou 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);
}

Vous l'utiliserez alors comme suit :

var btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
 changeFavicon('http://www.google.com/favicon.ico');
};

Fourchette o voir une démo .

Answer 3

Il existe un jeu d'arcade dans un favicon.

Answer 4

Si vous avez le snippet HTML suivant :

<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />

Vous pouvez modifier la favicon à l'aide de Javascript en modifiant l'élément HREF de ce lien, par exemple (en supposant que vous utilisiez JQuery) :

$("#favicon").attr("href","favicon2.png");

Vous pouvez également créer un élément Canvas et définir le HREF en tant que ToDataURL() du canevas, à l'instar de l'élément Favicon Defender fait.

Answer 5

Version de jQuery :

$("link[rel='shortcut icon']").attr("href", "favicon.ico");

ou encore mieux :

$("link[rel*='icon']").attr("href", "favicon.ico");

Version Vanilla JS :

document.querySelector("link[rel='shortcut icon']").href = "favicon.ico";

document.querySelector("link[rel*='icon']").href = "favicon.ico";