# Favicon

Favicon (in inglese:, in italiano:) è un termine inglese, contrazione di favorite icon. In informatica indica un'icona associata a una particolare pagina web. Solitamente la favicon è una piccola immagine, spesso un logo, pertinente ai contenuti del sito web correlato. La favicon viene visualizzata alla sinistra dell'URL nella barra degli indirizzi di un browser, nel momento in cui si naviga su un sito che ne è provvisto. L'icona è inoltre visualizzata nel menu dei preferiti di un browser. Nata come funzionalità di Microsoft Internet Explorer versione 5, in seguito è stata integrata su molti altri browser, tra cui Firefox, Opera, Safari, Chrome e Konqueror.

## Storia

A marzo del 1999, la Microsoft pubblicò Internet Explorer 5, che introdusse le favicon per la prima volta. Inizialmente le favicon erano file di computer chiamati favicon.ico messe all'interno della cartella radice di un sito web. Era usato nella sezione link "Preferiti" di Internet Explorer e compariva vicino all'indirizzo URL della barra degli indirizzi se la pagina era salvata in "Preferiti". Un inconveniente per la privacy era che il numero di visitatori che avevano aggiunto l'indirizzo a "Preferiti" poteva essere stimato dalle richieste di scaricamento del file favicon dal server. Questo inconveniente non è più presente, dal momento che tutti i browser odierni caricano il file favicon per mostrarlo nella barra degli indirizzi indipendentemente dal fatto che il sito sia stato aggiunto ai "Preferiti".

### Standardizzazione

Il formato favicon è stato standardizzato dal World Wide Web Consortium (W3C) nelle specifiche HTML 4.01, pubblicate a dicembre del 1999, e successivamente nelle specifiche XHTML 1.0 pubblicate a gennaio del 2000. Lo standard prevede un "elemento di tipo link" con un "attributo Rel" nel tag HEAD del documento per la definizione del formato, del nome e del percorso del favicon. Diversamente dallo schema precedente, il file può essere in una cartella di un sito web esterno e avere un formato file immagine.
Nel 2003 il formato .ico è stato registrato con la Internet Assigned Numbers Authority (IANA) sotto il tipo MIME. Ciononostante, quando si usa il formato .ico per mostrare immagini, Internet Explorer non può mostrare file forniti con quel tipo MIME standard. Una soluzione per Internet Explorer potrebbe essere quella di associare l'estensione .ico al tipo MIME non standard image/x-icon nella configurazione dei server web.
Google ha iniziato ad inserire le favicon dei siti web nei suoi risultati di ricerca.

## Utilizzo

Per aggiungere la favicon ad una pagina web è disponibile un apposito tag HTML per specificare la posizione dell'file all'interno del server web. Il tag viene posto nella sezione head di un file HTML con sintassi:
<link rel="icon" href="http://[percorso]/favicon.ico" />
In questo modo ogni immagine delle giuste dimensioni (16×16 o 32×32 ma anche 48×48 pixel, se .ico) può essere usata come favicon; alternativamente al formato .ico possono essere usati anche i formati .gif e .png di qualsiasi dimensione. Inoltre sfruttando le potenzialità del formato .gif è possibile creare delle favicon animate, anche se sono supportate solo da alcuni browser.
Per usare i formati GIF o PNG i tag rispettivamente necessari sono:
<link rel="icon" href="http://[percorso]/favicon.gif" type="image/gif" />
oppure:
<link rel="icon" href="http://[percorso]/favicon.png" type="image/png" />
Se si carica una favicon per la prima volta, oppure si sostituisce una precedente, per visualizzarla nel browser può essere necessario cancellare la cache, non essendo a volte sufficiente ricaricare la pagina.

## Supporto dei tipi di favicon

| Browser | Supporto nativo | Supporto nativo | Supporto nativo | Supporto nativo | Supporto nativo | Supporto nativo | Supporto nativo |
| Browser | ICO | PNG | GIF | GIF animato | JPEG | APNG | SVG |
| Google Chrome | Sì | Sì | Da 4.0 | Da 4.0 | Da 4.0 | No | Da 80.0 |
| Internet Explorer (deprecato) | Da 5.0 | Da 11.0 | Da 11.0 | No | No | No | No |
| Microsoft Edge | Sì | Sì | Sì | No | Sì | No | Sì |
| Mozilla Firefox | Da 1.0 | Da 1.0 | Da 1.0 | Sì | Sì | Da 3.0 | Almeno da 30.0 |
| Opera | Da 7.0 | Da 7.0 | Da 7.0 | Da 7.0 | Da 7.0 | Da 9.5 | Da 44.0 |
| Safari | Sì | Da 4.0 | Da 4.0 | No | Da 4.0 | No | No |

### Raccomandazione HTML5 per le icone in più dimensioni

L'attuale specifica HTML5 consiglia di specificare più dimensioni per le icone, utilizzando gli attributi rel="icon" sizes="elenco separato da spazi delle dimensioni dell'icona"all'interno di un tag <link>. È possibile fornire più formati di icone, inclusi formati "contenitore" come i file Microsoft .ico e Macintosh .icns, nonché file di grafica vettoriale scalabile includendo il tipo di contenuto dell'icona nel formato type="file content-type"all'interno del tag<link>.
A partire da iOS 5, i dispositivi mobili Apple ignorano la raccomandazione HTML5 e utilizzano invece il metodo proprietarioapple-touch-icon. Il browser web Google Chrome, tuttavia, selezionerà la dimensione corrispondente più vicina da quelle fornite nelle intestazioni HTML per creare icone di applicazioni di 128×128 pixel, quando l'utente sceglie Crea collegamenti all'applicazione... dal menu "Strumenti".

### Icone della schermata iniziale sui dispositivi mobili

Su iPhone e iPad Apple, così come sui dispositivi mobili Android, gli utenti possono aggiungere pagine web in formato icona come scorciatoie (anziché ogni volta digitale l'indirizzo sul browser) alla loro schermata iniziale. Queste icone di collegamento sono simili alle normali app e gli sviluppatori web possono fornire icone dedicate ai collegamenti su schermo in modo che l'utente non le confonda con le app installate sul proprio dispositivo e capisca subito di quale collegamento si tratta.

#### Dispositivi Apple

Per i dispositivi Apple con il sistema operativo iOS versione 1.1.3 o successiva, gli utenti possono aggiungere un sito Web alla schermata iniziale utilizzando il pulsante Aggiungi alla schermata iniziale all'interno del comando "condividi" in Safari.
Funziona per qualsiasi sito web. Ma affinché iOS visualizzi il collegamento con un'icona, un sito Web deve fornire un <link rel="apple-touch-icon" ...>nella sezione <head>dei documenti serviti dal sito Web. Se l'icona personalizzata non viene fornita, nella schermata iniziale verrà invece inserita una miniatura della pagina Web.
Le dimensioni dell'icona dell'app nelle diverse classi di dispositivi sono diverse. Le dimensioni consigliate per le icone sono 152x152 per iPad (fino all'iPad 2, uscito nel 2011), 167x167 per iPad con schermi Retina (iPad 3 e successivi) e 180x180 per iPhone. Se non viene fornita alcuna icona della dimensione corrispondente, iOS sceglierà l'icona più grande rel="apple-touch-icon"e la ridimensionerà automaticamente.

##### Codice di esempio

Il file icona a cui fa riferimento apple-touch-iconviene modificato per aggiungere angoli arrotondati. Nelle versioni iOS precedenti a iOS 7, venivano aggiunti un'ombra esterna e una lucentezza riflettente e con apple-touch-icon-precomposedpotrebbe essere fornita un'icona per indicare ai dispositivi di non applicare una lucentezza riflettente sull'immagine.
Neanche i browser o i dispositivi mobili richiedono HTML per recuperare queste icone. La radice del sito Web è la posizione predefinita per il file apple-touch-icon.png(in ordine di priorità).

#### Dispositivi Android

Sui dispositivi Android, gli utenti possono utilizzare la funzione Aggiungi alla schermata iniziale nel menu degli strumenti di Chrome per aggiungere una pagina Web alla schermata iniziale.
Funziona anche per qualsiasi sito Web, ma se non viene fornita alcuna favicon, viene utilizzata un'icona generica. Poiché le icone delle app Android hanno una dimensione di 48x48 punti, il sito web dovrebbe fornire le favicon con dimensioni multiple di 48x48 pixel. Per i moderni dispositivi ad alta risoluzione, Google consiglia di fornire icone in 192x192 pixel.

##### Codice di esempio

Android supporta anche i file Web Manifest, che consentono di integrare i siti Web in modo più approfondito con il sistema. Un Web Manifest è un file JSON che specifica i metadati per un'app Web progressiva. Consente allo sviluppatore di fornire non solo le icone, ma anche un nome breve da visualizzare sulla schermata iniziale e i colori del tema. Tuttavia, non è necessario fornire un file manifest affinché il comando Aggiungi alla schermata iniziale funzioni.

### Favicon animate

Vari browser come Chrome, Firefox e Opera supportano l'animazione delle favicon. Dal 2001 è stata aperta una segnalazione di bug per Firefox che richiede un modo per disabilitare questa funzione.

## Limitazioni e critiche

La favicon può portare a tempi lenti di caricamento della pagina ed errori 404.
Il W3C non ha standardizzato l'attributo rel, quindi ci sono altre parole chiave come shortcut icon che sono accettate anche dallo user agent.
Le favicon vengono spesso manipolate nell'ambito di attacchi di phishing o intercettazioni contro le pagine Web HTTPS. Molti browser Web visualizzano le favicon vicino ad aree dell'interfaccia utente del browser Web, come la barra degli indirizzi, che vengono utilizzate per comunicare se la connessione a un sito Web utilizza un protocollo sicuro come TLS. Modificando la favicon rendendola un'immagine familiare come un lucchetto, un utente malintenzionato può tentare di indurre l'utente a pensare di essere connesso in modo sicuro al sito Web visualizzato. Gli strumenti di attacco man-in-the-middle automatizzati come SSLStrip utilizzano questo trucco. Per eliminare questo, alcuni browser Web come Firefox o Google Chrome visualizzano la favicon all'interno della scheda mentre mostrano lo stato di sicurezza del protocollo utilizzato per accedere al sito Web accanto all'URL.
Poiché le favicon si trovano solitamente alla radice della directory del sito sul server, possono essere utilizzate con una certa affidabilità per rivelare se un client Web è connesso a un determinato servizio. Funziona sfruttando la funzionalità di reindirizzamento dopo il login di molti siti Web, richiedendo la favicon in un URL di reindirizzamento dopo il login e testando la risposta del server per discernere se all'utente viene fornita la risorsa richiesta (il che significa che l'utente è loggato al servizio), o invece reindirizzato alla pagina di login (il che significa che non è loggato al servizio).
Nel 2021 i ricercatori dell'Università dell'Illinois hanno dimostrato un metodo per il monitoraggio del browser utilizzando le favicon.

### CMS

Il malware favicon crea file.icoche contengono codice PHP dannoso, andandosi a sostituire alla favicon originale del CMS. Questo codice è noto per eseguire azioni pericolose sui siti Web come URL injection, creazione di account "amministratore" in WordPress e Drupal, installazione di spyware e trojan, creazione di pagine di phishing. Inquina anche il server con file di spam e il codice dannoso viene aggiunto a index.php e ad altri file PHP che includono il file.ico.
Attacchi di skimming (in cui l'hacker inietta codice dannoso in un sito Web ed estrae i dati da un modulo che l'utente ha compilato) hanno già incorporato favicon dannose e avuto un impatto negativo su aziende note come Tupperware, Smith & Wesson, Macy's e British Airways.
Le favicon possono essere sfruttate anche per creare attacchi omografici.