Changement de site de favicon dynamiquement

J'ai une application web qui marque en fonction de l'utilisateur qui est actuellement connecté. J'aimerais changer le favicon de la page et le logo de la marque privée, mais je suis incapable de trouver un code ou des exemples de la façon de faire. Personne n'a réussi à faire cela avant?

Je imaginant avoir une douzaine d'icônes dans un dossier, et la référence à laquelle favicon.ico fichier à utiliser est qui vient d'être généré dynamiquement avec la page HTML. Pensées?

Il y a un jeu d'arcade dans un favicon.
Notez que google Chrome, favicon dynamique de la mise en œuvre est buggé et utilise trop de ressources PROCESSEUR. Voir code.google.com/p/chromium/issues/detail?id=121333
Le lien pour le jeu d'arcade changé. Ceci est la bonne.
Voir stackoverflow.com/questions/6296574/... sur la façon de mettre à jour dynamiquement le favicon par le dessin sur le dessus d'un modèle de l'image avec la toile.
Petit bug dans l'exemple de code fourni dans la accepté de répondre. Je n'ai pas suffisamment de score de réputation de commenter les réponses, d'où l'écriture ici. La dernière ligne a les parenthèses intervertis: }()); devrait lire })(); Il serait bien que l'exemple de code devient mis à jour depuis il est plus que probable copiés par d'autres.

OriginalL'auteur SqlRyan | 2008-11-04

  1. 325

    Pourquoi pas?

    (function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
})();

    Firefox doit être cool avec elle.

    édité pour bien écraser les icônes existantes

    Je pense que c'est proche de ce que je suis à la recherche, mais comment pourrais-je obtenir le approprié HREF partir de la base de données. Je suppose que je vais devoir faire un serveur de recherche à partir de javascript, mais je n'en veux pas trop compliqué. Merci pour l'astuce.
    Depuis cela ne fonctionne pas sous IE, de toute façon, vous pouvez supprimer shortcut de la rel attribut. shortcut est pas valide IE-propriétaire de relation de lien!
    Vous pourriez tout aussi bien regarder un favicon lien et le mettre à jour ou de le remplacer.
    Google peut vous donner un site favicon en utilisant cette url, en remplacement de stackoverflow.com avec le domaine que vous voulez: s2.googleusercontent.com/s2/favicons?domain=stackoverflow.com
    Devrait entrer cela dans la console Javascript de Chrome de travail? Je n'arrive pas à changer l'icone sur les différents sites de cette façon.

    OriginalL'auteur keparo

  2. 75

    Voici un code qui fonctionne dans Firefox, Opera et Chrome (à la différence de tous les autres répondre à posté ici). Voici un autre démo de code qui fonctionne dans IE11 trop. 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 pouvez alors l'utiliser comme suit:

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

    Fourche loin ou voir une démo.

    Le Chrome bug a été corrigé dans Chrome 6 (sortie le 10 septembre), de sorte que le Chrome hack n'est pas vraiment nécessaire plus -- en fait, j'avais recommandons fortement de ne pas l'utiliser car il rompt le bouton vers l'avant.
    Le Chrome bug peut avoir été fixé, mais il est brisé à nouveau dans 14.0.835.187.
    Le démo ne fonctionne pas pour moi avec Chrome 21/WinXP.
    La démo ne fonctionne pas pour moi en Chrome 26/Win7. document.head || document.head = document.getElementsByTagName('head')[0]; Uncaught ReferenceError: Invalid left-hand side in assignment
    Cela fonctionne dans tous les navigateurs (IE 11, Edge, FF et Chrome) impossible de tester avec safari

    OriginalL'auteur Mathias Bynens

  3. 41

    Si vous avez le code HTML suivant:

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

    Vous pouvez modifier le favicon à l'aide de Javascript en changeant le HREF de l'élément sur ce lien, par exemple (en supposant que vous êtes à l'aide de JQuery):

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

    Vous pouvez également créer un élément Canvas et définir le HREF, comme un ToDataURL() de la toile, un peu comme le Favicon Défenseur.

    cette méthode ne fonctionne pas sous Mozilla Firefox
    Je pense au moment où le JS s'exécute, le navigateur aura déjà vu le lien et essayé de charger favicon.png. Cette opération peut être fait côté serveur.

    OriginalL'auteur fserb

  4. 32

    la Version jQuery:

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

    ou encore mieux:

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

    Vanille JS version:

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

document.querySelector("link[rel*='icon']").href = "favicon.ico";
    Ne fonctionne pas sur Firefox 31.
    Une combinaison de cela et keparo la réponse ci-dessus (la réponse choisie) ai eu de travail dans les deux ff et chrome pour moi.

    OriginalL'auteur vorillaz

  5. 12

    Une approche plus moderne:

    const changeFavicon = link => {
  let $favicon = document.querySelector('link[]')
  //If a <link > element already exists,
  //change its href to the given link.
  if ($favicon !== null) {
    $favicon.href = link
  //Otherwise, create a new element and append it to <head>.
  } else {
    $favicon = document.createElement("link")
    $favicon.rel = "icon"
    $favicon.href = link
    document.head.appendChild($favicon)
  }
}

    Vous pouvez alors l'utiliser comme ceci:

    changeFavicon("http://www.stackoverflow.com/favicon.ico")

    OriginalL'auteur Michał Perłakowski

  6. 10

    Le favicon est déclaré dans la balise head avec quelque chose comme:

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

    Vous devriez être en mesure de simplement passer le nom de l'icône que vous voulez dans la vue de données et de le jeter dans la balise head.

    IIRC, cependant, certains navigateurs (je suis à la recherche dans votre direction, c'est à dire) n'est pas vraiment le respect de cette parfois.
    (J'ai trouvé que j'avais de meilleurs résultats un peu d'avoir le fichier d'icône dans le bon endroit, plutôt que le lien explicite).

    OriginalL'auteur Jeff Sheldon

  7. 9

    Voici un code que j'utilise pour ajouter favicon dynamique de soutien à l'Opéra, Firefox et Chrome. Je ne pouvais pas obtenir IE ou Safari de travail. Fondamentalement, google Chrome permet aux dynamiques icônes, mais il ne se met à jour lorsque la place de la page (ou un iframe etc) des changements aussi loin que je peux dire:

    var IE = navigator.userAgent.indexOf("MSIE")!=-1
var favicon = {
change: function(iconURL) {
if (arguments.length == 2) {
document.title = optionalDocTitle}
this.addLink(iconURL, "icon")
this.addLink(iconURL, "shortcut icon")
//Google Chrome HACK - whenever an IFrame changes location 
//(even to about:blank), it updates the favicon for some reason
//It doesn't work on Safari at all though :-(
if (!IE) { //Disable the IE "click" sound
if (!window.__IFrame) {
__IFrame = document.createElement('iframe')
var s = __IFrame.style
s.height = s.width = s.left = s.top = s.border = 0
s.position = 'absolute'
s.visibility = 'hidden'
document.body.appendChild(__IFrame)}
__IFrame.src = 'about:blank'}},
addLink: function(iconURL, relValue) {
var link = document.createElement("link")
link.type = "image/x-icon"
link.rel = relValue
link.href = iconURL
this.removeLinkIfExists(relValue)
this.docHead.appendChild(link)},
removeLinkIfExists: function(relValue) {
var links = this.docHead.getElementsByTagName("link");
for (var i=0; i<links.length; i++) {
var link = links[i]
if (link.type == "image/x-icon" && link.rel == relValue) {
this.docHead.removeChild(link)
return}}}, //Assuming only one match at most.
docHead: document.getElementsByTagName("head")[0]}

    Pour changer les icônes, il suffit d'aller favicon.change("ICON URL") à l'aide de la ci-dessus.

    (crédits de http://softwareas.com/dynamic-favicons pour le code je me suis basé sur ce.)

    Le Chrome bug a été corrigé dans Chrome 6 (sortie le 10 septembre), de sorte que le Chrome hack n'est pas vraiment nécessaire plus -- en fait, j'avais recommandons fortement de ne pas l'utiliser car il rompt le bouton vers l'avant.
    Chrome a encore le même bug, mais dans des circonstances légèrement différentes que le bug constaté. code.google.com/p/chromium/issues/detail?id=99549

    OriginalL'auteur cryo

  8. 5

    Je voudrais utiliser de Greg approche et de faire un gestionnaire personnalisé pour favicon.ico
    Voici un (simplifié) gestionnaire qui fonctionne:

    using System;
using System.IO;
using System.Web;
namespace FaviconOverrider
{
public class IcoHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "image/x-icon";
byte[] imageData = imageToByteArray(context.Server.MapPath("/ear.ico"));
context.Response.BinaryWrite(imageData);
}
public bool IsReusable
{
get { return true; }
}
public byte[] imageToByteArray(string imagePath)
{
byte[] imageByteArray;
using (FileStream fs = new FileStream(imagePath, FileMode.Open, FileAccess.Read))
{
imageByteArray = new byte[fs.Length];
fs.Read(imageByteArray, 0, imageByteArray.Length);
}
return imageByteArray;
}
}
}

    Alors vous pouvez utiliser ce gestionnaire dans la section httpHandlers du web config dans IIS6 ou utiliser la " Mappages de gestionnaires fonctionnalité dans IIS7.

    en fait, je suis curieux de savoir pourquoi cela a downvoted? c'est en fait la meilleure réponse considérant al lle d'autres s'appuient sur des scripts qui peuvent ou peuvent ne pas être disponibles.
    Parce qu'on dirait que c'est dynamique sur le côté serveur. L'OP a été demandé pour le dynamisme du côté du client.

    OriginalL'auteur Dan

  9. 3

    La seule façon de faire ce travail pour IE est de configurer votre serveur web pour traiter les demandes d' *.ico pour appeler votre langage de script côté serveur (PHP, .NET, etc). Aussi le programme d'installation *.ico pour rediriger vers un seul script et ce script fournir le bon fichier favicon. Je suis sûr qu'il y est encore quelques questions intéressantes avec cache si vous voulez être en mesure de rebondir et-vient dans le même navigateur entre les différentes icônes.

    OriginalL'auteur Greg

  10. 2

    Selon Wikipédia, vous pouvez spécifier le fichier favicon à charge à l'aide de la link balise dans le head section, avec un paramètre de .

    Par exemple:

     <link rel="icon" type="image/png" href="/path/image.png">

    J'imagine que si vous voulais écrire un contenu dynamique pour cet appel, vous avez accès aux cookies de sorte que vous pouvez récupérer vos informations de session de cette façon et présenter un contenu approprié.

    Vous risquez de tomber sous le coup de formats de fichier (c'est à dire aurait seulement le prend en charge .ICO format, alors que la plupart des tout le monde prend en charge le format PNG et GIF) et, éventuellement, la mise en cache des enjeux, à la fois sur le navigateur et via des proxys. Ce serait à cause de l'original itention de favicon, plus précisément, pour marquer d'un signet avec un site de mini-logo.

    beaucoup plus que cela. stackoverflow.com/a/45301651/661584 la faq / info sur le générateur de site va vous surprendre: il y a beaucoup de choses à ce sujet.
    Le web change beaucoup de choses en 9 ans.

    OriginalL'auteur staticsan

  11. 2

    Oui tout à fait possible

    • Utiliser un querystring après le favicon.ico (et d'autres fichiers liens -
      voir la réponse au lien ci-dessous)
    • Assurez-vous simplement que le serveur répond à la "someUserId" avec
      le bon fichier image (qui pourrait être statique règles de routage, ou
      dynamique code côté serveur).

    par exemple 

    <link rel="shortcut icon" href="/favicon.ico?userId=someUserId">

    Puis quel que soit le côté de serveur langage /framework vous utilisez devriez être facilement en mesure de trouver la fichier basé sur le nom d'utilisateur et la servir dans réponse à cette demande.

    Mais pour faire favicons correctement (sa en fait vraiment sujet complexe) veuillez voir la réponse ici https://stackoverflow.com/a/45301651/661584

    Beaucoup beaucoup plus facile de travailler sur tous les détails vous-même.

    Profiter.

    Oui, le lien est bon. Je pense que la principale raison pour laquelle ces réponses ne fonctionnent pas sous IE, c'est parce qu'ils n'utilisent pas que l'icône par défaut de <link>, mais au lieu de le regarder pour la apple-touch-icon, ou quelque autre variante.

    OriginalL'auteur MemeDeveloper

  12. 2

    Il existe une unique solution en ligne pour ceux qui utilisent jQuery:

    $("link[rel*='icon']").prop("href",'https://www.stackoverflow.com/favicon.ico');

    OriginalL'auteur Pepelegal

  13. 1

    Ou si vous voulez une émoticône 🙂

    var canvas = document.createElement("canvas");
canvas.height = 64;
canvas.width = 64;
var ctx = canvas.getContext("2d");
ctx.font = "64px serif";
ctx.fillText("☠️", 0, 64); 
$("link[rel*='icon']").prop("href", canvas.toDataURL());

    Accessoires pour https://koddsson.com/posts/emoji-favicon/

    OriginalL'auteur max4ever

  14. -1

    - Je utiliser favico.js dans mes projets.

    Qui permet de changer le favicon pour une gamme de formes prédéfinies et aussi personnalisés.

    En interne, il utilise canvas pour le rendu et base64 données de l'URL de l'icône de l'encodage.

    La bibliothèque dispose également de fonctionnalités intéressantes: l'icône des badges et des animations; soi-disant, vous pouvez même diffuser de la vidéo de la webcam dans l'icône 🙂

    Le lien et la bibliothèque sont très utiles, veuillez fournir une description de la façon dont il fonctionne de sorte que cela devient une réponse valable à la question comme l'a déclaré.
    Merci @DimaTisnek. Ive updpated ma réponse.

    OriginalL'auteur Oscar Nevarez