web-dev-qa-db-fra.com

Changer dynamiquement site favicon

J'ai une application Web personnalisée en fonction de l'utilisateur actuellement connecté. J'aimerais que le favicon de la page soit le logo de la marque de distributeur, mais je ne parviens pas à trouver de code ni d'exemples de la pour faire ça. Quelqu'un a-t-il réussi à faire cela auparavant?

Je pense avoir une douzaine d'icônes dans un dossier, et la référence à laquelle le fichier favicon.ico à utiliser est simplement générée de manière dynamique avec la page HTML. Pensées?

javascripthtmldomfavicon
308
SqlRyan

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 devrait être cool avec ça.

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

351
keparo

Voici du code qui fonctionne dans Firefox, Opera et Chrome (contrairement à toutes les autres réponses publiées ici). Voici un 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'utiliseriez alors comme suit:

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

fourchette ou voir une démo .

83
Mathias Bynens

Si vous avez l'extrait HTML suivant:

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

Vous pouvez modifier le favicon à l'aide de Javascript en modifiant 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 Canvas et définir le HREF en tant que ToDataURL () du canevas, un peu comme le fait Favicon Defender .

42
fserb

Version jQuery:

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

ou même 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";
32
vorillaz

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 ensuite l'utiliser comme ceci:

changeFavicon("http://www.stackoverflow.com/favicon.ico")
13
Michał Perłakowski

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 pouvoir simplement passer le nom de l'icône que vous voulez dans les données de vue et le jeter dans la balise head.

10
Jeff Sheldon

Voici un code que j'utilise pour ajouter la prise en charge dynamique des favicon à Opera, Firefox et Chrome. Cependant, je ne pouvais pas utiliser IE ou Safari. En principe, Chrome autorise les favicons dynamiques, mais il ne les met à jour que lorsque l'emplacement de la page (ou un iframe etc.) change aussi loin que je peux le 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 de favicons, allez simplement favicon.change("ICON URL") en utilisant ce qui précède.

(crédits à http://softwareas.com/dynamic-favicons pour le code sur lequel j'ai basé ceci.)

9
cryo

J'utiliserais l'approche de Greg et créerais un gestionnaire personnalisé pour favicon.ico. Voici un gestionnaire (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;
    }
    }
}

Vous pouvez ensuite utiliser ce gestionnaire dans la section httpHandlers de la configuration Web dans IIS6 ou utiliser la fonctionnalité "Mappages de gestionnaires" dans IIS7.

5
Dan

Il existe une solution monoligne pour ceux qui utilisent jQuery:

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

Le seul moyen de rendre cela opérationnel pour IE consiste à configurer votre serveur Web pour qu'il traite les demandes de * .ico d'appeler votre langage de script côté serveur (PHP, .NET, etc.). Configurez également * .ico pour qu'il redirige vers un seul script et que ce script fournisse le fichier favicon approprié. Je suis sûr que le cache posera encore des problèmes intéressants si vous voulez pouvoir faire des va-et-vient dans le même navigateur entre différents favicons.

3
Greg

Selon WikiPedia , vous pouvez spécifier le fichier favicon à charger à l’aide de la balise link de la section head, avec le paramètre 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 aux cookies afin de pouvoir récupérer les informations de votre session de cette manière et de présenter un contenu approprié.

Vous risqueriez de tomber sous le coup des formats de fichiers (IE ne prend apparemment en charge que son format .ICO, tandis que la plupart des utilisateurs prennent en charge les images PNG et GIF) et éventuellement en cache, à la fois sur le navigateur et par le biais de proxies. Cela serait dû à la mention originale de favicon, en particulier pour marquer un signet avec le mini-logo du site.

2
staticsan

Ou si vous voulez un é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 à https://koddsson.com/posts/emoji-favicon/

2
max4ever

Oui tout à fait possible

  • Utilisez une chaîne de requête après le favicon.ico (et d'autres liens de fichiers - voir le lien de réponse ci-dessous)
  • Assurez-vous simplement que le serveur répond à "someUserId" avec le fichier image correct (qui pourrait être des règles de routage statiques , ou dynamique code côté serveur).

par exemple.

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

Ensuite, , quel que soit le langage/framework côté serveur que vous utilisez, vous pourrez facilement trouver le fichier basé sur le userId et le servir dans réponse à cette requête .

Mais faire correctement les favicons (c'est en fait un vraiment sujet complexe ) veuillez consulter la réponse ici https://stackoverflow.com/a/45301651/661584

Beaucoup plus facile que de régler vous-même tous les détails.

Prendre plaisir.

2
MemeDeveloper