Riepilogo: Le favicon appaiono nelle schede del browser, nei segnalibri, nelle schermate home dei dispositivi mobili e nei risultati di ricerca di Google. Una singola immagine sorgente di 512×512 può produrre tutte le dimensioni necessarie in pochi secondi.

Una favicon è la piccola icona che rappresenta il tuo sito web su ogni piattaforma e dispositivo. Appare nelle schede del browser, nelle liste dei segnalibri, nei menu della cronologia, nei launcher delle Progressive Web App e, dal 2019, direttamente nei risultati di ricerca mobile di Google accanto al nome del tuo sito. Nonostante le sue dimensioni ridotte, la favicon svolge un ruolo fondamentale nel riconoscimento del brand e nella fiducia degli utenti.

La documentazione di Google conferma che i siti devono avere una favicon valida per visualizzarla nei risultati di ricerca. Le pagine senza favicon mostrano un'icona generica del globo, che riduce la distinzione visiva e può diminuire i tassi di click rispetto ai concorrenti con il proprio marchio. Una guida di Google Search Central dettaglia i requisiti esatti: il file deve essere un multiplo di 48 pixel, quadrato e accessibile a Googlebot.

Perché le favicon sono importanti per SEO e branding

Quando gli utenti scansionano i risultati di ricerca Google su mobile, la favicon è uno dei primi elementi visivi che notano. Un'icona chiara e riconoscibile crea un'associazione di brand istantanea e può migliorare il tasso di click facendo risaltare il tuo annuncio rispetto ai concorrenti che usano icone predefinite.

Oltre alla ricerca, le favicon servono come punti di contatto permanenti del brand. Ogni scheda aperta del browser mostra la tua icona. Ogni voce dei segnalibri la mostra. Quando un utente aggiunge il tuo sito alla schermata home del telefono, l'icona Apple Touch o l'icona Android Chrome diventa la tua rappresentazione simile a un'app. I siti che trascurano questi elementi sembrano incompleti e poco professionali.

Le Progressive Web App (PWA) dipendono interamente da favicon configurate correttamente. Il manifesto dell'app web fa riferimento a file di icone in molteplici risoluzioni. Senza di esse, il prompt di installazione potrebbe non apparire e la PWA non verrà visualizzata correttamente nella schermata home.

Tutte le dimensioni di favicon necessarie

Un'implementazione completa delle favicon copre quattro contesti principali, ognuno dei quali richiede dimensioni di file specifiche:

Le favicon del browser utilizzano file ICO o PNG di 16×16 e 32×32 pixel. Appaiono nelle schede, nelle barre degli indirizzi e nei menu dei segnalibri. La versione 32×32 viene utilizzata anche per i collegamenti della barra delle applicazioni di Windows.

Le icone Apple Touch richiedono un PNG di 180×180 pixel. iOS lo utilizza quando gli utenti aggiungono il tuo sito alla schermata home. Senza di essa, Safari scatta uno screenshot della tua pagina, che raramente ha un bell'aspetto.

Le icone Android Chrome necessitano di PNG di 192×192 e 512×512 pixel referenziati nel manifesto dell'app web. Alimentano le installazioni PWA e la funzione Aggiungi alla schermata home. La versione 512×512 viene utilizzata anche per le schermate splash.

I tile Windows utilizzano un PNG di 150×150 pixel per il tile del menu Start di Microsoft e altre integrazioni Windows. Un file browserconfig.xml opzionale consente di personalizzare il colore del tile.

Il nostro generatore di favicon gratuito produce tutte queste dimensioni da una singola immagine sorgente. Carica una volta, scarica un pacchetto completo con tutti i formati inclusi.

Come creare l'immagine sorgente perfetta

Inizia con un'immagine quadrata di 512×512 pixel o più grande. Il formato SVG è ideale perché scala senza perdita di qualità, ma anche un PNG ad alta risoluzione funziona altrettanto bene.

La semplicità è fondamentale. Le favicon vengono visualizzate a dimensioni estremamente piccole, quindi i dettagli intricati scompaiono. Le favicon più efficaci utilizzano forme audaci, alto contrasto ed elementi minimali. Pensa all'uccellino di Twitter, al gatto di GitHub o al pulsante play di YouTube — tutti riconoscibili istantaneamente a 16 pixel.

Evita di usare fotografie o loghi completi con testo. Le lettere funzionano solo se sono singoli caratteri in un carattere tipografico grassetto. Molti brand utilizzano solo la loro iniziale o una versione semplificata del loro marchio grafico.

Usa sfondi trasparenti per le favicon PNG. Questo garantisce che l'icona appaia pulita su qualsiasi tema del browser, chiaro o scuro. Il formato ICO può contenere multiple dimensioni in un singolo file, rendendolo un fallback affidabile per i browser più vecchi.

Implementare le favicon con il codice HTML corretto

Dopo aver generato i file favicon, hai bisogno dei tag HTML corretti nella sezione <head> della tua pagina. I tag essenziali sono:

Il tag <link rel="icon"> punta alla tua favicon principale. I browser moderni supportano direttamente il PNG: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.

Il tag <link rel="apple-touch-icon"> specifica l'icona della schermata home iOS. I dispositivi Apple cercano esattamente questo attributo di relazione. Imposta l'attributo sizes su 180x180 per i migliori risultati.

Il tag <link rel="manifest"> collega il tuo manifesto dell'app web, che elenca le icone Android Chrome con le loro dimensioni e scopi. Questo è essenziale per il supporto PWA.

Per i tile Windows, il tag <meta name="msapplication-TileImage"> fornisce la grafica del tile. Puoi anche impostare <meta name="msapplication-TileColor"> per definire il colore di sfondo del tile.

Il nostro generatore fornisce codice HTML pronto da incollare per tutti questi tag. Basta copiare il blocco di codice nella sezione head del tuo sito, caricare i file generati nella directory root e ogni piattaforma sarà coperta.

Best practice per le favicon nel 2026

Mantieni la tua favicon coerente con la tua identità di brand. L'icona dovrebbe utilizzare gli stessi colori e lo stesso linguaggio visivo del tuo logo e del design del tuo sito. La coerenza tra i punti di contatto rafforza il riconoscimento del brand nel tempo.

Testa la tua favicon su più browser e dispositivi. Chrome, Firefox, Safari ed Edge renderizzano le favicon in modo leggermente diverso. Ciò che appare nitido su un browser potrebbe risultare sfocato su un altro se viene servita la dimensione sbagliata.

Usa il formato favicon SVG dove supportato. I browser moderni accettano le favicon SVG tramite <link rel="icon" type="image/svg+xml">. L'SVG scala perfettamente a qualsiasi dimensione e supporta le media query per la modalità scura, permettendoti di adattare la tua icona alla preferenza di sistema dell'utente.

Invalida la cache quando aggiorni le favicon. I browser memorizzano nella cache le favicon in modo aggressivo. Dopo aver cambiato la tua icona, aggiungi una stringa di versione o cambia il nome del file per forzare i browser a scaricare la nuova versione.

Infine, includi sempre un fallback ICO su /favicon.ico nella root del tuo sito. Alcuni browser e strumenti cercano ancora questo percorso predefinito indipendentemente da ciò che specifica il tuo HTML. La sua presenza garantisce che nessuna piattaforma resti senza la tua icona di brand.