Changer de site web favicon dynamiquement

j'ai une application web qui est marquée selon 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.le fichier ico à utiliser est juste généré dynamiquement avec la page HTML. Pensées?

275
demandé sur Michał Perłakowski 2008-11-04 07:11:55
la source

13 ответов

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.

modifié pour remplacer correctement les icônes existantes

294
répondu keparo 2017-04-21 15:23:22
la source

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 .

72
répondu Mathias Bynens 2018-06-01 09:29:14
la source

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.

39
répondu fserb 2010-06-10 13:04:58
la source

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";
30
répondu vorillaz 2016-04-08 02:37:14
la source

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é.)

9
répondu cryo 2010-05-27 13:10:42
la source

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.

9
répondu Jeff Sheldon 2014-12-11 11:00:50
la source

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")
9
répondu Michał Perłakowski 2016-10-01 00:30:32
la source

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.

5
répondu Dan 2011-06-25 08:52:17
la source

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.

3
répondu Greg 2011-01-24 19:19:50
la source

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.

2
répondu staticsan 2008-11-04 07:23:13
la source

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.

2
répondu MemeDeveloper 2017-07-25 14:33:22
la source

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

$("link[rel*='icon']").prop("href",'https://www.stackoverflow.com/favicon.ico');
0
répondu user9542596 2018-09-02 18:24:50
la source

j'utilise favico.js dans mes projets:)

-1
répondu Oscar Nevarez 2017-12-13 07:32:57
la source

Autres questions sur javascript dom html favicon