Generatore di favicon
Carica il tuo logo e ricevi in un solo ZIP le icone di cui il sito ha bisogno: un favicon.ico con immagini da 16, 32 e 48 pixel, un PNG da 48 pixel per Google, una Apple Touch Icon con sfondo opaco per iPhone, icone da 192 e 512 pixel per Android, un'icona adattiva con la zona sicura già calcolata e un site.webmanifest. Se carichi un SVG, viene incluso anche icon.svg. Vedi le anteprime della scheda, del risultato Google e della schermata Home e copi il codice <head> già pronto; tutto avviene nel tuo browser.
- Gratuito, senza registrazione
- Il tuo file non lascia il dispositivo
- Fino a 50 MB per file
Aggiungi l'immagine del tuo logo o della tua icona per iniziare. Vanno bene PNG, SVG, JPG e WebP; per un risultato ottimale usa un'immagine quadrata di almeno 512 × 512 pixel.
Il tuo file non lascia il dispositivo; le immagini vengono elaborate nel browser. Al risultato non vengono aggiunti dati EXIF né di posizione.
Come creare un favicon
Aggiungi il tuo logo
Carica un logo in PNG, SVG, JPG o WebP. Per un risultato ottimale usa un'immagine quadrata di almeno 512 × 512 pixel; va bene anche un SVG.
Imposta nome, colori e margine
Scrivi il nome del sito e il nome breve, scegli i colori del tema e dello sfondo e aggiungi un margine interno se serve. Le anteprime mostrano come apparirà l'icona in una scheda, su Google e nella schermata Home.
Scarica il pacchetto e installalo
Scarica lo ZIP, carica i file nella cartella radice del tuo sito e aggiungi alle tue pagine il frammento <head> mostrato.
Cosa viene mantenuto?
Mantenuto
- Le proporzioni del tuo logo: un'immagine non quadrata viene adattata in un quadrato, mai stirata
- La trasparenza (nelle icone standard; se scegli un colore di sfondo, viene riempita)
- Se carichi un SVG, icon.svg viene incluso così com'è
Modificato
- Ogni icona viene ricampionata alla propria dimensione in alta qualità
- L'Apple Touch Icon e l'icona adattiva hanno sempre lo sfondo opaco: il colore che scegli, oppure bianco quando è selezionato «Trasparente»
- Nell'icona adattiva il contenuto resta nella zona sicura dell'80%
Non riportato
- Da un PNG o da un JPG non viene generato alcun vettoriale (SVG); icon.svg esiste solo con un SVG in ingresso
- I dati EXIF e altri metadati non vengono aggiunti alle icone
Quando usarlo
Un set di icone completo per un sito nuovo
Un singolo favicon.ico non basta più: la schermata Home di iPhone, Android e i risultati di Google si aspettano file diversi. Con un solo caricamento li ottieni tutti, con i nomi e le dimensioni giusti.
Far comparire la tua icona nei risultati di Google
Google mostra l'icona del tuo sito nei risultati a partire da un file quadrato la cui dimensione sia un multiplo di 48 pixel, e quel file deve poter essere scansionato. Il pacchetto include quel file e il relativo link per l'<head>.
Un sito che si può aggiungere come un'app (PWA)
Se vuoi che il tuo sito possa essere aggiunto alla schermata Home, servono un manifesto e icone da 192 e 512 pixel. L'icona adattiva evita che il logo venga tagliato quando Android ritaglia l'icona a cerchio o a quadrato arrotondato.
Limiti da conoscere
- Per un risultato ottimale usa un'immagine quadrata di almeno 512 × 512 pixel; le icone grandi create da sorgenti più piccole risultano sfocate.
- Linee sottili e testo piccolo diventano illeggibili nelle icone da 16 e 32 pixel; funzionano meglio loghi decisi e molto contrastati.
- Il colore del tema si applica solo alla barra degli indirizzi dei browser per dispositivi mobili e dipende dalle impostazioni del browser.
- Google può impiegare giorni o anche settimane ad aggiornare l'icona nei risultati di ricerca, e anche i browser conservano le icone in cache.
Domande frequenti
Di quali file favicon ha bisogno un sito?
L'approccio attuale: favicon.ico nella cartella radice, un PNG da 48 pixel per Google, icon.svg se possibile, un apple-touch-icon.png da 180 pixel per iPhone, icone da 192 e 512 pixel per Android e un site.webmanifest. Il generatore li produce tutti e ti dà i link per l'<head>.
Che cos'è un'icona adattiva?
Un'icona adattiva tiene il contenuto dentro una zona sicura e ha lo sfondo completamente pieno, così Android può ritagliarla a cerchio, a quadrato arrotondato o in un'altra forma a seconda del dispositivo. Qui il contenuto è posto nell'area centrale dell'80% dell'immagine da 512 pixel.
Perché l'Apple Touch Icon è opaca e con gli angoli vivi?
iOS mostra le aree trasparenti in nero e arrotonda da solo gli angoli. Per questo l'icona viene prodotta completamente piena e senza angoli arrotondati, nel colore di sfondo che scegli (bianco se è selezionato Trasparente).
Perché la mia icona non compare nei risultati di Google?
Il file dell'icona non deve essere bloccato da robots.txt, deve essere collegato nell'<head> della home page e deve essere un quadrato la cui dimensione sia un multiplo di 48 pixel. Dopo la correzione puoi richiedere la reindicizzazione della home page in Search Console; l'aggiornamento può comunque richiedere giorni o settimane.
Cosa succede se carico un'immagine non quadrata?
Le icone vengono adattate in un quadrato senza deformazioni e lasciano spazio vuoto ai lati. Se vuoi che il disegno riempia il quadrato, ritaglia prima l'immagine in 1:1 con lo strumento di ritaglio.
Crea un favicon SVG a partire da un PNG?
No. Convertire automaticamente dei pixel in vettoriale potrebbe cambiare l'aspetto dell'icona senza che tu te ne accorga; per questo icon.svg è incluso solo quando carichi tu stesso un SVG.
Questo strumento è gratuito?
Sì, è completamente gratuito. Non servono account, abbonamenti e non c'è filigrana.
I miei file vengono caricati da qualche parte?
No. Le immagini vengono elaborate nel tuo browser e non lasciano il dispositivo. Al risultato non vengono aggiunti dati EXIF né di posizione.