La favicon (abbreviazione di favorite icon) è quell’icona piccola ma fondamentale che compare nella scheda del browser, nella cronologia e, soprattutto, nei risultati di ricerca di Google (SERP).
Se vuoi che il tuo sito abbia un’identità riconoscibile anche nella SERP, è essenziale ottimizzare correttamente la favicon.
Indice
Cos’è una favicon e perché è importante per la SEO
Come creare e modificare la favicon del tuo sito
Come assicurarti che Google mostri la tua favicon nei risultati di ricerca
Soluzioni ai problemi più comuni
Cos’è una favicon e perché è importante?
Sostanzialmente è un’icona che rappresenta l’immagine del tuo sito web in alcuni appositi spazi. È un’immagine che aiuta gli utenti a riconoscere il tuo sito tra i risultati di Google. Con la favicon puoi rappresentare in modo più professionale la tua vetrina o attività sul web aumentando inoltre la fiducia e l’affidabilità del tuo brand. Inoltre può migliorare l’esperienza utente e facilita la navigazione tra le schede aperte del browser.
Le sue dimensioni variano da 16×16 pixel a 32×32 pixel.
Google visualizza la favicon nella SERP accanto al titolo della pagina, rendendo il tuo snippet più visibile e cliccabile.
Come generare una favicon ottimizzata
Per creare una favicon è consigliato partire dell‘idea creativa dal logo della propria attività e adattarlo a una dimensione quadrata. Puoi scegliere monogrammi (lettere stilizzate), simboli astratti (forme geometriche), icone di settore estratte dall’identità del brand.
È preferibile l’uso di 2-3 colori massimo ad alto contrasto cromatico per mantenere alta la leggibilità dell’icona (soprattutto nei formati più piccoli).
Requisiti tecnici
Il formato tradizionale è il file con estensione .ico, ma l’icona può essere anche introdotta con i formati .png o .svg.
Le dimensioni dell’immagine variano da 16x16px sino a 512x512px. Le dimensioni standard sono 32x32px, 96x96px, 192x192px. È consigliabile utilizzare uno sfondo trasparente o coerente e di alto contrasto con i colori del logo.
Per generare un set di favicon è possibile sfruttare online strumenti come Favicon Generator o favicon,io.
Come modificare la favicon nel tuo sito
Innanzitutto è necessario caricare il file con estensione .ico sulla root del sito (ad esempio: www.tuosito.com/favicon.ico) con il nome favicon.ico (per garantire la massima compatibilità).
Inoltre all’interno del codice delle pagine web, nella sezione <head> è necessario inserire dei tag appositi per esplicitare tutte le versioni di favicon, ad esempio:
<!-- Favicon standard -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- Per browser più vecchi -->
<link rel="shortcut icon" href="/favicon.ico">
<!-- Per dispositivi Apple -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Per Chrome e dispositivi Android -->
<link rel="icon" sizes="192x192" href="/icon-192x192.png">
<!-- Favicon in SVG-->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />Come suggerire a Google di aggiornare la favicon
Una volta inserita o modificata la favicon sul tuo sito, Google ed altri motori di ricerca potrebbero metterci molto tempo per aggiornare l’icona. Per suggerire al motore la modifica utilizza lo strumento Controllo URL di Google Search Console (per Big G) per le pagine del sito, analizzare le pagine e richiedere una nuova indicizzazione delle stesse (se sono state già indicizzate).
Per aggiornare la cache del motore di ricerca e forzarlo a caricare la nuova versione è possibile inoltre usare nei tag delle varie favicon un parametro di versione alla fine dei link dei file ?v=2, ad esempio:
<link rel="shortcut icon" href="/favicon.ico?v=2">Puoi verificare se la nuova versione dell’icona è rilevata da Google con lo strumento Rich Results Test.
Come risolvere se la favicon non viene visualizzata
Controlla se all’interno del file robots.txt sono presenti restrizioni sulla scansione della favicon per i crawler dei motori. Verifica il formato dell’icona. Per vedere gli aggiornamenti attendi almeno 2 settimane.
Se invece visualizzi su Google la favicon a bassa definizione, utilizza dimensioni multiple dell’immagine e inserisci le versioni compatibili con tutti i dispositivi.