Generatore di favicon
Crea l'icona del sito dal logo, da lettere o da un'emoji e scarica il set completo: favicon.ico, icone per iPhone e Android, manifest e codice da inserire.
Nella scheda del browser
Tutte le dimensioni
File
Codice per <head>
Metti i file nella cartella principale del sito, accanto alla home page, e inserisci questo codice nel tag head di ogni pagina.
Favicon in pochi minuti
- 1Scegli la baselettere, emoji o la tua immagine
- 2Regola l'aspettocolori, font, arrotondamento e dimensione
- 3Scarica il setZIP con icone, manifest e codice
Testo, emoji o immagine
Le lettere su sfondo colorato sono la scelta più comune: la prima lettera del nome si legge anche a 16 px. Un'emoji è un modo veloce per avere un'icona vivace senza designer. Il logo è meglio se quadrato e senza piccoli dettagli: a 16 px tutto ciò che è piccolo si confonde.
Controlla la dimensione piccola
Guarda l'anteprima nella scheda con il tema chiaro e scuro. Se il simbolo si perde nella scheda scura, aggiungi uno sfondo o scegli un colore più acceso. Il margine intorno all'immagine aiuta quando il logo tocca i bordi.
Cosa fare con i file
Metti tutti i file dell'archivio nella cartella principale del sito, accanto alla home page, e inserisci il codice nella sezione head. In WordPress, Tilda e altri website builder di solito basta caricare favicon.ico o un PNG da 512 px nelle impostazioni del sito.
Domande frequenti
Non hai trovato la risposta? Scrivici e ti aiutiamo.
Qui crei la tua icona da zero. "Favicon del sito" fa il contrario: dal link trova e scarica le icone già presenti su un altro sito.
Come minimo favicon.ico nella cartella principale del sito: lo cercano tutti i browser. Un PNG da 32 px dà un'icona nitida nella scheda, apple-touch-icon.png da 180 px l'icona sulla schermata dell'iPhone, e site.webmanifest con icone da 192 e 512 px serve ad Android e alle PWA.
Tre immagini: 16, 32 e 48 px in formato PNG. Il browser e Windows scelgono da soli la dimensione adatta.
iOS arrotonda da solo gli angoli dell'icona nella schermata Home e riempie di nero le zone trasparenti. Per questo salviamo apple-touch-icon quadrata e con lo sfondo: bianco, se hai scelto quello trasparente.
Sì. L'emoji viene disegnata con il font del tuo sistema: su iPhone in stile Apple, su Windows in stile Microsoft, su Android in stile Google. Nel file finisce l'aspetto che vedi nell'anteprima.
Estrai l'archivio nella cartella principale del sito e inserisci il codice del blocco "Codice per <head>" nel tag head. Se l'icona non è cambiata, ricarica la pagina senza cache: i browser ricordano a lungo la vecchia favicon.
Prova anche
Anche loro gratis e senza registrazione