Quali dimensioni deve avere una favicon?

Prepara più misure: 16x16 e 32x32 per le schede, 180x180 per le icone touch Apple e 192x192 più 512x512 per manifest Android e PWA. Un'unica favicon SVG può adattarsi automaticamente a qualsiasi dimensione.

Qual è il formato migliore per una favicon?

SVG è il più flessibile: si ridimensiona senza perdere qualità e può adattarsi alla modalità scura tramite media query CSS. Per un'ampia compatibilità, aggiungi anche un PNG 32x32 e il vecchio file favicon.ico, che può contenere più dimensioni.

Dove va inserito il file della favicon?

Metti favicon.ico nella radice del sito, dove i browser cercano automaticamente /favicon.ico. Specifica le altre misure con elementi link nell'head HTML: rel='icon' per PNG e SVG, rel='apple-touch-icon' per iOS.

Perché la favicon non si aggiorna?

I browser la conservano nella cache anche per settimane. Svuota la cache, aggiungi un parametro di versione all'URL, per esempio ?v=2, oppure riavvia il browser. Per i test puoi provare anche la navigazione in incognito.

Una favicon può essere animata?

In alcuni browser una GIF animata funziona tecnicamente, per esempio in Firefox, ma Chrome, Safari ed Edge mostrano soltanto il primo fotogramma. Non è una scelta consigliata per un sito in produzione.

Che cos'è Favicon? | Glossario

Una favicon è una piccola icona, in genere da 16x16 o 32x32 pixel, che rappresenta un sito nelle schede del browser, nei segnalibri e nei risultati di ricerca ed è uno degli elementi visivi più esposti del marchio sul web.

Formati e dimensioni

Le favicon sono passate da un singolo file ICO 16x16 a una serie di immagini in formati e misure diversi, ciascuno destinato a un contesto.

ICO (favicon.ico) è il formato storico. Può contenere più immagini nello stesso file, per esempio 16x16, 32x32 e 48x48. I browser cercano automaticamente /favicon.ico nella radice del sito anche senza un elemento link. Serve ancora per i browser meno recenti e alcuni ambienti aziendali.

PNG è il formato moderno più comune. I file delle varie misure, come 32x32, 192x192 e 512x512, vengono indicati con elementi <link> nell'head HTML. Supporta la trasparenza ed è compatibile con tutti i browser attuali.

SVG è il più flessibile. Un solo file si adatta a ogni dimensione senza pixel visibili e può includere CSS, per esempio @media (prefers-color-scheme: dark), per cambiare automaticamente tra modalità chiara e scura. Chrome, Firefox ed Edge supportano le favicon SVG.

L'icona touch Apple, un PNG 180x180, viene usata quando una persona aggiunge un sito alla schermata Home di iOS. Si dichiara con <link rel="apple-touch-icon"> e appare come icona arrotondata dell'app.

Una configurazione completa comprende in genere un PNG 32x32 per le schede, un PNG 180x180 per Apple, PNG 192x192 e 512x512 per Android e manifest PWA, un SVG scalabile con supporto per la modalità scura e favicon.ico come ripiego.

Dove appare la favicon

Le favicon sono più visibili di quanto sembri. Compaiono in:

Schede del browser — il contesto principale, a 16x16 o 32x32 pixel accanto al titolo. Le schede più strette possono mostrare soltanto l'icona.
Segnalibri ed elenchi di lettura — aiutano a riconoscere i siti in raccolte lunghe.
Cronologia del browser — identificano le pagine recenti accanto a titolo e URL.
Risultati di ricerca — Google e Bing le mostrano accanto ai risultati, offrendo una presenza discreta ma costante del marchio.
PWA e schermate Home mobili — le Progressive Web App e la funzione "Aggiungi a Home" usano le varianti più grandi come icona.
Gruppi e gestori di schede — usano la favicon come principale elemento visivo per distinguere i siti.

Come creare una favicon

Parti da un disegno semplice e riconoscibile. Deve restare leggibile a 16x16 pixel: loghi complessi, illustrazioni dettagliate e molto testo non funzionano a questa scala. Le favicon efficaci usano forme decise, buon contrasto e pochi dettagli.

Disegna l'icona a una dimensione grande, almeno 512x512, quindi riducila. Controlla ogni variante alla misura reale di visualizzazione, per esempio in una scheda del browser.

Nei flussi automatici, anche lo screenshot di un elemento HTML formattato, come una lettera colorata, una forma SVG o un'icona del marchio, può diventare la sorgente. L'immagine viene poi ridimensionata ed esportata nei formati necessari. In questo modo il team può generare e aggiornare le favicon tramite la pipeline di compilazione.

Un generatore dedicato può produrre tutte le dimensioni e i formati da un'unica immagine, insieme al codice HTML per collegarli.

In un vero flusso di pubblicazione

È più facile mantenere la coerenza se tutte le favicon derivano dalla stessa risorsa principale del sistema visivo. Invece di esportare a mano favicon.ico, icone touch e immagini del manifest, conserva una sorgente ad alta risoluzione e genera le misure durante la preparazione del rilascio. Si riducono così le divergenze tra schede, segnalibri, PWA e risultati di ricerca.

Errori comuni

Usare soltanto favicon.ico. Un unico ICO non copre icone touch Apple, manifest Android e modalità scura SVG. Offri l'intero insieme per una resa coerente.
Inserire troppi dettagli. A 16x16 pixel, linee sottili, testo piccolo e forme complesse diventano una macchia. Riduci il disegno all'elemento più riconoscibile.
Dimenticare la trasparenza. Senza sfondo trasparente, appare un rettangolo pieno contro la barra del browser o dei segnalibri. Usa PNG o SVG trasparente.
Non provare la modalità scura. Un'icona scura può scomparire su una barra scura. Usa SVG con media query oppure un colore che contrasti con entrambi gli sfondi.
Ignorare la cache. I browser conservano le favicon a lungo. Dopo un aggiornamento, aggiungi una versione all'URL o cambia il nome del file per forzare il download.

Favicon