Generatore di favicon
Un’immagine in ingresso, un set completo di favicon in uscita, con vera anteprima di 16px prima di confermare
Trascina qui il logo
oppure fai clic per scegliere un file — PNG, JPG o WebP. Un’immagine quadrata da almeno 512 px funziona meglio.
Non viene caricato nulla. Ogni file viene disegnato e codificato nel browser.
Prima di iniziare con Generatore di favicon
Genera nel browser un set multidimensione di favicon, un’icona touch Apple, icone Android e frammenti HTML pronti da copiare a partire da un’immagine.
Ideale per
- Creazione dei comuni file favicon e icone mobili per un sito web
- Verifica della leggibilità di un logo nelle dimensioni reali di 16px del browser
- Copia di frammenti head e manifest pronti in un sito
Da sapere prima di iniziare
- Il generatore parte da una sorgente raster e non riprogetta un logo
- Simboli molto dettagliati potrebbero non restare leggibili a 16 px
- Una favicon modificata può rimanere nella cache dei browser dopo la pubblicazione
Continua il flusso di lavoro
Come usarlo
1. Carica il tuo marchio
Trascina un PNG, JPG o WebP: un’immagine quadrata di almeno 512 px dà i risultati migliori, perché 512 è il file più grande prodotto e non viene inventato nulla nell’ingrandimento. Un’immagine non quadrata riceve un riquadro quadrato trascinabile lungo il lato lungo, oppure puoi passare ad Adatta e aggiungere bande. In entrambi i casi non viene deformata. Il pannello indica dimensioni e presenza di trasparenza e avvisa quando la sorgente è sotto 512 px, perché il file di 512 px viene allora ingrandito e risulta sfumato. Adatta è l’opzione corretta quando non si può tagliare nulla, ma considera il costo: un logo largo diventa un piccolo marchio con strisce vuote sopra e sotto, molto spazio inutilizzato in una scheda di 16 px.
2. Controlla l’anteprima a dimensioni reali
I tre quadrati sono disegnati a 16, 32 e 180 pixel reali su campioni sia chiari sia scuri, e la scheda simulata del browser sottostante colloca la versione da 16 px accanto al titolo di una pagina, dove la vedi normalmente. È il passaggio che la maggior parte dei generatori salta e quello che ti evita problemi: se il quadrato da 16 px è una macchia, nessuna esportazione lo sistemerà e ti servirà invece un simbolo più semplice. I cursori delle dimensioni dell’immagine e del raggio degli angoli aggiornano le stesse anteprime, quindi spaziatura e arrotondamento sono visibili prima di scaricare qualsiasi cosa.
Vale la pena conoscere due dettagli di quel pannello. Il contorno tratteggiato intorno a ogni quadrato rappresenta i limiti reali dell’icona: senza di esso, un’icona con bande vuote o ridotta dal cursore delle dimensioni dell’immagine è indistinguibile da un’icona più piccola, perché l’area vuota assume semplicemente il colore del campione. Inoltre, sia il campione chiaro sia quello scuro mostrano la trasparenza rimasta dopo la scelta dello sfondo: così un alone chiaro incorporato nella grafica emerge sul campione scuro e uno scuro su quello chiaro. La scheda simulata del browser è un’interfaccia CSS intorno alla stessa tela da 16 px, non un vero browser; è utile perché 16 px osservati da soli sembrano comunque più grandi di quanto appaiano accanto al titolo di una pagina.
3. Scegli un set e scarica
Scegli il set minimo o quello per browser meno recenti, premi Genera, poi scarica i file singolarmente o lo ZIP. Copia il frammento head e il manifest dal pannello sottostante: entrambi elencano esattamente i file generati, niente di più. Il blocco manifest è un oggetto JSON completo che puoi salvare direttamente in site.webmanifest; richiede comunque un theme_color e un background_color, che puoi scegliere liberamente. Inserisci il nome dell’app e comparirà come apple-mobile-web-app-title nell’head e come name nel manifest. Lascialo vuoto e nessuna delle due righe viene generata, quindi iOS usa il titolo della pagina, di solito la scelta giusta.
Di quali dimensioni hai davvero bisogno?
| Dimensioni | File | Usato per |
|---|---|---|
| 16 × 16 | favicon.ico | Scheda del browser ed elenco segnalibri su schermo a densità standard. |
| 32 × 32 | favicon.ico | La scheda su uno schermo ad alta densità, oltre alla barra delle applicazioni e ai collegamenti di Windows. La dimensione 48 è inclusa per lo stesso motivo. |
| 180 × 180 | apple-touch-icon.png | Il riquadro iOS quando qualcuno salva il sito. Deve essere opaco. |
| 192 × 192 | android-chrome-192x192.png | Schermata iniziale Android e piccola icona nel manifest dell’app web. |
| 512 × 512 | android-chrome-512x512.png | Schermata iniziale dell’app installata e icona grande del manifest richiesta dalle installazioni. |
Il .ico contenitore mantiene breve questo elenco: contiene diverse immagini in un file, così 16, 32 e 48 viaggiano insieme e il browser sceglie quella necessaria. Ecco perché un unico favicon.ico nella radice copre ogni caso delle schede senza tag aggiuntivi. PNG separati da 16 e 32 servono solo per browser più vecchi che ignorano ICO, ed è a questo che serve l’insieme per sistemi meno recenti.
Due gruppi di file che potresti aver visto altrove sono assenti di proposito. Le tessere Windows Metro — browserconfig.xml e il mstile-*.png immagini — appartengono alla schermata Start di Windows 8 e alla relativa funzione dei siti aggiunti. Edge ha smesso di leggerle anni fa. La favicon della Touch Bar del MacBook è scomparsa insieme all’hardware. Generare oggi questi file aggiunge soltanto file che nessuno richiede e tag che nessuno interpreta, esattamente il disordine che l’insieme Minimo mira a evitare.
Perché il tuo logo potrebbe non funzionare a 16 px
Un’icona di 16 × 16 contiene in totale 256 pixel. Un logotipo perfettamente leggibile su un biglietto da visita non ha più spazio sufficiente per essere reso a quella scala, e l’istinto abituale di ingrandire il testo non aiuta, perché il vincolo non è la dimensione del carattere. È la densità delle linee: quanti tratti e spazi distinti chiedi al renderer di far stare in sedici pixel. Ogni tratto richiede almeno un pixel e lo spazio accanto ne richiede un altro, quindi qualsiasi elemento con più di pochi dettagli per lato diventa grigio.
Ciò che sopravvive è una sola forma con uno o due colori e ampio spazio interno: una lettera anziché una parola, una sagoma anziché un contorno, una forma piena anziché un tratto sottile. Le sfumature fini si appiattiscono, le linee sottilissime scompaiono o diventano punteggiate per l’aliasing e i dettagli vicino al bordo sono i primi a perdersi. Disegna una variante semplificata del tuo simbolo per usarla come icona e controllala nell’anteprima sopra: confrontare il quadrato da 16 px con quello da 180 px rende di solito evidente la scelta. Se il simbolo è illeggibile nel primo quadrato, lo sarà anche in una scheda e nessuna impostazione di esportazione lo salverà.
Il cursore delle dimensioni fa parte dello stesso compromesso. Margini intorno a un marchio fino al bordo sembrano ordinati a 180 px, ma a 16 px ogni percentuale toglie dai 256 pixel disponibili: all’80% la grafica usa circa 164. Usalo se il marchio collide davvero con il riquadro e controlla poi i 16 px, non solo la versione grande.
Domande
La mia immagine viene caricata su un server?
No. L’immagine viene decodificata dal browser, disegnata su tele ed esportata PNG dall’API Canvas. Il file ICO viene assemblato da quei PNG in JavaScript. È un sito statico senza endpoint di caricamento né account: puoi caricare la pagina, scollegarti dalla rete e il generatore continua a funzionare.
Perché apple-touch-icon è opaco?
iOS non rispetta la trasparenza delle icone della schermata Home: compone l’alfa sul nero, quindi un logo trasparente diventa una tessera scura. Il generatore riempie da bordo a bordo la tela 180 × 180 con un colore scelto da te prima di disegnare, angoli inclusi anche quando è impostato un raggio degli angoli, perché iOS applica la propria maschera. Gli altri file seguono il controllo Sfondo e conservano l’alfa quando è impostato su Trasparente, perché schede e launcher Android lo gestiscono.
Cosa fa il raggio degli angoli al colore dello sfondo?
Il raggio taglia il quadrato e lascia trasparenti gli angoli arrotondati; il colore riempie dentro la curva, non fuori. È corretto per schede e launcher Android su superfici proprie. Apple-touch-icon fa eccezione: il riempimento copre anche gli angoli prima del taglio, perché iOS applica una maschera propria e un’icona già arrotondata mostrerebbe vuoti ai quattro angoli.
Mi serve ancora favicon-16x16.png?
Di solito no. Tutti i browser attuali leggono le immagini da 16 e 32 px da favicon.ico, quindi i PNG separati sono duplicati. Servono solo ai browser più vecchi che ignorano i file ICO, ed è proprio ciò che aggiunge il set per browser meno recenti. Se hai dubbi, il set minimo è la scelta predefinita più sicura: meno file e un frammento per head più breve.
E le favicon SVG?
Una sorgente raster non può diventare un vero SVG. Ricalcare un PNG produce un’approssimazione con bordi diversi, non la grafica originale, quindi questo strumento non finge di offrirlo. Se vuoi una favicon SVG, esportala dal file vettoriale in cui è stato disegnato il logo e aggiungila insieme all’ICO: i browser che la supportano usano l’SVG, gli altri ricorrono all’alternativa. Conserva comunque l’ICO: il supporto SVG non è universale.
Correlati
Per una spiegazione completa di ogni dimensione, dei tag head, del manifest e delle trappole della cache che fanno sembrare invariata una favicon modificata, leggi la guida alle dimensioni delle favicon — la guida completa dietro questo strumento. Se l’originale è nel formato sbagliato o richiede prima l’appiattimento su uno sfondo, il Convertitore immagini lo gestisce in serie.