La favicon è una piccola icona associata a un sito web. Viene utilizzata principalmente per identificare visivamente una pagina o un sito all'interno del browser e può essere mostrata, ad esempio, accanto al titolo della pagina nella scheda aperta.
La favicon può comparire anche in altri punti del browser, come nei preferiti, nella cronologia o nei collegamenti salvati. Per questo motivo, anche se si tratta di un'immagine molto piccola, è utile scegliere un'icona semplice e facilmente riconoscibile.
Per aggiungere una favicon a una pagina HTML si utilizza il tag <link>, che deve essere inserito all'interno del tag <head>. L'attributo rel="valore" specifica il rapporto tra la pagina HTML e la risorsa collegata, mentre href="percorso" indica dove si trova il file della favicon.
Per una favicon tradizionale si utilizza rel="icon". È possibile specificare anche il formato del file tramite l'attributo type="valore", anche se per i formati più comuni i browser sono generalmente in grado di riconoscere autonomamente il tipo di immagine.
Un esempio di collegamento a una favicon in formato ICO è il seguente:
<link rel="icon" href="favicon.ico" type="image/x-icon">
Il file viene spesso chiamato favicon.ico e viene posizionato nella cartella principale del sito. Tuttavia, non è obbligatorio utilizzare questo nome o questo formato: è possibile utilizzare anche altri formati supportati dai browser.
Il collegamento alla favicon deve essere inserito nella sezione <head> della pagina HTML. La sezione <head> contiene infatti informazioni e risorse utilizzate dal browser per gestire la pagina, anche se normalmente non vengono mostrate direttamente all'interno del suo contenuto.
Ad esempio, una pagina HTML può essere strutturata in questo modo:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" ref="favicon.ico">
</head>
<body>
<h1>Benvenuto!</h1>
</body>
</html>
In questo caso, il browser utilizzerà il file favicon.ico come icona associata alla pagina.
L'attributo href="valore" indica il percorso del file che contiene la favicon. Il percorso deve essere corretto, altrimenti il browser non riuscirà a trovare l'immagine.
Se la favicon si trova nella stessa cartella della pagina HTML, è sufficiente utilizzare:
<link rel="icon" href="favicon.ico">
Se invece si trova all'interno di una cartella chiamata img, è possibile utilizzare:
<link rel="icon" href="img/favicon.ico">
È possibile utilizzare anche un percorso assoluto a partire dalla cartella principale del sito:
<link rel="icon" href="/img/favicon.ico">
Quando possibile, utilizzare percorsi coerenti con la struttura del sito aiuta a evitare errori quando la pagina viene spostata o quando vengono create nuove sezioni.
Le favicon possono essere realizzate in diversi formati. Tra quelli più comuni troviamo .ico, .png e .svg.
Il formato .ico è quello storicamente associato alle favicon e rimane ampiamente supportato. Il formato .png è invece molto utilizzato perché permette di ottenere immagini di buona qualità e supporta la trasparenza.
Anche il formato .svg può essere utilizzato per le favicon nei browser moderni. Essendo un formato vettoriale, un'immagine SVG può essere ridimensionata senza perdere qualità. Ne parleremo meglio nella lezione sulle icone e gli SVG.
Per una favicon semplice, PNG o SVG sono spesso scelte pratiche, mentre .ico rimane una soluzione molto compatibile.
Le favicon vengono visualizzate in dimensioni molto ridotte. Per questo motivo è importante utilizzare un'immagine quadrata e realizzare un'icona che rimanga riconoscibile anche quando viene mostrata in pochi pixel.
Per le immagini in formato PNG e ICO è possibile utilizzare diverse dimensioni a seconda delle esigenze. Tra le dimensioni comunemente utilizzate ci sono 16x16, 32x32 e 48x48 pixel. Per immagini utilizzate in contesti più grandi possono essere utili anche dimensioni superiori.
Non è quindi necessario utilizzare esclusivamente un'immagine da 48x48 pixel. Il browser può scegliere la dimensione più adatta tra quelle disponibili, a seconda del contesto in cui deve mostrare l'icona.
Una favicon dovrebbe essere quadrata perché il browser la visualizza all'interno di uno spazio generalmente quadrato. Un'immagine rettangolare potrebbe essere ridimensionata o risultare poco adatta allo spazio disponibile.
È inoltre consigliabile evitare dettagli troppo piccoli. Un'immagine che appare perfetta quando viene visualizzata a grandi dimensioni potrebbe diventare difficile da riconoscere quando viene ridotta alle dimensioni di una favicon.
Il formato PNG è una delle soluzioni più semplici per creare una favicon. È possibile collegare direttamente un file PNG tramite il tag <link>.
<link rel="icon" href="favicon.png" type="image/png">
In questo caso, l'attributo href="percorso" indica il percorso dell'immagine, mentre type="image/png" specifica che la risorsa è un'immagine PNG.
È possibile utilizzare anche un'immagine SVG come favicon. Gli SVG sono immagini vettoriali e possono essere ridimensionati senza perdere la qualità dell'immagine.
<link rel="icon" href="favicon.svg" type="image/svg+xml">
Il formato SVG è particolarmente utile quando la favicon contiene forme semplici, loghi o simboli. Prima di utilizzarlo, però, è importante considerare che il supporto e il comportamento possono variare in base al browser e al dispositivo.
Un sito può fornire più versioni della propria icona. Questo permette al browser di scegliere una risorsa più adatta al formato o al contesto in cui deve visualizzare la favicon.
Ad esempio, è possibile fornire una versione PNG e una versione SVG:
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="icon" href="favicon.png" type="image/png">
In situazioni più avanzate è quindi possibile creare un insieme di icone con formati e dimensioni differenti. Per un sito semplice, tuttavia, una singola favicon ben realizzata è generalmente sufficiente.
Le favicon non sono l'unico tipo di icona che può essere utilizzato da un sito. Quando una pagina viene aggiunta alla schermata principale di uno smartphone o viene utilizzata come applicazione web, possono essere necessarie icone specifiche per questo tipo di utilizzo.
Per questi casi si possono utilizzare anche il tag <link> con rel="apple-touch-icon" e altre configurazioni legate alle web app. Queste icone hanno uno scopo diverso dalla normale favicon mostrata nella scheda del browser.
Ad esempio:
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Questa configurazione è particolarmente utile quando vuoi migliorare l'aspetto del sito sui dispositivi mobili, ma non è indispensabile per una normale favicon del browser.
Dopo aver modificato una favicon, potresti non vedere immediatamente la nuova icona nel browser. Questo accade perché le favicon possono essere memorizzate nella cache, permettendo al browser di riutilizzare una versione precedentemente scaricata.
Se hai sostituito il file ma continui a visualizzare la vecchia icona, prova a ricaricare la pagina, svuotare la cache del browser oppure aprire il sito in una finestra privata. In alcuni casi può essere necessario attendere prima che il browser aggiorni la favicon memorizzata.
Una favicon deve essere semplice e facilmente riconoscibile. Considerando le sue dimensioni ridotte, utilizzare troppi dettagli, testi o elementi grafici può rendere l'icona difficile da distinguere.
È generalmente preferibile utilizzare un simbolo, una lettera o una versione semplificata del logo del sito. Se il logo originale è molto complesso, può essere utile creare una versione specifica per la favicon.
È inoltre consigliabile verificare l'aspetto dell'icona sia su sfondi chiari sia su sfondi scuri, perché il browser potrebbe utilizzare temi differenti.
Vediamo ora un esempio di pagina HTML che utilizza una favicon in formato PNG. Il file favicon.png si trova nella stessa cartella del documento HTML.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
<h2>Questa pagina ha l’icona</h2>
</body>
</html>
Dopo aver inserito il codice, salva il file HTML e aprilo con un browser. Se il percorso dell'immagine è corretto, la favicon dovrebbe comparire accanto al titolo della pagina nella scheda del browser.
Se non viene visualizzata, controlla innanzitutto che il nome del file e il percorso indicati nell'attributo href siano corretti. Verifica inoltre che il file sia effettivamente disponibile e che il browser supporti il formato utilizzato.