306

Tutti sanno come impostare un collegamento favicon.ico in HTML:

<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">

Ma penso sia sciocco che per una minuscola icona a diversi byte sia necessaria un'altra richiesta HTTP . Quindi mi chiedevo, come avrei potuto rendere quell'immagine parte di uno sprite (ad esempio background-position=0px -200px;) per accelerare e salvare quella preziosa richiesta HTTP. Come posso ottenere questo in un'immagine sprite esistente con il mio logo e altre opere d'arte?

Il robot che punta a favicon.ico, numero articolo 31 sul grafico a cascata, è il mio animale domestico ZAM. Di solito è più felice e ha un buon punto per farmi sapere che è tempo di alcuni aggiornamenti creativi sul web, anche se lui e io non siamo d'accordo sul suo vestito, che penso sia un po 'sciocco oggi ...

inserisci qui la descrizione dell'immagine

— Sam
fonte

47

Non è sciocco che non esiste ancora un modo per combinare .css / .js / .png / .html in un singolo flusso ottimizzato? Avresti pensato che qualcuno avrebbe avuto questa idea ormai

— RichardTheKiwi

9

@Richard correlati: risposte multipart e Google hanno un'iniziativa per un nuovo protocollo web ottimizzato che risolve questo problema, ho dimenticato il suo nome ... Modifica : Si chiama SPDY . Ma questo è lontano nel futuro, ovviamente.

— Pekka,

9

@Richard aka cyberkiwi, puoi mettere tutto in un file html con data:valori per immagini e script in linea.

— zzzzBov

39

a proposito, bravo uomo abbozzato :)

— Fatih Acet

18

+1 per lo schizzo :)

— Giuliano

140

Un piccolo miglioramento alla risposta di @ yc è l'iniezione della favicon con codifica base64 da un file JavaScript che verrebbe normalmente utilizzato e memorizzato nella cache, e anche la soppressione del comportamento standard del browser di richiesta favicon.icoalimentandolo con un URI di dati nel metatag pertinente .

Questa tecnica evita la richiesta http aggiuntiva ed è confermata per funzionare nelle ultime versioni di Chrome, Firefox e Opera su Windows 7. Tuttavia, non sembra funzionare almeno in Internet Explorer 9.

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- Suppress browser request for favicon.ico -->
        <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
        <script src="script.js"></script>
...

script.js

var favIcon = "\
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrUlEQVR42mNkwAOepOgxMTD9mwhk\
[...truncated for brevity...]
IALgNIBUQBUDAFi2whGNUZ3eAAAAAElFTkSuQmCC";

var docHead = document.getElementsByTagName('head')[0];       
var newLink = document.createElement('link');
newLink.rel = 'shortcut icon';
newLink.href = 'data:image/png;base64,'+favIcon;
docHead.appendChild(newLink);

/* Other JS would normally be in here too. */

Demo: turi.co/up/favicon.html

— Marcel
fonte

3

+1 bella scoperta memorizzata nella cache @Marcel. PS I caratteri nel HTTP Headers Responsemio file .ico hanno quasi le stesse dimensioni della mia icona !! Come ti piace?

— Sam,

2

@ Sam: ho notato che la base64 di un equivalente PNG del file favicon.ico Stack Overflow era la metà della dimensione. Bello e compatto.

— Marcel,

1

eeehm non sono sicuro se capirò cosa intendi: 'il file aveva la metà della dimensione di ...? File PNG come icon.png? o vuoi dire che l'equivalente base64 di esso è più piccolo quando il suo png è formattato al posto dell'icona formattata o gif? curioso. Saluti amico!

— Sam,

1

@ Sam: stavo confrontando la base64 di questo PNG con la base64 di questo file ICO . La versione PNG, utilizzata nel mio codice di esempio sopra, ha la metà delle dimensioni.

— Marcel,

1

ooh, vedo, questo rende la tua risposta 64 di base e l'uso generale del formato PN64 base64 la scelta preferita allora giusto?

— Sam,

149

Penso che per la maggior parte non si traduca in un'altra richiesta HTTP in quanto questi vengono di solito scaricati nella cache del browser dopo il primo accesso.

Questo è in realtà più efficiente di una qualsiasi delle "soluzioni" proposte.

— James Anderson
fonte

53

Questa è l'unica risposta sensata. Questo è un problema che non richiede correzione.

— JoDG

1

James, la mia soluzione è davvero solo una possibilità, ma che non consiglierei a nessuno. Tuttavia, sembra che la maggior parte dei browser emetterà una nuova richiesta HTTP per la favicon all'inizio di una nuova sessione del browser. E non restituisce sempre un 304.

— Yahel

4

Il browser effettuerà comunque una chiamata HEAD anche se si trova nella cache del browser, quindi avrai comunque l'overhead di una richiesta HTTP.

— dietbuddha,

3

In realtà tutto dipende dal browser. Molti di loro cercheranno sempre una favicon in alcune località anche se la pagina non ne parla e fanno una chiamata HEAD per ogni aggiornamento.

— David Costa,

14

La favicon ha bisogno di un'intestazione a lunga scadenza, proprio come qualsiasi buona risorsa statica. Con ciò, anche le chiamate HEAD vengono soppresse.

— Paul Alexander,

102

Potresti provare un URI di dati. Nessuna richiesta HTTP!

<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">

A meno che le tue pagine non abbiano una cache statica, la tua favicon non potrebbe essere memorizzata nella cache e, a seconda delle dimensioni dell'immagine della tua favicon, il tuo codice sorgente potrebbe diventare gonfio di conseguenza.

Le favicon URI dei dati sembrano funzionare nella maggior parte dei browser moderni; Ho funzionato nelle ultime versioni di Chrome, Firefox e Safari su un Mac. Non sembra funzionare in Internet Explorer, e forse in alcune versioni di Opera.

Se sei preoccupato per Old IE (e probabilmente non dovresti esserlo in questi giorni), potresti includere un commento condizionale di IE che carica l'attuale favicon.ico in modo tradizionale, poiché sembra che Internet Explorer precedente non lo faccia supporto dati URI Favicons

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `

Includi il file favicon.ico nella tua directory principale per coprire i browser che lo richiederanno in entrambi i modi, poiché per quei browser, se stanno già controllando qualunque cosa tu faccia, potresti anche non sprecare la richiesta HTTP con una risposta 404 .

Puoi anche usare la favicon di un altro sito popolare che probabilmente avrà la sua favicon memorizzata nella cache, come http://google.com/favicon.ico, in modo che venga servita dalla cache.

Come hanno sottolineato i commentatori, solo perché puoi farlo non significa che dovresti, poiché alcuni browser richiederanno favicon.ico indipendentemente dai trucchi che inventiamo. La quantità di overhead che risparmieresti in questo modo sarebbe minuscola rispetto ai risparmi che otterresti facendo cose come il gzipping, usando intestazioni con scadenza a lungo termine per il contenuto statico, minimizzando i file JavaScript, inserendo immagini di sfondo in sprite o URI di dati , offrendo file statici da una CDN, ecc.

— Yahel
fonte

1

@Pekka sì, non è davvero una soluzione pratica, dal momento che l'URI dei dati con un peso in più di byte su pagine non memorizzate nella cache probabilmente supererebbe il peso di quella richiesta HTTP. Forse OP può iniettare la favicon nel DOM in modo asincrono.

— Yahel

4

@Sam Mi dispiace, capisco cosa significa @yc ora, errore mio. Ovviamente puoi accedere perfettamente <link rel>all'elemento nel browser tramite JavaScript, che dovrebbe essere possibile. Ho anche visto un gioco programmato in quel modo ... tuttavia non sembra funzionare in IE, e probabilmente non impedirà la /favicon.icorichiesta di ricerca predefinita

— Pekka

2

@Pekka, capisco. PS è un gioco irriconoscibile! Fa vergognare tutto il mio schermo immobiliare, dal momento che tutto ciò che serve è che 16x16 pixel haha. Questo collegamento ipertestuale apre alcune possibilità su ciò che è effettivamente possibile con quella favicon.

— Sam

3

In caso di mancata dichiarazione favicon, tutti i browser richiederanno automaticamente l'URL predefinito /favicon.icoin un tentativo cieco di localizzarlo. Quindi, se lasci la favicon <link>(per aggiungerla successivamente tramite Javascript) probabilmente peggiorerai le cose.

— Már Örlygsson,

2

Basta usare favicon.ico per salvare la tua gif trasparente :)

— markijbema

21

Puoi usare favicon con codifica base64, come:

<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAACbUlEQVRIx7WUsU/qUBTGv96WSlWeEBZijJggxrREdwYixMnByYEyOvgfsBAMG0xuDsZ/QGc3NDFhgTioiYsmkhBYGLSBkLYR0va8gSjvQXiIT7/l5ibfOd/v3pN7gSmVSMTj8ThRfzdYk8lkMpl83/+AVFVVVXU0eHiVJEmSpB8DIcpkMplsdhCYz+fzhQJROBwOh8PDQN+oQCAQCASIRFEURZHI45GkP0/e7Xa73e70AMJnjel0Op1OA6oaDB4eAkAw6PcDvZ5t6zrw/Hx2trAw/cHYZ426ruu6DtzcGEYuBzQa19etFvD4WKtls4AoRqMPDwBjjLGPrt84ilgsFovF6EOapmmaRiP6O/jbAIguL4vFYpHGqlKpVCoVomq1Wq1Wibxer9fn+w+Q9+cUiUQikQhNrfdgWZZlWf4yyGhj27Zt254MUK/X6/X6F0aiKIqiKIOCYRmGYRjGZADLsizLIgqFQqHV1SkAnp5OTn79ItK0qyuPZ7SxaZqmaU4GKJfPzxmbfAPc/f3pqaIQLS8vLtZqgOP0bYyJoiAARC5Xrwf4/Vtbb2+Th1YqlUqlErC01GgkEkCz2WxyHLC+LsuiCAiCJLlcgM+3vd3pcBzXaJTLR0dEs7Ptdv+D4TiOG/A6DsBxQKvV621sAGtru7vl8ngAjuvXv7xcXIgiwNjMjCj2h+k4fQfPA4LA8xwHCO323V2hABiG223bwPy8xwMAbvfcHGMAY32j47y+3t4OAsZpZ2dzEwAsy7IcBxAExhwHMIxOx3GAlZVUyjT/1WFIudzenstFlEpFo9M8o+Pj/X2eJzo4SCR4fnzdb2N4Pyv9cduVAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />

— Dongsheng Cai
fonte

1

Suggerimento: la stringa codificata in base64 utilizzata in questa risposta è un file PNG e non funzionerà con IE10 o versioni precedenti.

— sibbl,

2

Nel caso qualcuno volesse sapere è il pinguino di Linux.

— Martlark,

17

Ho trovato una soluzione interessante in questa pagina . È tedesco ma sarai in grado di capire il codice.

Metti i dati base64 dell'icona in un foglio di stile esterno, quindi verrà memorizzato nella cache. Nella testa del tuo sito web devi definire la favicon con un id e la favicon è impostata come una background-imagenel foglio di stile per quell'id.

link#icon {
    background-image:url("data:image/x-icon;base64,<base64_image_data>");
}

e l'html

<html>
    <head>
        <link id="icon" rel="shortcut icon" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" href="/styles.css" />
        ...
    </head>
    <body>
        ...
    </body>
</html>

— Felix Geenen
fonte

8

Una persona con 74.947 reputazione ha detto da qualche parte in questa pagina: "Non puoi!" ... Poi un'altra persona con meno di 50 reputazione ha detto: "Puoi!" Ciò significa che la ricerca di soluzioni e la spinta innovativa concreta non hanno legami o relazioni con la reputazione acquisita? ... Bene, allora è semplicemente fantastico!

— Sam

4

Ho appena confermato che questa soluzione non funziona - almeno non in Chrome 10 e Firefox 3.6 su Windows

— Már Örlygsson

13

Ho appena confermato che questa soluzione funziona - almeno in Chrome 10.0.648 su W7 64 bit e in FF 4.0 su W7 64 bit

— Sam

4

LOL, ho confermato che le due affermazioni precedenti sembrano contraddittorie, nonostante i numeri di versione leggermente diversi dubito che il comportamento di Chrome sia cambiato molto. Firefox potrebbe aver fatto da 3.6 a 4, ma è improbabile che Chrome 10 sia cambiato molto con un aggiornamento minore.

— dyasta,

Posso confermare che questo funziona su Chrome 83 e Firefox ESR 68 su Ubuntu 20.04 e posso confermare che non funziona per impedire l'hit su /favicon.ico. Quindi ottieni l'immagine ma non impedisci la connessione SSL aggiuntiva. Poiché quello era l'obiettivo, questo è un fallimento.

— Wil

14

Buon punto e bella idea, ma impossibile. Una favicon deve essere una singola risorsa separata. Non è possibile combinarlo con un altro file di immagine.

— Pekka
fonte

1

Forse sono cieco, ma l'unico posto in cui vedo la favicon di Ricerca Google è in uno sprite: google.com/search?q=foo

— Yahel

4

@yc google.com/favicon.ico è il luogo in cui i browser lo cercheranno automaticamente

— Pekka

3

@yc non sei cieco, ti sei dimostrato degno di una risposta molto creativa lassù ... come Pekka ha già sottolineato /favicon.icoè dove i browser guarderanno automaticamente. Ora arriva la vera cattiva notizia: se la favicon NON esiste, significa una penalità di errore 404 che causerà anche un leggero ritardo !! Non sembra esserci via di fuga da questo sotterraneo favicon. Sono così piccoli ma oh così potenti ... dannazione :)

— Sam

Vedi la mia risposta stackoverflow.com/questions/5199902/… per il modo corretto di accelerare il modo corretto.

— Matt Joiner,

8

Va notato che questa dovrebbe, realisticamente, essere una richiesta una volta, praticamente per sempre. Come per tutto il resto, i timer di cache lunghi e gli 301 appropriati restituiti dal server trasformeranno la richiesta favicon in un punto controverso (a meno che non esista - yikes!).

— Kevin Peno,

9

Importa davvero?

Molti browser caricano la favicon come una priorità bassa in modo che non blocchi comunque il caricamento della pagina, quindi sì è una richiesta aggiuntiva ma non si trova su alcun percorso critico.

La soluzione accettata è orribile poiché fino a quando JS non sarà stato recuperato ed eseguito, tutti gli elementi DOM sottostanti verranno bloccati dal rendering e non ridurrà il numero di richieste!

— Andy Davies
fonte

8

La soluzione corretta è utilizzare il pipelining HTTP .

Il pipelining HTTP è una tecnica in cui più richieste HTTP vengono scritte in un singolo socket senza attendere le risposte corrispondenti. Il pipelining è supportato solo in HTTP / 1.1, non in 1.0.

È necessario che i server lo supportino, ma non sono necessariamente parti.

Il pipelining HTTP richiede sia il client che il server per supportarlo. I server conformi HTTP / 1.1 sono necessari per supportare il pipelining. Ciò non significa che i server siano tenuti a rispondere alla pipeline, ma che non debbano fallire se un client sceglie le richieste della pipeline.

Molti client browser non lo fanno, quando dovrebbero.

Il pipelining HTTP è disabilitato nella maggior parte dei browser.

Opera ha il pipelining abilitato di default. Utilizza l'euristica per controllare il livello di pipelining impiegato in base al server collegato.

Internet Explorer 8 non reindirizza le richieste, a causa di preoccupazioni relative ai proxy con errori e al blocco head-of-line.

I browser Mozilla (come Mozilla Firefox, SeaMonkey e Camino) supportano il pipelining ma sono disabilitati per impostazione predefinita. Utilizza alcune euristiche, in particolare per disattivare le pipeline per i server IIS.

Konqueror 2.0 supporta il pipelining, ma è disabilitato per impostazione predefinita. [Citazione necessaria]

Google Chrome non supporta il pipelining.

Ti consiglierei di provare ad abilitare il pipelining in Firefox e provarlo lì, o semplicemente usare Opera (shudder).

— Matt Joiner
fonte

7

Pipeline di un'ottimizzazione eseguita nel livello di trasporto. Implica ancora un round-trip HTTP separato per la favicon, che è quello che la domanda pone.

— Már Örlygsson,

@ Már Örlygsson non è corretto. Un round trip significa che il client deve effettuare una richiesta e quindi attendere che la richiesta venga elaborata e che la risposta venga scaricata. Pipelining significa che la richiesta verrà già inviata mentre si attende ancora il completamento della richiesta precedente, quindi mentre si verificano gli stessi passaggi, il ritardo che causerà non sarà lo stesso ...

— Peter

1

Sam non può attivare il pipelining in tutti i browser dei suoi visitatori, quindi in questo senso questa soluzione non farà caricare il suo sito più velocemente, tranne che per lui personalmente.

— Már Örlygsson,

3

@ Már Örlygsson e i suoi sostenitori: non è fatto nel livello dei trasporti. Nei modelli del mondo reale, tutto ciò avviene nel livello dell'applicazione. Teoricamente il pipelining dovrebbe essere a livello di sessione.

— Matt Joiner,

4

Non discuterò di quella semantica con te. Il fatto sostiene ancora che Sam non può "usare il pipelining" (pulito così com'è) per caricare il suo sito più velocemente per i suoi visitatori, dato che il supporto per il pipeline è A) chiazzato mentre fai notare te stesso e B) opt-in da parte di ciascuno singolo utente.

— Már Örlygsson,

6

Non proprio una risposta alla domanda, ma semplicemente per complimentarmi con le risposte fornite da Marcel e yahelc, offro una soluzione elegante al problema della favicon 404.

Poiché alcune app e browser e quant'altro verificano la presenza di favicon.com e se l'icona non si trova nella radice del sito, puoi semplicemente rispondere alla richiesta con l' intestazione della risposta 204 .

Esempi di Apache:

Opzione 1 di Apache (e la mia preferita), una sola riga nel tuo .htacces o .conf:

Redirect 204 /favicon.ico

Opzione due di Apache:

<Files "favicon.ico">
    ErrorDocument 204 ""
</Files>

Per ulteriori letture, c'è un bel post sul blog di Stoyan Stefanov su http://www.phpied.com/204-no-content/

— Anthony Hatzopoulos
fonte

Sì, ma poiché la richiesta è in corso e la favicon viene spesso utilizzata in modo significativo, credo che valga la pena fornire l'icona anziché una risposta vuota. La compressione dell'icona tramite gzip spesso la porterà a una singola dimensione del pacchetto TCP

— Andy Davies,

5

Mi dispiace, ma non puoi combinare la favicon con un'altra risorsa.

Ciò significa che hai sostanzialmente due opzioni:

Se sei a tuo agio con il tuo sito che non ha una favicon, puoi semplicemente avere il hrefpunto su una risorsa non icona che è già stata caricata (ad esempio un foglio di stile, un file di script o anche qualche risorsa che beneficia del pre-recupero .)
(I miei brevi test indicano che questo funziona su quasi tutti i principali browser, se non su tutti.)
Accetta la richiesta HTTP aggiuntiva e assicurati che nel tuo file favicon siano impostate le intestazioni aggressive del controllo della cache HTTP.
(Se hai altri siti Web sotto il tuo controllo, potresti persino farli precaricare di nascosto la favicon per questo sito Web, insieme ad altre risorse statiche.)

PS Soluzioni creative che non funzioneranno :

Lo strano trucco CSS-data-ururi (collegato dal commentatore Felix Geenen) non funziona .
L'uso di Javascript per eseguire un'iniezione ritardata <link>dell'elemento favicon (come suggerito dall'utente @yc) probabilmente peggiorerà le cose, generando due richieste HTTP.

— Már Örlygsson
fonte

1

altre soluzioni che non funzioneranno: più icone in un .ico e l'utilizzo dell'ico in un tag immagine nella speranza che visualizzi un'altra immagine lì, che come favicon. Raccogliere la favicon con un altro file.

— markijbema,

5

È un'ottima idea, ma se Google non lo ha fatto sulla sua home page, scommetto che non è (al momento) possibile.

— cusimar9
fonte

13

Google è fantastico, ma pensare in quel modo sembra controproducente e soffocante. Ci sono sempre modi nuovi, migliori e molto possibili di fare le cose, e non devi lavorare per un leader del settore per inventarli.

— Errore di sintassi

10

Ovviamente, Google prende le loro idee da SO, non viceversa;)

— user123444555621

3

Buona risposta, se Google potesse rendere più veloce la loro pagina, lo farebbero.

— David d C e Freitas,

3

È possibile utilizzare PNG a 8 bit anziché il formato ICO per un footprint di dati ancora più piccolo. L'unica cosa che devi cambiare è usare "data: image / png" invece di "data: image / x-icon" intestazione del tipo MIME:

<link
  href="data:image/png;base64,your-base64-encoded-string-goes-here"
  rel="icon" type="image/png"
/>

L'attributo "type" può essere "image / png" o "image / x-icon", entrambi funzionano per me.

Puoi convertire ICO in png a 8 bit usando gimp o convert:

convert favicon.ico -depth 8 -strip favicon.png

e codificare il binario PNG nella stringa base64 usando il comando base64:

base64 favicon.png

— Andrej
fonte

2

Ecco il modo più semplice:

<!DOCTYPE html><html><head> 
<link rel="shortcut icon" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAA
lwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4
OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3
JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9y
Zy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG
lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25z
LmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj
4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAg
PC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABLJJREFUWAnFV+trW2UY/yVN0j
S32q6bnWunQ1e11k3YXMUy8AbDoSBDv4mfFPTj/gD9ug/7B/woqCCISnGItcyppbgN
Rhn2st5G2yxt1svSJe1yPYnP703fcs7JSZo4YS9Ncs57eX6/5/Y+T12fX7hYdAHy92
iG+1GCU2X3/6V3k9sNl8uFUqnUkMiHJkDfuQV4M7WFbC4Hr8fTEAlPQ3RtmwleFI0z
mQxO95/EQP8pLEaj+PaHQbS3RmAUi7YTla8PRYDGLhgGPnz/HI719Srp0VgMhszRHf
WM/+wC+jy1tY2zb72uwOl7WmPi1gwCfr887609CdZtAfpZa0XNc/k8nug8gBPHjylF
uTY7N4/JmVmEQkFlBbWwx9eeBNyiKbVLZ7IKlEAtomEmm0Vvz1G0tLQoiKXoHXzz/Y
9qX75QgM/jhb/ZB5KtlRk1CdDM2+k0SKLn6SM4KBoXRHhsOY6J2XmsbWxgdv42Jqdn
cH3sJo4c7sKhg50oFku4s7yMuYUleJqahEizzDm7pCoBgt8XH7/Q8wzOvPmamLtz1w
UMvPjdu1hYjIrPp9He9hjOf/oJ9rW37e5hBiwuRXFpaBjR5RWEgkFHEq4vLlysuDkI
nhTwV068hPfeOau0oJ21KXUsKNvbvux7suKq734axNT0nLhOLCHuNI8KC1B4Wg7RnO
++fUaB03x0gxlYA1EYZcoxta73cJ3PD8SFuWxOnbdCl2k4EuCN9sbpATT7fMpsBLcP
DcR5gpuHBk8mU/jyq6+xcW8TYckMpziwSKagvKTX4x0deOpwt5JpBjKD1PM8eu064q
vraI2EHcEpw0pAqnK+YODA/n3wS6pxNEpAa58TK05IdoQl+AyjoGQ5fVkI0JbFoqEi
tlFgu/C01IeM3B2UY4s7y1YrAbXUeEm1SNx58Un8sDJKiNbsdiwEaD6m4JakoFPAOA
HZ57TleFs+2d2lMsotl1G1YSHATR5PEzYSCXXt8p2kGh36zED/y+o8qyNridOwEOBB
j5htI7GJ1bU1p/11zZX9XkJ31yF89MG5nTpScAxoCwFKZ86z8NxeWKwLrNom7YrjL/
bh/GcfY39Hu2RYJYkKAvR9KBjAjZv/CJHMThQ37gYS066IhMNgWmpSZtIVBHio2euV
AhLH+OSU2qsFmQ828jx69Rpi8VX4vJX9YgUBCmbBCIsVhv8cQTKVKt/jDsFIYvpjJ0
RLUuPYygqujF5FG3tEo7IkOxKgUObwvcR9DF2+omRTmE5NDco5/dFzSoGd4sWaMvjL
kCJZJQmsV7FZC9bziBSQv2+M4Y+RUbWki5IGZXPC1oy/eo4buY9W/PnX3zC/uFTuEa
VJcRoV1dC8iSRawyFcGv4dqe1tvHrqpFS1EFbX1zE+dQvT0hVlpNSyzvc+exR9zz8n
zUmbVL8ELv81grHxSbTK/lrtuWNDYibBZ14iSSEQlP6PGbIpZTadzkg/6Fdr1PaBvI
cCLYgIYa7TKsFAYNdtdpn6vaYF9CYCREQTxkBS/gPySZb42SvIvDhYNQRsQBlkal3i
R/cSWka137oI8LAOQF7VDDiDwHrw3Si/l9eFl5CtZzhmQa2DZlynfXut28/8C/JOMz
7+5SRKAAAAAElFTkSuQmCC">
</head></html>

Quale icona rappresenta? Rispondi e vota sotto!

— rjobidon
fonte

1

L'icona della mela?

— styfle

2

Killer Solution nel 2020

Questa soluzione arriva necessariamente nove anni dopo la domanda iniziale, poiché fino a poco tempo fa la maggior parte dei browser non era in grado di gestire favicon in .svgformato.

Non è più così.

Vedi: https://caniuse.com/#feat=link-icon-svg

1) Scegli SVG come formato Favicon

In questo momento, nel giugno 2020, questi browser sono in grado di gestire Favicon SVG :

Cromo
Firefox
Bordo
musica lirica
Chrome per Android
KaiOS Browser

Nota che questi browser non possono ancora:

Safari
Safari iOS
Firefox per Android

Tenendo presente quanto sopra, possiamo usare con sicurezza un Favicon SVG .

2) Presentare SVG come URI di dati

L'obiettivo principale qui è evitare le richieste HTTP.

Come altre soluzioni hanno già detto, un modo abbastanza intelligente per farlo è utilizzare un URI dei dati anziché un URL HTTP .

Gli SVG (in particolare i SVG di piccole dimensioni) si prestano perfettamente agli URI dei dati, poiché quest'ultimo è semplicemente in chiaro (con caratteri potenzialmente ambigui codificati in percentuale) e il primo, essendo XML, può essere scritto come una lunga riga di testo in chiaro (con un'influenza di codici percentuali) incredibilmente semplice.

3) L' intero SVG è un Emoji

Nel dicembre 2019, Leandro Linares è stato uno dei primi a rendersi conto che da quando Chrome si era unito a Firefox nel supportare SVG Favicons, valeva la pena sperimentare per vedere se una favicon potesse essere creata da un'emoji:

https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/

L'intuizione di Linares aveva ragione.

Diversi mesi dopo (marzo 2020), il pirata del codice Lea Verou realizzò la stessa cosa:

https://twitter.com/leaverou/status/1241619866475474946

E le favicon non erano più le stesse.

4) Implementazione autonoma della soluzione:

Ecco un semplice SVG:

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 16 16">

  <text x="0" y="14">🦄</text>
</svg>

Ed ecco lo stesso SVG di un URI di dati :

data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E

E, infine, ecco l' URI dei dati come Favicon:

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />

5) Altri trucchi

Poiché Favicon è un file SVG, è possibile applicare qualsiasi numero di effetti filtro (sia SVG che CSS).

Ad esempio, accanto al favicon di unicorno bianco sopra, possiamo facilmente creare un favicon di unicorno nero applicando il filtro:

style="filter: invert(100%);"

Favicon Unicorno nero:

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%20style='filter:%20invert(100%);'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />

— Rounin
fonte

Non è sciocco che una piccola favicon richieda ancora un'altra richiesta HTTP? Come posso mettere la favicon in uno sprite?

Demo: turi.co/up/favicon.html

1) Scegli SVG come formato Favicon

2) Presentare SVG come URI di dati

3) L' intero SVG è un Emoji

4) Implementazione autonoma della soluzione:

5) Altri trucchi