Ottimizza
Generatore di favicon
Trasforma un logo, un'immagine o poche lettere in tutte le icone che servono a un sito: scheda del browser, preferiti, schermate home di iPhone e Android, con l'HTML per aggiungerle.
Guarda l'icona nelle schede chiare e scure del browser e sulle schermate home dei telefoni prima di scaricarla. Ogni file viene prima riletto e verificato.
L'icona compare qui appena aggiungi un'immagine o scrivi delle lettere.
Aggiungi questo al <head> della pagina
Come funziona
Disegna, guarda, scarica
- Parti da un'immagine o da lettere. Aggiungi un logo (meglio un SVG o un PNG da 512 pixel o più), oppure scrivi fino a tre lettere.
- Dagli forma. Quadrato, arrotondato o cerchio, sfondo trasparente o colorato, e spazio intorno.
- Controlla le anteprime. Schede del browser in modalità chiara e scura, le dimensioni reali di 16, 32 e 48 pixel e le schermate home di iPhone e Android.
- Scarica e aggiungi. Scarica lo ZIP, carica i file sul tuo sito e incolla l'HTML nel
<head>di ogni pagina.
Cosa ottieni
I file e a cosa serve ciascuno
- favicon.ico con immagini da 16, 32 e 48 pixel: l'icona classica che ogni browser cerca.
- favicon-16x16.png e favicon-32x32.png per le schede e i preferiti.
- apple-touch-icon.png (180 pixel, mai trasparente) per le schermate home di iPhone e iPad.
- android-chrome-192x192.png e 512x512.png, più un'icona maskable che Android può ritagliare a cerchio o quadrato arrotondato senza tagliare il disegno.
- site.webmanifest con nome e colori del sito, per installarlo come app.
- favicon.svg se parti da un SVG, così i browser moderni mostrano un'icona nitida a ogni dimensione.
Buono a sapersi
Una favicon leggibile a 16 pixel
Una scheda del browser mostra l'icona a 16 pixel, circa quanto una lettera. A quella dimensione i dettagli fini e le parole lunghe spariscono: usa un simbolo semplice, da una a tre lettere o la parte più riconoscibile del logo. Un forte contrasto aiuta, e uno sfondo pieno mantiene l'icona visibile sia nelle schede chiare sia in quelle scure. Lo strumento ti avvisa se un'immagine è troppo piccola o le lettere sono poco leggibili.
Strumenti correlati
Altro per il tuo sito
FAQ
Domande sulle favicon.
Di che dimensione deve essere una favicon?
Non esiste una sola dimensione: i browser usano 16 e 32 pixel per le schede, 48 pixel su Windows, 180 pixel sugli iPhone e 192 e 512 pixel su Android. Parti da un'immagine di almeno 512 pixel, o da un SVG, e questo strumento le crea tutte.
Come aggiungo una favicon al mio sito?
Carica i file dello ZIP sul tuo sito, di solito nella cartella principale, poi incolla l'HTML mostrato qui nel <head> di ogni pagina. Se metti i file in un'altra cartella, indicala in Dati del sito e l'HTML si adegua.
Serve ancora favicon.ico?
Sì, conviene includerlo. Alcuni browser, lettori di feed e strumenti chiedono direttamente /favicon.ico, senza leggere l'HTML. Il file creato qui contiene immagini da 16, 32 e 48 pixel in un solo file.
Che cos'è un'icona maskable?
Android mostra le icone delle app in forme diverse, come cerchi o quadrati arrotondati, a seconda del telefono. Un'icona maskable ha spazio in più intorno al disegno, così ritagliarla in una di queste forme non taglia mai il logo. L'anteprima Android la mostra ritagliata a cerchio.
Perché la favicon non cambia nel browser?
I browser conservano le favicon a lungo. Dopo il caricamento apri direttamente l'indirizzo dell'icona, ricarica con Ctrl+F5 o Maiusc+ricarica, oppure prova una finestra privata. Cambiare il nome del file, o aggiungere ?v=2 ai link, fa scaricare a ogni browser quella nuova.
Le mie immagini vengono caricate?
No. Le icone vengono disegnate nel tuo browser dalla tua immagine o dalle lettere. L'immagine, le icone e i dati del sito non vengono mai inviati da nessuna parte.