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.
Vuoi approfondire? Chiedi a
Una favicon è la piccola icona che rappresenta il suo 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 suo 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 suo 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 sua icona. Ogni voce dei segnalibri la mostra. Quando un utente aggiunge il suo sito alla schermata home del telefono, l'icona Apple Touch o l'icona Android Chrome diventa la sua 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 suo sito alla schermata home. Senza di essa, Safari scatta uno screenshot della sua 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. Carichi una volta, scarichi un pacchetto completo con tutti i formati inclusi.
Come creare l'immagine sorgente perfetta
Inizi 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. Pensi all'uccellino di Twitter, al gatto di GitHub o al pulsante play di YouTube, tutti riconoscibili istantaneamente a 16 pixel.
Eviti 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.
Usi 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, ha bisogno dei tag HTML corretti nella sezione <head> della sua pagina. I tag essenziali sono:
Il tag <link rel="icon"> punta alla sua 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. Imposti l'attributo sizes su 180x180 per i migliori risultati.
Il tag <link rel="manifest"> collega il suo 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. Può 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 suo sito, caricare i file generati nella directory root e ogni piattaforma sarà coperta.
Best practice per le favicon nel 2026
Mantenga la sua favicon coerente con la sua identità di brand. L'icona dovrebbe utilizzare gli stessi colori e lo stesso linguaggio visivo del suo logo e del design del suo sito. La coerenza tra i punti di contatto rafforza il riconoscimento del brand nel tempo.
Testi la sua 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.
Usi 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, permettendole di adattare la sua icona alla preferenza di sistema dell'utente.
Invalidi la cache quando aggiorna le favicon. I browser memorizzano nella cache le favicon in modo aggressivo. Dopo aver cambiato la sua icona, aggiunga una stringa di versione o cambi il nome del file per forzare i browser a scaricare la nuova versione.
Infine, includa sempre un fallback ICO su /favicon.ico nella root del suo sito. Alcuni browser e strumenti cercano ancora questo percorso predefinito indipendentemente da ciò che specifica il suo HTML. La sua presenza garantisce che nessuna piattaforma resti senza la sua icona di brand.
