Favicon: dimensioni, formati e tag HTML
Una favicon è un file piccolo, ma browser, telefoni e web app installate cercano ciascuno dimensioni diverse. Questa guida spiega quali file servono a un sito web, come dichiararli in HTML e come progettare un’icona che resti leggibile a 16 pixel.
Che cos’è una favicon
Una favicon (abbreviazione dell’inglese «favourites icon», icona dei preferiti) è la piccola immagine che identifica un sito web nelle schede, nei segnalibri e nella cronologia. I telefoni ne usano una versione più grande quando il sito viene aggiunto alla schermata Home, le web app installate usano le icone del loro manifest e alcuni motori di ricerca mostrano la favicon accanto ai risultati. Poiché questi contesti usano dimensioni diverse, un sito web di solito fornisce un piccolo gruppo di file.
Favicon ICO, PNG e SVG
| Formato | Cosa contiene | Da sapere |
|---|---|---|
ICO (favicon.ico) |
Più dimensioni in un unico file, spesso 16, 32 e 48 pixel | Il formato più vecchio. Molti browser richiedono /favicon.ico dalla radice del sito anche quando la pagina non vi rimanda, quindi è un’utile soluzione di riserva. |
| PNG | Una dimensione per file, con trasparenza | Si dichiara con un attributo sizes, così il browser può scegliere il file adatto. Si usa anche per l’icona Apple touch e per le icone del manifest. |
| SVG | Un disegno vettoriale che si adatta a qualsiasi dimensione | Supportato dalla maggior parte dei browser desktop attuali, ma non da tutti, quindi conserva anche i file ICO o PNG. Una favicon SVG può adattarsi a un tema scuro con il CSS. |
Un file ICO è un piccolo contenitore: un’intestazione elenca ogni immagine con la sua dimensione e la sua posizione, e le immagini possono essere memorizzate come dati PNG. Il Generatore di favicon di LeedyBox crea un favicon.ico con immagini PNG da 16, 32 e 48 pixel, più i file PNG per le altre dimensioni.
Dimensioni comuni e dove si usano
| Dimensione (pixel) | File tipico | Uso tipico |
|---|---|---|
| 16 × 16 | favicon-16x16.png, dentro favicon.ico | Schede e segnalibri su schermi standard |
| 32 × 32 | favicon-32x32.png, dentro favicon.ico | Schede su schermi ad alta densità, alcuni collegamenti |
| 48 × 48 | dentro favicon.ico | Icone di collegamento e del desktop più grandi su alcuni sistemi |
| 180 × 180 | apple-touch-icon.png | Icona della schermata Home su iPhone e iPad |
| 192 × 192 | android-chrome-192x192.png | Icona della schermata Home su Android, elencata nel manifest |
| 512 × 512 | android-chrome-512x512.png | Finestre di installazione e schermate di avvio delle web app |
Parti da un’immagine sorgente quadrata di almeno 512 × 512 pixel, o da un file SVG. Una sorgente piccola deve essere ingrandita per le icone più grandi e appare sfocata. Un logo non quadrato ha bisogno di spazio aggiuntivo attorno oppure deve essere ritagliato.
L’icona Apple touch non dovrebbe essere trasparente: alcuni dispositivi Apple mostrano le aree trasparenti in nero. Riempi invece lo sfondo con un colore. iPhone e iPad arrotondano gli angoli da soli, quindi il file può essere un semplice quadrato. Per approfondire i canali alfa, vedi come funziona la trasparenza in PNG e JPG.
I tag HTML e il web app manifest
Metti i file nella cartella principale del sito web e aggiungi questi tag all’interno del <head> di ogni pagina:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">Se hai anche una favicon SVG, aggiungi <link rel="icon" href="/favicon.svg" type="image/svg+xml">. Il manifest (site.webmanifest) è un piccolo file JSON con il nome del sito, un nome breve, le icone da 192 e 512 pixel, un colore del tema, un colore di sfondo e una modalità di visualizzazione come standalone. Se i file si trovano in un’altra cartella, modifica ogni percorso nei tag e nel manifest.
Progettare per dimensioni minuscole
- Punta sulla semplicità. A 16 pixel, linee sottili, testo piccolo e dettagli fini diventano una macchia sfocata. Un marchio semplificato, una singola forma o una o due lettere funzionano meglio di un logo completo con slogan.
- Usa un contrasto forte. Una netta differenza di luminosità tra l’icona e il suo sfondo conta più dei colori esatti del marchio.
- Lascia poco margine. Lo spazio vuoto rimpicciolisce l’icona visibile. Un piccolo margine può giovare alle icone più grandi, ma le favicon piccole sono più riconoscibili quando occupano la maggior parte del quadrato.
- Controlla la dimensione reale. Guarda l’icona con lo zoom al 100% in una scheda, non solo in un’anteprima ingrandita.
Temi scuri del browser
Molte persone usano una barra delle schede scura. Lì un logo scuro su sfondo trasparente può quasi scomparire, mentre un logo bianco può sparire in un tema chiaro. Le soluzioni più comuni sono una forma di sfondo piena o arrotondata dietro il logo, un contorno chiaro o una favicon SVG che cambia colori con una media query prefers-color-scheme (dove le favicon SVG sono supportate). Il generatore di LeedyBox mostra una barra delle schede chiara e una scura, così puoi confrontarle.
Aggiornare una favicon e la cache del browser
I browser conservano le favicon nella cache, a volte a lungo, quindi una nuova icona potrebbe non comparire subito dopo il caricamento. Un aggiornamento forzato o una finestra privata possono mostrare la nuova versione. Per far sì che chi torna sul sito la scarichi prima, cambia il nome del file o aggiungi una versione all’URL nei tag, ad esempio /favicon-32x32.png?v=2. Le icone nei segnalibri e nei risultati di ricerca possono metterci più tempo ad aggiornarsi. Dopo ogni modifica, prova il risultato nei browser e sui dispositivi che ti interessano.
Domande frequenti
Il file favicon.ico serve ancora?
Non è obbligatorio, ma è una semplice soluzione di riserva: molti browser e altri strumenti cercano /favicon.ico nella cartella principale di un sito. Occupa solo pochi kilobyte.
Posso usare un JPG come favicon?
Di solito i browser riescono a mostrarlo, ma il JPG non ha trasparenza e la sua compressione può sfocare i piccoli dettagli. I file PNG, ICO o SVG sono scelte migliori per le icone.
Perché la mia nuova favicon non compare?
Molto spesso la vecchia icona è ancora nella cache, oppure i percorsi nei tag HTML non corrispondono alla posizione in cui sono stati caricati i file. Apri direttamente nel browser l’URL di ogni file per verificare che si carichi.