Changer dynamiquement le favicon du site Web
https://stackoverflow.com/questions/260857
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai une application Web dont la marque correspond à l'utilisateur actuellement connecté.J'aimerais changer le favicon de la page pour qu'il soit le logo de la marque privée, mais je ne trouve aucun code ni aucun exemple expliquant comment procéder.Quelqu'un a-t-il déjà fait cela avec succès ?
J'imagine avoir une douzaine d'icônes dans un dossier et la référence au fichier favicon.ico à utiliser est simplement générée dynamiquement avec la page HTML.Pensées?
La solution
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 cela.
modifié pour écraser correctement les icônes existantes
Autres conseils
Voici un code qui fonctionne dans Firefox, Opera et Chrome (contrairement à toutes les autres réponses publiées ici). Voici une démo du code qui fonctionne également dans IE11 . 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 ensuite comme suit:
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
changeFavicon('http://www.google.com/favicon.ico');
};
Quitter ou voir une démo .
Si vous disposez de l'extrait HTML suivant :
<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />
Vous pouvez modifier le favicon en utilisant Javascript en modifiant par exemple l'élément HREF sur ce lien (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 comme ToDataURL() du canevas, un peu comme le Défenseur de favicon fait.
Version jQuery:
$("link[rel='shortcut icon']").attr("href", "favicon.ico");
ou même mieux:
$("link[rel*='icon']").attr("href", "favicon.ico");
Version JS Vanilla:
document.querySelector("link[rel='shortcut icon']").href = "favicon.ico";
document.querySelector("link[rel*='icon']").href = "favicon.ico";
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")
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.
Voici un code que j'utilise pour ajouter la prise en charge dynamique des favicon à Opera, Firefox et Chrome. Cependant, je ne pouvais pas faire fonctionner IE ou Safari. Fondamentalement, Chrome autorise les favicons dynamiques, mais ne les met à jour que lorsque l'emplacement de la page (ou un iframe etc.) change aussi loin que je peux le savoir:
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 modifier les favoris, accédez à favicon.change ("URL ICON") à l'aide de ce qui précède.
(crédits de http://softwareas.com/dynamic-favicons pour le code sur lequel je me suis fondé sur.)
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.
Le seul moyen de faire fonctionner cela avec IE est de configurer votre serveur Web pour traiter 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 certain que le cache posera encore des problèmes intéressants si vous souhaitez pouvoir faire des va-et-vient dans le même navigateur entre différents favicons.
Il existe une solution monoligne pour ceux qui utilisent jQuery:
$("link[rel*='icon']").prop("href",'https://www.stackoverflow.com/favicon.ico');
Selon WikiPedia , vous pouvez spécifier le fichier favicon à charger à l'aide du . link dans la section head , avec le paramètre rel = "icône". .
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 le contenu approprié.
Vous risqueriez de tomber sous le coup des formats de fichiers (IE ne prend apparemment en charge que le format .ICO, tandis que la plupart des utilisateurs prennent en charge les images PNG et GIF) et éventuellement des problèmes de mise en cache, à la fois sur le navigateur et par le biais de mandataires. Cela s’expliquerait par la mention originale de favicon, en particulier pour le marquage d’un signet avec le mini-logo du site.
Oui tout à fait possible
- Utilisez une chaîne de requête après le lien favicon.ico (et d'autres liens de fichiers). voir le lien de réponse ci-dessous)
- Assurez-vous simplement que le serveur répond au message "someUserId". avec le fichier image correct (il peut s'agir de règles de routage statique 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 devrait pouvoir facilement trouver le fichier en fonction de l'ID utilisateur et le servir dans en réponse à cette demande .
Mais pour faire les favicons correctement (c'est en fait un vraiment sujet complexe ), veuillez consulter la réponse ici < a href = "https://stackoverflow.com/a/45301651/661584"> https://stackoverflow.com/a/45301651/661584
Beaucoup plus facile que de régler vous-même tous les détails.
Profitez.
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 pour https://koddsson.com/posts/emoji-favicon/
J'utilise favico.js dans mes projets.
Il permet de changer le favicon en une gamme de formes prédéfinies et personnalisées.
En interne, il utilise canvas pour le rendu et l'URL de données base64 pour le codage des icônes.
La bibliothèque dispose également de fonctionnalités intéressantes: badges d'icônes et animations; soi-disant, vous pouvez même diffuser la vidéo de la webcam dans l'icône:)
