PNG → ICO
Crea una favicon: generatore di favicon.ico e icone
Crea da una sola immagine tutte le icone di cui ha bisogno un sito web: favicon.ico, l'Apple touch icon, le icone per le app e l'HTML da incollare. Tutto avviene nel browser.
Trascina qui il tuo logo o la tua icona PNG, JPG o SVG. L'ideale è un'immagine quadrata. apple-touch-icon.png · 180
icon-192.png · 192
icon-512.png · 512
Incolla nel <head> del tuo sito
Funziona nel browser · i file restano sul tuo dispositivo
Come creare una favicon
- Aggiungi il tuo logo o la tua icona. PNG, JPG o SVG. L'ideale è un'immagine quadrata con una forma semplice.
- Regola margine, angoli e sfondo. Aggiungi spazio intorno all'icona, arrotonda gli angoli e riempi lo sfondo se il logo è scuro su trasparente.
- Controlla le schede del browser. L'anteprima mostra l'icona alla sua dimensione reale di 16 px su una scheda chiara e su una scura.
- Scarica lo ZIP e incolla l'HTML. Carica i file nella radice del sito e incolla i tag nel
<head>.
Cosa crea il generatore di favicon
| File | Dimensione | Chi lo usa |
|---|---|---|
| favicon.ico | 16, 32 e 48 px | Schede del browser, preferiti, collegamenti di Windows e qualsiasi strumento che richiede /favicon.ico |
| icon.svg | Scalabile | Browser moderni, quando l'immagine di partenza è un SVG |
| apple-touch-icon.png | 180 px | Collegamenti nella schermata Home di iPhone e iPad |
| icon-192.png e icon-512.png | 192 e 512 px | Android e web app installate, elencate nel manifest |
| manifest.webmanifest | – | Indica ai browser dove si trovano le icone dell'app |
Le icone da 192 e 512 px seguono l'esempio di web app manifest di web.dev. L'Apple touch icon ha sempre uno sfondo pieno, perché iOS mostra in nero le zone trasparenti.
Da PNG a favicon: partire dall'immagine giusta
Parti dalla versione più pulita del tuo logo. In una scheda la favicon si vede a 16 per 16 pixel, quindi il testo sottile e le linee fini spariscono. Molti marchi usano solo il simbolo o l'iniziale. Se l'immagine di partenza non è quadrata, il generatore la centra su una tela quadrata con margini trasparenti.
Usa il cursore del margine interno quando il logo tocca i bordi e riempi lo sfondo quando il logo è scuro e trasparente, così resta visibile anche nelle schede scure del browser.
Favicon SVG: creare una favicon vettoriale
Se trascini un SVG, il set lo include come icon.svg e l'HTML lo aggiunge come icona in più. I browser che supportano le favicon SVG la usano a qualsiasi dimensione, gli altri ripiegano su favicon.ico. Le icone PNG vengono disegnate dal vettoriale, quindi risultano nitide.
Creare favicon adatte alla Ricerca Google
Google può mostrare la tua favicon accanto ai risultati. Le sue linee guida chiedono un'immagine quadrata di almeno 8 per 8 pixel e ne consigliano una più grande di 48 per 48 pixel (Google Search Central). La dimensione da 48 px dentro favicon.ico e l'icona da 192 px coprono questo requisito. Per maggiori dettagli, leggi la nostra guida alle dimensioni delle favicon.