Generatore favicon
Trasforma un logo in un pacchetto favicon completo per il tuo sito.
Funziona nel browser. I tuoi file non lasciano mai il dispositivo.
- ICO più ogni dimensione PNG
- Snippet HTML pronto
- Spaziatura regolabile
Come generare una favicon
- Trascina qui un logo o un'immagine quadrata.
- Regola spaziatura e sfondo se serve.
- Scarica lo ZIP e incolla lo snippet HTML.
Cosa contiene lo ZIP
| File | Dimensione | Usato da |
|---|---|---|
| favicon.ico | 16, 32 e 48 px in un unico file | Browser più vecchi, preferiti |
| favicon-16x16.png | 16 x 16 | Schede del browser |
| favicon-32x32.png | 32 x 32 | Schede del browser, barre delle applicazioni |
| apple-touch-icon.png | 180 x 180 | Schermata home di iPhone e iPad |
| android-chrome-192x192.png | 192 x 192 | Schermata home Android |
| android-chrome-512x512.png | 512 x 512 | Splash screen e icona app Android |
| site.webmanifest | File di testo | Indica ad Android quale icona usare |
Dove vanno i file
Carica ogni file dello ZIP nella cartella radice del tuo sito, la stessa cartella di index.html, non una sottocartella. Poi incolla lo snippet HTML fornito dentro l'head di ogni pagina, oppure nel template di intestazione condiviso del tuo sito, se ne ha uno.
Consigli su spaziatura e sfondo
- Aggiungi un 10-15 percento di spaziatura per i loghi che toccano i bordi del loro quadrato, così non sembrano tagliati alla dimensione di 16 pixel.
- Attiva un riempimento di sfondo se il tuo logo ha trasparenza e appare strano contro il colore proprio della scheda del browser.
- Un logo semplice e ad alto contrasto si legge meglio a 16x16 rispetto a uno con dettagli fini o testo sottile.
Domande su Generatore favicon
Cosa contiene lo ZIP?
favicon.ico con le dimensioni 16, 32 e 48 pixel, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, due PNG android-chrome e un file site.webmanifest.
Dove vanno caricati questi file?
Caricali nella cartella radice del tuo sito, poi incolla lo snippet HTML nell'head di ogni pagina.
La mia immagine deve essere già quadrata?
Un logo quadrato dà il risultato più pulito. Le immagini non quadrate vengono adattate dentro un quadrato con spaziatura, così niente viene deformato.
A cosa serve la spaziatura interna?
Aggiunge spazio vuoto intorno al tuo logo dentro il quadrato, così il disegno non tocca i bordi alle dimensioni piccole delle icone.
La mia immagine viene caricata?
No. Ogni dimensione di icona viene generata nel tuo browser, quindi l'immagine non lascia mai il tuo dispositivo.
Servono tutti e sei i file, o solo favicon.ico?
I browser moderni usano soprattutto i file PNG e site.webmanifest. favicon.ico resta utile per i browser più vecchi e alcune barre dei preferiti, quindi caricali tutti per la compatibilità più ampia.
Con quale dimensione di immagine dovrei partire?
Almeno 512 per 512 pixel. L'icona master viene generata a quella dimensione, quindi un'immagine sorgente più piccola viene ingrandita per adattarsi e può apparire sfocata.
Il file manifest va modificato?
Il file site.webmanifest generato usa un testo segnaposto per il nome del sito. Aprilo dopo in un editor di testo e aggiorna i campi name e short_name in base al tuo sito.