Generatore di favicon online: da PNG a ICO con tutte le dimensioni
Trascina un file PNG, JPG o SVG e ottieni favicon.ico pronto all'uso, tutte le dimensioni PNG, apple-touch-icon, webmanifest e lo snippet HTML. Tutto avviene nel browser, senza caricamenti.
PNG, JPG, SVG, WebP
Trascina e rilascia il tuo file qui o fai clic per selezionarlo
Informazioni sul generatore di favicon
Una favicon moderna non è un singolo file, ma un insieme: ICO per browser meno recenti e collegamenti Windows, PNG in varie dimensioni per Chrome e Firefox, apple-touch-icon per la schermata Home di iOS e webmanifest per PWA. Questo strumento crea l'intero pacchetto da una sola immagine con un clic.
La conversione avviene nel browser: Canvas ridimensiona l'immagine sorgente in tutte le misure richieste, poi inserisce i byte PNG nel contenitore ICO. Il formato PNG-in-ICO, supportato da Windows Vista, funziona in tutti i browser. Il file non viene mai caricato.
Il ZIP risultante contiene favicon.ico, PNG 16/32/96/192/512, apple-touch-icon (180×180), site.webmanifest e uno snippet HTML con tag link pronti da incollare. Copia i file nella directory principale del sito e incolla lo snippet in head.
Quando avrai bisogno di un generatore di favicon
Lancio di un nuovo sito
Carica il logo e ottieni un pacchetto pronto, compatibile con Chrome, Safari, Firefox, Edge e i browser mobili. Non servono Photoshop né le specifiche Apple a memoria.
App desktop o collegamento
Ti serve favicon.ico per un collegamento Windows, una risorsa EXE o una versione meno recente di Internet Explorer? Scarica soltanto ICO: un unico file multirisoluzione 16/32/48.
PWA / iOS — Aggiungi alla schermata Home
Se il sito supporta «Aggiungi alla schermata Home», servono apple-touch-icon (180×180) e un webmanifest con PNG 192/512. Il generatore li crea automaticamente.
Sostituzione di un'icona obsoleta
La vecchia favicon è sfocata o non supporta Retina e la modalità scura? Rigenerala da un SVG nitido con tutte le dimensioni moderne corrette.
Domande frequenti
Quali formati posso caricare?
PNG, JPG, JPEG, WebP, GIF e SVG. I risultati migliori si ottengono da un PNG o SVG quadrato, che si ridimensiona senza perdere nitidezza. Se l'immagine è rettangolare, scegli una modalità di adattamento: Riempi, Adatta o Allunga.
Qual è la differenza tra le modalità di adattamento?
Riempi ritaglia i bordi per occupare tutto il quadrato, ideale per loghi con elemento centrale. Adatta mostra l'intera immagine e riempie i bordi con lo sfondo, ideale per loghi complessi. Allunga altera le proporzioni ed è utile solo di rado.
Cosa c'è dentro favicon.ico?
ICO è un contenitore con immagini PNG in tre dimensioni: 16×16, 32×32 e 48×48. Il browser sceglie quella adatta al contesto. È il formato PNG-in-ICO, supportato da Windows Vista (2007) e da tutti i browser moderni.
Perché così tanti file PNG?
Ogni dimensione ha uno scopo: 16/32 per la scheda del browser, 96 per la nuova scheda di Chrome, 180 per la schermata Home di iOS (apple-touch-icon), 192 per Android Chrome e 512 per la schermata iniziale PWA. Il browser sceglie quella corretta tramite l'attributo sizes del tag link.
Cos'è site.webmanifest?
È un file JSON con l'elenco delle icone e i parametri PWA. Serve per «Aggiungi alla schermata Home» su Android / Chromium, così icona e titolo vengono mostrati correttamente. Se non stai creando una PWA, il file non crea problemi.
Perché apple-touch-icon viene fornito con uno sfondo anche se è attivo Trasparente?
Per impostazione predefinita, iOS aggiunge uno sfondo nero ai PNG trasparenti. Il risultato è poco gradevole, quindi lo riempiamo con il colore scelto, bianco per impostazione predefinita. Se hai scelto la trasparenza, tutti gli altri PNG e ICO restano trasparenti.
Dove metto i file?
Nella directory principale del sito: example.com/favicon.ico, example.com/favicon-32x32.png e così via. Incolla poi lo snippet HTML in head su ogni pagina, preferibilmente tramite un layout condiviso. Il browser caricherà la favicon alla visita successiva.