Come creare una favicon
Dimensioni, formati e codice necessari perché una favicon si veda ovunque.
La favicon è la piccola icona nella scheda del browser, nei preferiti e accanto al tuo sito nei risultati di ricerca Google su mobile. Un sito senza favicon sembra incompleto, e una favicon sfocata fa un’impressione ancora peggiore. Farne una buona richiede pochi minuti.
Parti dall’immagine giusta
Una favicon a volte si vede a 16 per 16 pixel, quindi un logo completo con il nome scritto sarà illeggibile. Usa un segno semplice: il simbolo del tuo logo, un’iniziale o una forma netta nel colore del marchio. Fai la prova rimpicciolendolo a un quarto sullo schermo: se lo riconosci ancora, funziona.
Parti da un’immagine quadrata di almeno 512 per 512 pixel, idealmente un PNG con sfondo trasparente. Se il tuo logo non è quadrato, ritaglialo in quadrato bloccando le proporzioni su 1:1.
I file che ti servono
| File | Dimensione | Usato da |
|---|---|---|
| favicon.ico | Contiene le versioni da 16, 32 e 48 pixel | Browser, sistemi datati, la richiesta predefinita a /favicon.ico |
| Un’icona PNG | 32 per 32 e 192 per 192 | Browser moderni, schermata home Android |
| apple-touch-icon.png | 180 per 180 | Preferiti sulla schermata home di iPhone e iPad |
Anche la ricerca Google usa la tua favicon nei risultati. Deve essere quadrata, di almeno 48 per 48 pixel e raggiungibile dai crawler sul tuo sito.
Creare il file ICO
Trascina il tuo PNG quadrato nel convertitore PNG in ICO. Produce un vero file .ico contenente le dimensioni piccole che i browser richiedono. Per le versioni PNG, ridimensiona la stessa immagine quadrata a 180, 192 e 32 pixel.
Aggiungerla al sito
Carica favicon.ico nella radice del sito perché sia raggiungibile a tuosito.it/favicon.ico, poi aggiungi queste righe nell’head delle tue pagine:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
Su WordPress vai in Aspetto, Personalizza, Identità del sito e carica un’immagine quadrata come Icona del sito: WordPress crea le dimensioni per te. Shopify, Wix e Squarespace hanno ciascuno un’impostazione per la favicon tra le impostazioni del sito o del tema.
Quando la nuova favicon non compare
I browser tengono in cache le favicon con grande ostinazione. Apri il sito in una finestra privata, oppure vai direttamente su tuosito.it/favicon.ico e aggiorna. Google può impiegare giorni o settimane ad aggiornare l’icona nei risultati, dopo una nuova scansione della tua home page.
Errori frequenti
- Usare il logo completo con testo piccolo, che a 16 pixel diventa una macchia.
- Un’icona bianca su sfondo trasparente, che sparisce sulle schede chiare.
- Fornire solo un minuscolo file da 16 pixel, sfocato sugli schermi ad alta risoluzione.
- Dimenticare il file all’indirizzo /favicon.ico, che alcuni browser e crawler richiedono comunque, qualunque cosa dica la pagina.