Generatore di favicon
Crea favicon.ico, apple-touch-icon, icone PNG e site.webmanifest da un'immagine, un testo o un'emoji, con i tag HTML pronti. Nel browser, senza upload.
Da uno a tre caratteri funzionano meglio, ad esempio una lettera, delle iniziali o un'emoji.
site.webmanifest
Anteprima a dimensione reale
File nello ZIP
Come creare una favicon
- In Origine scegli Immagine oppure Testo o emoji. - Immagine: trascina un file PNG, JPG, WebP o SVG. Il risultato migliore si ottiene con un logo quadrato di almeno 512 × 512 px. Scegli Immagine intera per farlo stare tutto nell’icona, oppure Riempi e ritaglia per coprire l’intero quadrato. - Testo o emoji: scrivi una lettera, delle iniziali o un’emoji, poi scegli Carattere, Grassetto e Colore del testo.
- Imposta il Colore di sfondo oppure spunta Sfondo trasparente. Scegli una Forma (Quadrata, Arrotondata o Cerchio) e un Margine interno (%) per lasciare spazio intorno al contenuto.
- Se vuoi, apri site.webmanifest per inserire Nome dell’app (web manifest), Nome breve, Colore del tema e URL della cartella delle icone (lascia
/se i file vanno nella radice del sito). - Clicca su Genera favicon. Le icone compaiono a dimensione reale accanto a una finta scheda del browser. Da quel momento ogni modifica le aggiorna all’istante.
- Clicca su Scarica ZIP, carica i file sul tuo sito, poi clicca su Copia i tag e incollali nel
<head>delle tue pagine.
Cosa contiene lo ZIP
| File | Dimensione | Usato da |
|---|---|---|
| favicon.ico | 16, 32 e 48 px | Schede del browser, preferiti, browser datati, Windows |
| favicon-16x16.png | 16 × 16 | Schede del browser |
| favicon-32x32.png | 32 × 32 | Schede su schermi ad alta densità, collegamenti nella barra delle applicazioni |
| apple-touch-icon.png | 180 × 180 | Schermata Home di iPhone e iPad |
| android-chrome-192x192.png | 192 × 192 | Schermata Home di Android (web manifest) |
| android-chrome-512x512.png | 512 × 512 | Schermate di avvio all’installazione (web manifest) |
| site.webmanifest | — | Nome, colori e icone di un sito installabile |
| favicon-tags.html | — | I tag HTML, come promemoria |
Il file ICO contiene tre immagini PNG, un formato che Windows (da Vista in poi) e tutti i browser attuali sanno leggere. L’apple-touch-icon viene sempre salvata su uno sfondo pieno, perché iOS mostra i pixel trasparenti in nero; con uno sfondo trasparente viene usato il bianco.
I tag HTML
I tag generati hanno questo aspetto (con l’URL della tua cartella):
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">
<meta name="theme-color" content="#ffffff">
I browser richiedono anche automaticamente /favicon.ico nella radice del dominio, quindi tenerlo lì aiuta anche sulle pagine senza i tag.
Consigli di design
- Punta sulla semplicità. A 16 × 16 px i dettagli scompaiono. Una sola lettera, un simbolo marcato o la versione più semplice del tuo logo si leggono meglio.
- Controlla l’anteprima a dimensione reale. L’icona da 16 px nella finta scheda è quella che i visitatori vedono davvero.
- Pensa alla modalità scura. Un logo scuro su sfondo trasparente può sparire nei temi scuri dei browser; uno sfondo colorato o un piccolo margine interno aiutano.
- Le emoji cambiano aspetto da un sistema all’altro, perché ogni piattaforma le disegna con il proprio stile. I file PNG mantengono l’aspetto che hanno sul tuo dispositivo.
Domande frequenti
Di quali dimensioni ha bisogno una favicon?
In pratica: un favicon.ico con 16, 32 e 48 px, un’apple-touch-icon da 180 px e PNG da 192 e 512 px per il web manifest. Questo strumento li crea tutti da un’unica origine.
Posso usare un logo in SVG?
Sì. I file SVG vengono disegnati ad alta risoluzione prima di creare le icone. L’SVG viene mostrato come semplice immagine, quindi gli eventuali script al suo interno non vengono mai eseguiti.
Come creo una favicon con un'emoji?
Scegli Testo o emoji, scrivi o incolla l’emoji, scegli uno sfondo o lascialo trasparente e genera. Il risultato è un vero PNG e un vero ICO, quindi funziona in tutti i browser.
Perché la mia nuova favicon non compare?
I browser conservano le favicon in cache in modo molto ostinato. Ricarica la pagina svuotando la cache, apri il sito in una finestra privata oppure aggiungi una versione all’URL, ad esempio /favicon.ico?v=2.
La mia immagine viene caricata online?
No. Le icone, lo ZIP e il manifest vengono creati nel tuo browser; nulla lascia il tuo dispositivo.
Strumenti correlati
- Convertitore di formato immagini Converti immagini tra PNG, JPG, WebP, BMP e ICO nel browser. Conversione multipla, dimensioni per favicon e opzioni di trasparenza, senza upload.
- Da SVG a PNG Converti SVG in PNG, JPG o WebP nel browser a qualsiasi larghezza, altezza, scala o DPI, con sfondo trasparente o colorato. Più file e ZIP, senza upload.
- Generatore di meta tag Generatore di meta tag gratuito per title, meta description, URL canonico, robots e viewport, con controllo delle lunghezze e HTML protetto.
- Ridimensiona immagini Ridimensiona immagini JPG, PNG e WebP in pixel o in percentuale, mantieni le proporzioni ed elabora più foto insieme, direttamente nel browser.