Changer de site web favicon dynamiquement

voici un code qui fonctionne dans Firefox, Opera, et Chrome (contrairement à toutes les autres réponses postées ici). Voici une autre démo de code qui fonctionne dans IE11 aussi. L'exemple suivant pourrait 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'utilisez alors comme suit:

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

de la Fourche à l'écart ou voir une démo .

si vous avez L'extrait HTML suivant:

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

vous pouvez changer le favicon en utilisant Javascript en changeant L'élément HREF sur ce lien, par exemple (en supposant que vous utilisez JQuery):

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

vous pouvez également créer un élément de toile et placer le HREF comme un ToDataURL() de la toile, un peu comme le défenseur Favicon fait.

version jQuery:

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

ou même mieux:

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

Vanilla js version:

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

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

voici du code que j'utilise pour ajouter le support dynamic favicon à Opera, Firefox et Chrome. Je n'ai pas pu faire marcher IE ou Safari. Fondamentalement, Chrome permet les favicons dynamiques, mais il ne les met à jour que lorsque l'emplacement de la page (ou un iframe etc en elle) change autant 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 favicons, il suffit de passer favicon.change("ICON URL") en utilisant ce qui précède.

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

le favicon est déclaré dans l'étiquette de tête avec quelque chose comme:

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

vous devriez être en mesure de passer le nom de l'icône que vous voulez le long des données de vue et de le jeter dans l'étiquette de tête.

une approche plus moderne:

const changeFavicon = link => {
  let $favicon = document.querySelector('link[rel="icon"]')
  // If a <link rel="icon"> 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")

J'utiliserais L'approche de Greg et je ferais un handler personnalisé pour favicon.ico Voici un handler (simplifié) 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 handler dans la section httpHandlers de la configuration web dans IIS6 ou utiliser la fonctionnalité 'handler Mappings' dans IIS7.

la seule façon de faire fonctionner cela pour IE est de configurer votre serveur web pour traiter les requêtes pour *.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 va encore y avoir quelques problèmes intéressants avec cache si vous voulez être en mesure de rebondir dans le même navigateur entre les favicons différents.

selon WikiPedia , vous pouvez spécifier quel fichier favicon charger en utilisant la balise link dans la section head , avec un paramètre de rel="icon" .

par exemple:

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

j'imagine que si vous vouliez écrire du contenu dynamique pour cet appel, vous auriez accès à des cookies pour que vous puissiez récupérer les informations de votre session de cette façon et présenter le contenu approprié.

vous pouvez tomber faute de formats de fichiers (C'est-à-dire qu'il ne supporte que ceux-ci .Format ICO, alors que la plupart des autres prend en charge les images PNG et GIF) et peut-être des problèmes de mise en cache, à la fois sur le navigateur et par le biais de proxies. Cela serait dû à l'intention originale de favicon, en particulier, pour marquer un signet avec le mini-logo d'un site.

Oui tout à fait possible

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

p.ex.

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

puis quel que soit le langage côté serveur / framework vous utilisez devrait facilement être en mesure de trouver le fichier basé sur l'userId et de le servir dans réponse à cette demande .

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

beaucoup plus facile que d'élaborer tous les détails vous-même.

de Profiter de.

il existe une solution en une seule ligne pour ceux qui utilisent jQuery:

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

j'utilise favico.js dans mes projets:)