Modifica dinamica dell'icona preferita del sito Web

https://stackoverflow.com/questions/260857

06-07-2019
|

Domanda

Ho un'applicazione web con marchio in base all'utente che ha attualmente effettuato l'accesso.Vorrei cambiare la favicon della pagina in modo che diventi il logo dell'etichetta privata, ma non riesco a trovare alcun codice o alcun esempio di come farlo.Qualcuno lo ha già fatto con successo prima?

Sto immaginando di avere una dozzina di icone in una cartella e il riferimento a quale file favicon.ico utilizzare viene semplicemente generato dinamicamente insieme alla pagina HTML.Pensieri?

Soluzione

Perché no?

(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 dovrebbe essere interessante.

modificato per sovrascrivere correttamente le icone esistenti

Altri suggerimenti

Ecco del codice che funziona in Firefox, Opera e Chrome (a differenza di ogni altra risposta pubblicata qui). Ecco una diversa demo di codice che funziona anche in IE11 . Il seguente esempio potrebbe non funzionare in Safari o 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);
}

Lo useresti quindi come segue:

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

Fork away o visualizza una demo .

Se disponi del seguente snippet HTML:

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

Puoi modificare la favicon utilizzando Javascript modificando l'elemento HREF su questo collegamento, ad esempio (supponendo che tu stia utilizzando JQuery):

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

Puoi anche creare un elemento Canvas e impostare HREF come ToDataURL() del canvas, proprio come il file Favicon Defender fa.

Versione jQuery:

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

o anche meglio:

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

Versione Vanilla JS:

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

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

Un approccio più moderno:

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)
  }
}

Puoi quindi usarlo in questo modo:

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

La favicon è dichiarata nel tag head con qualcosa del tipo:

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

Dovresti essere in grado di passare il nome dell'icona desiderata nei dati della vista e di inserirlo nel tag head.

Ecco un po 'di codice che uso per aggiungere il supporto dinamico favicon a Opera, Firefox e Chrome. Tuttavia, non sono riuscito a far funzionare IE o Safari. Fondamentalmente Chrome consente favicon dinamici, ma li aggiorna solo quando la posizione della pagina (o un iframe ecc.) Cambia per quanto posso 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]}

Per modificare le favicon, vai su favicon.change (" ICON URL ") usando quanto sopra.

(crediti verso http://softwareas.com/dynamic-favicons per il codice su cui ho basato questo on.)

Vorrei usare l'approccio di Greg e creare un gestore personalizzato per favicon.ico Ecco un gestore (semplificato) che funziona:

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;
    }
    }
}

Quindi puoi usare quel gestore nella sezione httpHandlers della configurazione web in IIS6 o usare la funzione 'Mapping gestori' in IIS7.

L'unico modo per farlo funzionare per IE è impostare il tuo server web in modo che gestisca le richieste per * .ico di chiamare il tuo linguaggio di scripting lato server (PHP, .NET, ecc.). Installa anche * .ico per reindirizzare a un singolo script e fare in modo che questo script fornisca il file favicon corretto. Sono sicuro che ci saranno ancora alcuni problemi interessanti con la cache se vuoi essere in grado di rimbalzare avanti e indietro nello stesso browser tra diverse favicon.

Esiste una soluzione a linea singola per coloro che usano jQuery:

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

Secondo WikiPedia , puoi specificare quale file favicon caricare usando il link nella sezione head , con un parametro di rel = " icon " .

Ad esempio:

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

Immagino che se volessi scrivere del contenuto dinamico per quella chiamata, avresti accesso ai cookie in modo da poter recuperare le informazioni sulla sessione in quel modo e presentare il contenuto appropriato.

Potresti sbagliare nei formati di file (secondo quanto riferito IE supporta solo il suo formato .ICO, mentre la maggior parte degli altri supporta immagini PNG e GIF) e possibilmente problemi di memorizzazione nella cache, sia sul browser che attraverso i proxy. Ciò sarebbe dovuto all'idea originale di favicon, in particolare, per contrassegnare un segnalibro con il mini-logo di un sito.

Sì totalmente possibile

Utilizza una stringa di query dopo il favicon.ico (e altri collegamenti ai file - vedere il link di risposta di seguito)
Assicurati semplicemente che il server risponda a " someUserId " con il file di immagine corretto (che potrebbe essere statico regole di routing o dinamico codice lato server).

es.

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

Quindi qualunque sia la lingua / il framework lato server che usi dovrebbe essere facilmente in grado di trovare il file basato sull'Id utente e servirlo in risposta a quella richiesta .

Ma per fare correttamente le favicon (in realtà è un davvero argomento complesso ), vedi la risposta qui < a href = "https://stackoverflow.com/a/45301651/661584"> https://stackoverflow.com/a/45301651/661584

Molto più semplice rispetto a elaborare tutti i dettagli da soli.

Enjoy.

O se vuoi un'emoticon :)

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());

Propone a https://koddsson.com/posts/emoji-favicon/

Uso favico.js nei miei progetti.

Permette di cambiare la favicon in una gamma di forme predefinite e anche personalizzate.

Internamente utilizza canvas per il rendering e base64 URL dei dati per la codifica delle icone.

La libreria ha anche delle belle funzioni: badge e animazioni di icone; presumibilmente, puoi persino trasmettere il video della webcam sull'icona :)

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow