Informazioni: Generatore di favicon
La favicon è la piccola icona del sito che compare nelle schede del browser, nei preferiti, nei risultati di ricerca e sulla schermata Home del telefono. Senza favicon la scheda mostra un’icona vuota, il sito sembra incompleto e nei risultati di Google appare il globo predefinito.
Questo strumento crea da un logo o da una sola lettera o emoji il set completo di favicon in tutte le dimensioni necessarie. Le dimensioni piccolissime, come 16px, vengono disegnate direttamente a quella misura invece di ridurre un’immagine grande, così risultano più nitide. Tutto avviene nel browser.
Come si usa
- Scegli Testo/emoji oppure Immagine. Per il testo funzionano meglio 1–2 caratteri, per le immagini un logo quadrato.
- Regola colore di sfondo (o nessuno), arrotondamento degli angoli e margine interno. Nell’anteprima a destra (sotto, su mobile) la vedi alla dimensione reale della scheda.
- Tocca Scarica tutto (ZIP), estrai i file e caricali nella cartella principale del sito.
- Copia il codice HTML qui sotto e incollalo nel
<head>di ogni pagina.
File contenuti nello ZIP
| File | Px | Uso |
|---|---|---|
| favicon.ico | 16·32·48 | Tutti i browser, risultati di Google |
| favicon-16x16.png | 16 | Scheda del browser |
| favicon-32x32.png | 32 | Schede ad alta risoluzione, barra delle applicazioni |
| favicon-48x48.png | 48 | Collegamenti di Windows, risultati di ricerca |
| apple-touch-icon.png | 180 | Schermata Home di iPhone e iPad |
| android-chrome-192x192.png | 192 | Schermata Home di Android |
| android-chrome-512x512.png | 512 | Schermata di avvio delle app installate (PWA) |
| site.webmanifest | - | Icone e nome per Android |
Le icone della schermata Home di iPhone non supportano la trasparenza e apparirebbero nere: anche se scegli nessuno sfondo, apple-touch-icon.png viene salvata su sfondo bianco.
Favicon leggibili anche in piccolo
- A 16px le linee sottili e le scritte piccole si impastano. Meglio un simbolo o una sola iniziale che il logo completo.
- Crea un forte contrasto tra sfondo e lettera. Per restare visibile anche nelle schede in modalità scura, uno sfondo colorato è più sicuro della trasparenza.
- Se dopo averla cambiata vedi ancora la vecchia favicon, è colpa della cache del browser: fai un ricaricamento forzato (Ctrl+Maiusc+R) o aggiungi
?v=2al nome del file.
Domande frequenti
Non basta il file ICO?
Per i browser desktop favicon.ico è sufficiente, ma per aggiungere il sito alla schermata Home di iPhone e Android servono PNG da 180, 192 e 512px. Caricando tutti i file dello ZIP e inserendo il codice HTML copri ogni dispositivo.
La favicon non compare nei risultati di Google.
Google consiglia favicon con dimensioni multiple di 48px e l’aggiornamento può richiedere da qualche giorno ad alcune settimane. Controlla anche che il file non sia bloccato dal robots.txt.
Posso usarla su WordPress, Wix o Shopify?
Sì. La maggior parte dei website builder permette di caricare la favicon dalle impostazioni. Di solito basta caricare il PNG da 512px o il file favicon.ico.
Il logo caricato viene salvato su un server?
No. La favicon viene creata nel browser e l’immagine non viene inviata da nessuna parte.