Generatore di favicon: tutte le dimensioni che servono a un sito
Entra un’immagine; escono favicon.ico, apple-touch-icon, icone del manifest e i tag da incollare.
Trascina qui i file
oppure clicca per sceglierli dal tuo dispositivoFormati accettati: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG
Un file per operazioneFino a 20 MB per file5 operazioni al giornoRimuovi i limiti con Pro✓ Funziona offline
I tuoi file restano sul tuo dispositivo
Questo strumento viene eseguito interamente nel tuo browser. Nulla viene caricato, nulla viene salvato, e puoi persino disattivare la connessione a internet prima di iniziare.
Esempio
Esempio: tutte le favicon di un sito da un logo PNG di 1024 × 1024 px
Il logo è un PNG di 1024 × 1024 pixel: una semplice foglia verde, centrata, su fondo trasparente. Impostazioni: «Immagine intera», margine 10%, forma «Angoli arrotondati», sfondo bianco e, come nome del sito, «Agriturismo Il Noce».
- Con il 10% di margine la foglia occupa l’80% di ogni icona: 12,8 dei 16 px della più piccola e 409,6 dei 512 px della più grande.
- Premi «Crea favicon» e scarica lo ZIP con i sette file.
- Carica i file nella radice del sito e incolla le quattro righe di favicon-tags.html nella sezione head di ogni pagina.
| File | Misura | A cosa serve |
|---|---|---|
| favicon.ico | 16, 32 e 48 px | Schede, preferiti e chi chiede /favicon.ico |
| favicon-96x96.png | 96 × 96 px | Risultati di ricerca (multiplo di 48) |
| apple-touch-icon.png | 180 × 180 px | Schermata Home di iPhone e iPad: quadrata e piena |
| web-app-manifest-192x192.png | 192 × 192 px | Android |
| web-app-manifest-512x512.png | 512 × 512 px | Android e sito installato come app |
| site.webmanifest | – | Il nome, le due icone e il colore #ffffff |
| favicon-tags.html | – | Le righe da incollare nella sezione head |
Sette file con la foglia su un quadrato bianco dagli angoli arrotondati; l’icona Apple è un quadrato bianco pieno, perché gli angoli li arrotonda l’iPhone. Non c’è favicon.svg perché il logo era un PNG, e nel manifest il nome breve diventa «Agriturismo».
Come funziona
- Aggiungi il tuo logo: meglio un SVG quadrato, altrimenti un PNG o JPG di almeno 512 × 512 px.
- Scegli come sta nel quadrato — l’immagine intera con un margine facoltativo, oppure riempiendo il quadrato — e anche forma e sfondo.
- Premi «Crea favicon» e scarica tutto insieme in uno ZIP.
- Metti i file nella radice del sito e incolla i tag di favicon-tags.html nell’<head> delle pagine.
Domande frequenti
- Che dimensioni deve avere una favicon?
- Il file favicon.ico contiene 16 × 16, 32 × 32 e 48 × 48 pixel; i dispositivi Apple usano un PNG da 180 × 180, Android e le web app 192 × 192 e 512 × 512. Nei risultati di ricerca l’icona compare a 48 × 48 o a un suo multiplo. Questo generatore le crea tutte da un’unica immagine.
- Quali file ottengo, e a cosa serve ciascuno?
- favicon.ico contiene 16, 32 e 48 px in un unico file, per i browser e i crawler che chiedono direttamente /favicon.ico. favicon-96x96.png serve ai risultati di ricerca, dove Google vuole un multiplo di 48 px. apple-touch-icon.png (180 px) è l’icona della schermata Home di iPhone e iPad. I due PNG web-app-manifest e site.webmanifest servono ad Android e alle web app installate. Partendo da un SVG si aggiunge favicon.svg, e favicon-tags.html contiene le righe da incollare nell’<head>.
- Meglio partire da un SVG o da un PNG?
- Da un SVG, se ce l’hai. Ogni dimensione viene disegnata dal vettoriale: l’icona da 16 px è disegnata a 16 px invece di essere rimpicciolita da un’immagine grande, e ottieni anche favicon.svg, che i browser moderni preferiscono. Con PNG o JPG, parti da almeno 512 × 512 px; un logo molto dettagliato non sopravvive comunque a 16 px, e per questo ci sono il margine e un segno più semplice.
- Perché Google mostra un mappamondo invece della mia icona?
- Google deve poter scansionare sia l’icona sia la home page che la indica, e l’icona dovrebbe essere quadrata con un lato multiplo di 48 px: il file da 96 px di qui serve proprio a questo. Una volta pubblicati i file, i risultati di ricerca possono metterci giorni o settimane ad aggiornarsi.
- Che nome compare sotto l’icona su Android?
- Il nome breve del manifest, ricavato dal campo «Nome del sito»: fino a 12 caratteri resta intero, oltre si ferma all’ultima parola intera che ci sta. «Agriturismo Il Noce» diventa «Agriturismo». Se vuoi un nome breve diverso, cambia short_name in site.webmanifest prima di caricarlo.
- Dove vanno caricati i file?
- Nella radice del sito, accanto alla home page: i tag di favicon-tags.html puntano a /favicon.ico, /favicon-96x96.png, /apple-touch-icon.png e /site.webmanifest. Se li metti in una cartella, correggi i percorsi nei tag e nel manifest.
- Il mio logo viene caricato?
- No. Ogni file viene disegnato in questa pagina con il canvas del browser, e anche lo ZIP viene composto qui. Non viene inviato nulla a un server.
Strumenti correlati
• Ridimensionare immagine Porta una o più immagini alle dimensioni esatte che ti servono, o scegli una misura già pronta per i social. ◩ Scontornare immagine Il soggetto viene ritagliato in automatico, capelli compresi, senza che la foto lasci il tuo dispositivo. ⇄ Convertire immagine Un solo convertitore per tutti i formati più diffusi, compresi l'HEIC dell'iPhone e l'SVG, senza uscire dal browser. • Ritagliare immagine a cerchio Una foto profilo rotonda, trasparente intorno, senza caricare la foto.