Modifica sito favicon in modo dinamico

Ho un’applicazione web che di marca, secondo l’utente attualmente connesso. Vorrei cambiare la favicon della pagina per essere il logo della private label, ma non riesco a trovare il codice o qualsiasi esempi di come fare questo. Qualcuno l’ha già fatto con successo prima?

Sto immaginando di avere una dozzina di icone in una cartella, e il riferimento a cui favicon.ico file da utilizzare è appena generato in modo dinamico con la pagina HTML. Pensieri?

  • C’è un gioco arcade in una favicon.
  • Notare che Chrome dinamica favicon attuazione è pieno di bug e utilizza troppa CPU. Vedere code.google.com/p/chromium/issues/detail?id=121333
  • Il link per il gioco arcade modificata. Questo è corretto.
  • Vedere stackoverflow.com/questions/6296574/… su come aggiornare dinamicamente la favicon da disegno sulla cima di una immagine del modello tela con.
  • Piccolo bug nel codice di esempio fornito nella accettato di rispondere. Non ho sufficienti punteggio di reputazione per commentare le risposte, quindi scrivere qui, invece. L’ultima riga è la parentesi scambiati: }()); dovrebbe leggere })(); sarebbe bello che il codice di esempio diventa aggiornato in quanto è più probabile copiati e incollati da altri.
  • L’url è cambiato : p01.org/defender_of_the_favicon

InformationsquelleAutor SqlRyan | 2008-11-04

 

14 Replies
  1. 351

    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 fresco con esso.

    modificato correttamente sovrascrivi icone

    • Sto pensando che questo è vicino a quello che sto cercando, ma come faccio a ottenere l’appropriato HREF dal database. Suppongo che dovrò fare un server di ricerca da javascript, ma non voglio che diventi troppo complicato. Grazie per il suggerimento.
    • Certo, si può sempre guardare in su in un database o in un file system. Se ci sono solo un paio di, si potrebbe semplicemente codificare un array di stringhe.
    • Dal momento che questo non funziona in IE, comunque, è possibile rimuovere shortcut dal rel attributo. shortcut è valido IE-proprietario link relazione!
    • Fa questo lavoro se c’è già una favicon?
    • Si può facilmente cercare una favicon link e aggiornare o sostituire.
    • Google può dare un sito favicon utilizzando questo url, sostituzione stackoverflow.com con il dominio che si vuole: s2.googleusercontent.com/s2/favicons?domain=stackoverflow.com
    • +1 perché funziona! Ma si dovrebbe farlo con il prefisso dell’operatore unario, come + o - o qualunque cosa del genere in modo +function(){/*CHANGE ICON*/}(), o a mettere in funzione un oggetto tra due () come (function(){/*CHANGE ICON*/})(), in modo che si ottiene eseguita… 😉
    • Dovrebbe entrare in questo nella console Javascript nel lavoro di Cromo? Non riesco a cambiare la favicon su vari siti che modo.
    • no, non è possibile. Almeno Firefox è ignorare una modifica href sul link-tag, che non ha fatto modificare l’icona visualizzata.
    • È stato possibile, il 4 novembre del 2008, ma che era di cinque anni e un giorno fa. Chilometraggio può variare a seconda del browser, così come i fattori come ad esempio se si sta sostituendo un valore esistente contro l’applicazione di un nuovo elemento link, etc.
    • Firefox non supporta la modifica href (non aggiornamento), ma non supportano la rimozione del vecchio nodo di collegamento e l’aggiunta di uno nuovo. È possibile cloneNode() il vecchio, cambiare href, e quindi replaceChild (), come per Mathias Bynens risposta.
    • Una nota per chi cerca questo in Firefox come mi è stato: non è possibile utilizzare un URL file:// a icona (cambiando nel Grasemonkey). Probabilmente un caso limite per la maggior parte delle persone, ed è piuttosto ovvio a posteriori (problemi di sicurezza), ma mi ci è voluto un po ‘ per rendersi conto che era il mio problema.
    • Mi consiglia di guardare lab.ejci.net/favico.js

  2. 83

    Ecco un po ‘ di codice che funziona in Firefox, Opera e Chrome (a differenza di ogni altra risposta qui pubblicato). Qui è diverso demo di codice che funziona in IE11 troppo. L’esempio riportato di seguito 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);
    }

    Si sarebbe poi usarla come segue:

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

    Forcella di distanza o visualizzare una demo.

    • Chrome bug è stato risolto in Cromo 6 (rilasciato il Settembre 10), in modo che il Cromo hack non è più necessario, in realtà, avevo caldamente di non utilizzo in quanto rompe il pulsante avanti.
    • Chrome bug potrebbe essere stato risolto, ma è rotto di nuovo in 14.0.835.187.
    • demo non funziona per me con Chrome 21/WinXP.
    • Demo non funziona per me in Chrome 26/Win7. document.head || document.head = document.getElementsByTagName('head')[0]; Uncaught ReferenceError: Invalid left-hand side in assignment
    • C’è qualche motivo per cui questo non funziona con l’utilizzo di una base 64 immagine codificata stringa come fonte?
    • Gli url non sono supportati nel vecchio IE. Nota anche che solo con IE supporta .ico favicon.
    • Questo funziona in tutti i browser supportati (IE 11, Edge, FF e Chrome) in grado di testare con safari
    • È possibile impostare la favicon in modo dinamico per un PDF che viene aperto in una nuova scheda?
    • Il demo è rotto, probabilmente a causa di http per google invece di https
    • Woah, questo è un vecchio demo! Risolto.

  3. 43

    Se si ha il seguente snippet di codice HTML:

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

    È possibile modificare la favicon utilizzando Javascript modificando un elemento HREF su questo link, per esempio (supponendo che si sta utilizzando JQuery):

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

    È inoltre possibile creare un elemento di Tela e impostare HREF come ToDataURL() dell’area di disegno, come le Favicon Difensore fa.

    • questo metodo non funziona con Mozilla Firefox
    • Penso da tempo che il JS funziona, il browser già visto il link e ho provato a caricare favicon.png. Questo potrebbe essere fatto lato server.
  4. 32

    Versione jQuery:

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

    o meglio ancora:

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

    Vaniglia JS versione:

    document.querySelector("link[rel='shortcut icon']").href = "favicon.ico";
    
    document.querySelector("link[rel*='icon']").href = "favicon.ico";
    • Non funziona su Firefox 31.
    • Una combinazione di questo e keparo la risposta di cui sopra (la risposta scelta) capito di lavoro in entrambi i ff e chrome per me.
  5. 13

    Un approccio più moderno:

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

    È quindi possibile utilizzarlo come questo:

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

    La favicon è dichiarata nel tag head, con qualcosa come:

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

    Si dovrebbe essere in grado di passare solo il nome dell’icona che si desidera lungo in vista dei dati e gettarlo nel tag head.

    • IIRC, tuttavia, alcuni browser (io sto guardando nella vostra direzione, IE) non è davvero il rispetto a volte questo.
    • (Ho scoperto di avere risultati migliori, basta avere l’icona del file nella giusta posizione, piuttosto che il collegamento esplicito).
  7. 9

    Ecco il codice che uso per aggiungere dinamica favicon supporto di Opera, Firefox e Chrome. Non ho potuto ottenere IE o Safari di lavoro però. Fondamentalmente Chrome consente dinamiche favicon, ma si aggiorna solo quando la pagina della posizione (o un iframe ecc in it) i cambiamenti, 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 cambiare la favicon, basta andare favicon.change("ICON URL") utilizzo di cui sopra.

    (crediti per http://softwareas.com/dynamic-favicons per il codice mi sono basato su questo.)

    • Chrome bug è stato risolto in Cromo 6 (rilasciato il Settembre 10), in modo che il Cromo hack non è più necessario, in realtà, avevo caldamente di non utilizzo in quanto rompe il pulsante avanti.
    • Chrome ha ancora quello stesso bug, anche se in modo leggermente diverso, circostanze che il bug specifico indicato. code.google.com/p/chromium/issues/detail?id=99549
  8. 5

    Vorrei utilizzare Greg approccio e fare un gestore personalizzato per la favicon.ico
    Qui è un (semplificato) gestore 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 è possibile utilizzare il gestore nella sezione httpHandlers del web config in IIS6 o utilizzare la funzione “Mapping del Gestore’ in IIS7.

    • in realtà io sono curioso di sapere perchè questo ha downvoted? questo è in realtà la risposta migliore considerando al lthe altri si basano sulla creazione di script che possono o non possono essere disponibili.
    • Perché sembra che le dinamiche lato server. OP chiedeva, per il dinamismo sul lato client.
  9. 3

    L’unico modo per fare questo lavoro per IE è al server web per trattare le richieste di *.ico per chiamare il vostro lato server, linguaggio di scripting (PHP, .NET, ecc). Anche il programma di installazione *.ico per reindirizzare a un singolo script e script di fornire il corretto file favicon. Sono sicuro che ci sarà ancora alcuni interessanti problemi con la cache, se si vuole essere in grado di rimbalzare avanti e indietro nel browser e tra i diversi favicon.

  10. 3

    C’è una sola soluzione per chi fa uso di jQuery:

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

    Secondo WikiPedia, è possibile specificare il file favicon per caricare utilizzando il link tag nel head sezione, con un parametro di .

    Per esempio:

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

    Immagino che se si vuole scrivere alcuni contenuti dinamici per la chiamata, si avrebbe l’accesso ai cookie in modo che si poteva recuperare le informazioni di sessione che modo e presentare i contenuti appropriati.

    Si può cadere fallo di formati di file (CIOÈ riferito solo sostiene che è .Formato ICO, mentre quasi tutti gli altri supporta PNG e GIF) e, eventualmente, problemi di memorizzazione nella cache, sia sul browser e tramite proxy. Questo sarebbe a causa di originale itention di favicon, in particolare, per la marcatura di un segnalibro con un sito mini-logo.

    • molto di più ad esso che quello. stackoverflow.com/a/45301651/661584 domande frequenti / informazioni sulla generatore di sito vi sorprenderà – c’è un sacco di questo argomento.
    • Il web cambia molto in 9 anni.
  12. 2

    Sì assolutamente possibile

    • Utilizzare un querystring dopo la favicon.ico (e altri file link –
      risposta vedere link sotto)
    • Semplicemente assicurarsi che il server risponde alla “someUserId” con
      il file immagine corretta (che potrebbe essere statico regole di routing, o
      dinamica lato server), del codice).

    ad esempio

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

    Poi qualunque sia lato server linguaggio /framework si utilizza dovrebbe essere facilmente in grado di trovare il file in base all’id utente e servirlo in risposta a tale richiesta.

    Ma per fare favicon correttamente (in realtà un davvero argomento complesso), si prega di vedere la risposta qui https://stackoverflow.com/a/45301651/661584

    Un sacco molto più facile di lavoro con tutte le informazioni te.

    Godere.

    • Sì, il link è buono. Penso che il motivo principale per cui queste risposte non funziona in IE è perché non usare quella di default icona <link>, ma invece di cercare il apple-touch-icon o altro tipo di variante.
  13. 2

    O se volete una 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());

    Puntelli per https://koddsson.com/posts/emoji-favicon/

  14. 0

    Io uso favico.js nei miei progetti.

    Permette di modificare la favicon per una vasta gamma di forme predefinite e anche quelli personalizzati.

    Internamente utilizza canvas per il rendering e la base64 URL di dati per l’icona di codifica.

    La biblioteca possiede inoltre caratteristiche: icona distintivi e animazioni; presumibilmente, è anche possibile trasmettere in streaming il video della webcam in icona 🙂

    • Il collegamento e la biblioteca sono molto utili, si prega di fornire una descrizione di come funziona in modo che anche questo diventa una valida risposta alla domanda, come indicato.
    • Grazie @DimaTisnek. Ive updpated la mia risposta.

Lascia un commento