Generatore di favicon
Crea favicon.ico, un’icona Apple touch, le icone Android e un web manifest da una sola immagine, in un unico ZIP.
Generatore di favicon trasforma un logo o un’immagine nella serie di icone che serve a un sito web. Ritaglia l’immagine in un quadrato centrato e crea favicon.ico (con le dimensioni 16, 32 e 48 pixel), icone PNG da 16 a 512 pixel, un apple-touch-icon.png di 180 × 180 e un file site.webmanifest, tutto in un unico ZIP. La pagina mostra anche i tag link HTML da incollare nella sezione head del tuo sito.
Installare le favicon
Estrai il pacchetto nella cartella principale del tuo sito, poi aggiungi questi tag nel <head> della pagina:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Come usare Generatore di favicon
- 1
Carica il logo
Trascina o scegli un’immagine PNG, JPG, SVG o HEIC. Un’immagine quadrata di almeno 512 × 512 pixel dà il risultato migliore.
- 2
Assicurati che sia centrato
Le icone vengono ritagliate dal centro dell’immagine. Se il logo non è centrato o l’immagine non è quadrata, ritagliala prima in 1:1 con Ritaglia immagine.
- 3
Scarica il pacchetto favicon
Clicca Scarica pacchetto favicon (ZIP) per ottenere tutte le icone e il manifest.
- 4
Aggiungilo al tuo sito
Carica i file nella cartella principale del sito, poi clicca Copia codice e incolla i tag HTML nella sezione head delle tue pagine.
Cosa fa
- favicon.ico in più dimensioni
- Un solo file ICO con icone 16 × 16, 32 × 32 e 48 × 48 per le schede del browser e i preferiti.
- Icone PNG per ogni dispositivo
- File PNG a 16, 32, 48, 64, 128, 192 e 512 pixel, più un apple-touch-icon.png di 180 × 180.
- Web app manifest
- Un file site.webmanifest che punta alle icone da 192 e 512 pixel per Android e per le web app installabili.
- Dimensioni piccole nitide
- Le icone vengono ridotte in più passaggi dall’immagine intera, e così le versioni da 16 e 32 pixel restano più pulite.
- HTML pronto da incollare
- Copia con un clic i tag link per le icone e il manifest.
Domande
Quanto deve essere grande l’immagine per la favicon?
Usa un’immagine quadrata di almeno 512 × 512 pixel, così l’icona più grande resta nitida. Forme semplici e colori decisi restano riconoscibili anche a 16 × 16.
Quali file ci sono nello ZIP?
favicon.ico, da favicon-16x16.png a favicon-512x512.png (16, 32, 48, 64, 128, 192 e 512), apple-touch-icon.png a 180 × 180 e site.webmanifest.
Dove metto i file della favicon?
Caricali nella cartella principale del tuo sito, la stessa della home page. Poi incolla i tag HTML mostrati in questa pagina nella sezione head di ogni pagina.
Perché una parte del mio logo viene tagliata?
Lo strumento prende il quadrato centrato più grande dell’immagine. Se il logo è largo o non è centrato, ritaglialo a quadrato lasciando un po’ di spazio attorno prima di generare le icone.
Posso usare un logo SVG?
Sì. L’SVG viene disegnato come immagine e salvato in file PNG e ICO. Lo ZIP non include una favicon SVG.
Devo modificare il file manifest?
Sì. site.webmanifest usa il nome segnaposto App e colori del tema scuri. Aprilo in un editor di testo e cambia name, short_name e i colori in base al tuo sito.