Generatore Favicon Online
Crea il tuo favicon in tutte le dimensioni necessarie gratuitamente, direttamente nel browser.
.jpg, .png, .webp · fino a 50 MB
Perché usarlo
Il favicon giusto per ogni dispositivo e browser
Tutti i formati
Genera .ico, .png e tutte le dimensioni per iOS, Android e PWA.
100% privato
L'elaborazione avviene nel tuo browser. Il tuo logo non lascia mai il tuo dispositivo.
Tutte le dimensioni
16x16, 32x32, 180x180, 192x192 e 512x512. Pronti per la produzione.
Istantaneo
Risultato immediato. Nessuna coda, nessuna registrazione, nessun limite.
Come funziona
Tre passaggi, senza complicazioni
Carica la tua immagine o logo
Trascina o seleziona un PNG, SVG, JPG o WebP quadrato. Almeno 512x512 px consigliato.
Visualizza le dimensioni generate
Ottieni automaticamente 16x16, 32x32, 180x180 (Apple Touch Icon), 192x192 e 512x512 px.
Scarica il pacchetto di favicon
Scarica tutte le dimensioni generate, pronte da aggiungere al tuo progetto web.
FAQ
Hai delle domande?
Un set di favicon moderno completo richiede: 16x16 px (scheda del browser su Windows e Linux), 32x32 px (scheda su macOS e segnalibri), 180x180 px (Apple Touch Icon, salvato nella schermata Home di iOS), 192x192 px (Android Chrome, aggiungi alla schermata Home) e 512x512 px (splash screen PWA su Android). Il file favicon.ico nella radice del sito può contenere più risoluzioni incorporate (16, 32, 48 px) in un unico file. Per i browser moderni, un singolo PNG 32x32 referenziato nell'HTML è sufficiente. Tuttavia, per la massima compatibilità con i dispositivi Apple, le app di segnalibri e le PWA, il set completo è necessario.
Il formato .ico è il formato favicon originale, introdotto da Internet Explorer 5 nel 1999. Può contenere più risoluzioni in un unico file e ha supporto universale, inclusi i browser molto vecchi. Il formato .png è più semplice: un file per dimensione, supporto nativo in tutti i browser moderni e migliore qualità di compressione rispetto a .ico per le alte risoluzioni. Il formato .svg come favicon è supportato da Chrome, Firefox ed Edge moderni, ma non da Safari né iOS. Il vantaggio dell'SVG è che si scala perfettamente a qualsiasi dimensione e può adattare il suo aspetto alla modalità scura del sistema tramite media query CSS (@media (prefers-color-scheme: dark)). Raccomandazione attuale: usa .ico per la compatibilità di base, .png per le risoluzioni specifiche e facoltativamente .svg per i browser moderni.
L'Apple Touch Icon è l'icona che iOS e Safari di macOS usano quando l'utente salva un sito web nella schermata Home dell'iPhone o dell'iPad, oppure lo aggiunge al dock del Mac. A differenza dei favicon normali (che iOS ignora per questo scopo), l'Apple Touch Icon deve essere un PNG di 180x180 px (per i display Retina), senza livelli di trasparenza (iOS aggiunge automaticamente gli angoli arrotondati), dichiarato nell'HTML come: link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'. Se non viene specificato nessun Apple Touch Icon, iOS cattura automaticamente uno screenshot della pagina come icona, con risultati visivi molto scarsi.
Il modo corretto per dichiarare i favicon moderni nell'HTML head è: link rel='icon' type='image/x-icon' href='/favicon.ico' per la compatibilità di base; link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png' per i browser moderni; link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' per iOS; e link rel='manifest' href='/site.webmanifest' per le PWA. Il file site.webmanifest è un JSON che dichiara le icone da 192x192 e 512x512. I browser moderni danno la priorità al manifest rispetto ai singoli tag link, quindi il manifest è particolarmente importante per le PWA.
favicon.ico è lo standard de facto dal 1999, interpretato da tutti i browser anche senza tag HTML (i browser cercano automaticamente /favicon.ico nella radice). Il web app manifest (manifest.json o site.webmanifest) è lo standard moderno per le PWA (Progressive Web App), introdotto con lo standard W3C Web App Manifest nel 2013. Oltre alle icone, il manifest dichiara nome, colori del tema, modalità di visualizzazione e altre proprietà dell'applicazione. Per un sito web normale senza funzionalità PWA, favicon.ico + PNG + Apple Touch Icon è sufficiente. Per una PWA completa con installazione nella schermata Home, il manifest è indispensabile.
Favicon: storia, standard web e branding nella scheda del browser
Il favicon è uno degli elementi più piccoli e più riconoscibili dell'identità visiva di un sito web. La sua storia inizia nel marzo 1999, quando Microsoft Internet Explorer 5 introdusse il supporto per favicon.ico come parte della funzionalità Preferiti: salvando un sito, IE5 faceva una richiesta a /favicon.ico per mostrare l'icona accanto al segnalibro. Il nome favicon deriva da favorites icon. Lo standard fu formalizzato nell'RFC 2616 e dal W3C nel 2000 con il tag link rel='shortcut icon'. Oggi, oltre 25 anni dopo, il favicon si è evoluto da un semplice file .ico di 16x16 pixel a un ecosistema di icone per schede del browser, segnalibri, schermate Home mobili e splash screen delle applicazioni.
Il formato ICO è tecnicamente un contenitore di immagini che può includere più risoluzioni e profondità di colore in un unico file. Fu originalmente sviluppato da Microsoft per le icone del desktop di Windows e adattato per il web. Una curiosità tecnica: un file .ico può includere immagini PNG compresse all'interno del contenitore ICO sin da Windows Vista (2007), riducendo significativamente le dimensioni del file. I favicon SVG, supportati da Chrome 80+ e Firefox 41+, hanno un vantaggio unico: possono usare media query CSS per adattarsi automaticamente alla modalità scura del sistema. Questo consente di avere un favicon nero su bianco in modalità chiara e bianco su nero in modalità scura, il tutto in un unico file vettoriale di pochi kilobyte.
Nel contesto dei Core Web Vitals di Google, il favicon ha un impatto sulle prestazioni spesso trascurato. Il browser scarica il favicon in una richiesta separata durante il caricamento della pagina, e se il file favicon.ico non esiste, il server risponde con un 404 che può includere una pagina di errore HTML di diversi kilobyte. Per i siti con milioni di visite, questo 404 ripetuto può generare una quantità significativa di traffico inutile. La soluzione è avere sempre un favicon.ico nella radice, anche se si tratta solo di un file minimale di 16x16 px, per evitare questi errori 404 a ogni visita.