1. Carica un'immagine
Carica un'immagine quadrata (almeno 512x512 px). Formati supportati: PNG, JPG, WebP.
Crea favicon.ico per il tuo sito da una singola immagine
Crea da una singola immagine favicon.ico e icone PNG in tutte le dimensioni richieste. Compatibile con i requisiti dei browser e di Lighthouse - tutto viene eseguito localmente nel tuo browser.
Loading tool editor...
Questo strumento funziona su uno schermo più grande
Per utilizzare comodamente questo strumento, aprilo su un laptop, un computer desktop o un tablet in modalità orizzontale.
Suggerimento
Se utilizzi un tablet, passa alla modalità orizzontale: quando la larghezza della finestra sarà sufficiente, lo strumento si caricherà automaticamente.
Perché ogni sito ha bisogno di un favicon?
Un favicon è molto più di una piccola icona: è un elemento essenziale dell'identità di brand sul web. I browser lo mostrano nella scheda, gli utenti lo vedono nei preferiti e nella cronologia, e Lighthouse verifica la sua presenza come buona pratica. Senza favicon, un sito appare incompleto.
I siti moderni hanno bisogno di favicon in più dimensioni: un favicon.ico per i browser più vecchi, icone PNG per i browser desktop, un Apple Touch Icon per i dispositivi iOS e icone più grandi per le installazioni PWA su Android. Questo strumento genera tutti i file necessari da una singola immagine.
Come usare il generatore di favicon
La generazione richiede solo pochi secondi:
2. Scegli le opzioni
Seleziona le dimensioni desiderate e se generare un site.webmanifest.3. Scarica il ZIP
Scarica tutti i file generati in un archivio ZIP e aggiungili al tuo sito.
| File | Dimensione | Utilizzo |
|---|---|---|
| favicon.ico | 16x16 + 32x32 | Scheda del browser (standard) |
| favicon-16x16.png | 16x16 | Scheda del browser (piccola) |
| favicon-32x32.png | 32x32 | Scheda del browser (Retina) |
| apple-touch-icon.png | 180x180 | Schermata home iOS, Safari |
| android-chrome-192x192.png | 192x192 | Android, installazione PWA |
| android-chrome-512x512.png | 512x512 | Splashscreen PWA, risultati Google |
| site.webmanifest | - | Configurazione PWA (opzionale) |
Quali file vengono generati?
Lo strumento genera tutti i file favicon richiesti dai browser moderni e da Lighthouse. Ogni file ha un ruolo specifico:
- favicon.ico - il formato classico, supportato da tutti i browser. Contiene 16x16 e 32x32 in un unico file.
- Apple Touch Icon - mostrato sulla schermata home di iOS quando un utente aggiunge il sito ai preferiti.
- Icone PWA - per dispositivi Android e Progressive Web App. Utilizzate durante l'installazione sulla schermata home.
Dove viene mostrato il favicon?
Il favicon appare in diversi punti sul web:
Schede del browser
Il favicon appare accanto al titolo della pagina nella scheda - il punto più visibile.Preferiti e cronologia
I browser usano il favicon nella barra dei preferiti e nella cronologia.Schermata home (mobile)
Quando un utente aggiunge il sito alla schermata home, viene usato l'Apple Touch Icon o l'icona PWA.Risultati Google
Google mostra il favicon accanto all'URL nei risultati di ricerca mobili.Audit Lighthouse
Lighthouse verifica la presenza di un favicon - e una buona pratica per le prestazioni web.Installazione PWA
Durante l'installazione di una PWA, le icone 192x192 e 512x512 vengono usate come icona dell'applicazione.
Come scaricare i file generati
Dopo la generazione delle icone, hai diverse opzioni di download:
Scaricare tutto in ZIP
Il pulsante Scarica tutto raggruppa tutti i file generati in un unico archivio ZIP. L'opzione più comoda quando hai bisogno del set completo di icone.Scaricare file singoli
Ogni icona generata ha il suo pulsante di download: puoi scaricare un singolo file senza l'intero set. Utile quando devi aggiornare una sola dimensione.
Dove e come aggiungere un favicon
WordPress
La maggior parte dei temi WordPress dispone di un'opzione integrata per configurare l'icona del sito. La trovi nel pannello di amministrazione:
Aspetto > Personalizza > identità del sito > Icona del sito
Carica il file 512x512: WordPress generera automaticamente le dimensioni più piccole. Per un controllo totale sulle icone, puoi anche caricare i file direttamente nella directory principale tramite FTP.
Quale immagine sorgente funziona meglio?
Un favicon è un'immagine molto piccola, fino a 16x16 pixel. Non tutte le immagini sono adatte come sorgente:
Forme semplici e simboli leggibili
I loghi semplici, le lettere singole o i simboli funzionano meglio. Evita grafiche complesse con molti dettagli.Formato quadrato
Un favicon e quadrato. Se l'immagine sorgente ha proporzioni diverse da 1:1, verra ritagliata o allungata.Dimensione sufficientemente grande
Consigliamo un'immagine sorgente di almeno 512x512 pixel. Le immagini più piccole verranno ingrandite.Il formato SVG come sorgente ideale
L'SVG si ridimensiona senza perdita di qualità, quindi le icone a tutte le dimensioni saranno nitide.Colori ad alto contrasto
Un favicon deve essere visibile su diversi sfondi (schede chiare, modalita scura). Scegli colori che mantengano la leggibilità.
Opzioni di generazione: cosa fa ciascuna?
Sfondo (trasparente o colore)
Per impostazione predefinita, il generatore conserva la trasparenza. Puoi anche scegliere un colore di sfondo specifico.
Generare il manifest (site.webmanifest)
File JSON per le applicazioni web (PWA). Se non stai creando una PWA, questa opzione non è necessaria.
Cosa rende speciale questo generatore di favicon
Compatibile con Lighthouse
Tutte le dimensioni richieste da Lighthouse e dai browser moderni - generate in un solo passaggio.Tutti i formati in un solo passaggio
favicon.ico, icone PNG e site.webmanifest opzionale - tutto da una singola immagine.Supporto PNG, JPG e SVG
Puoi usare il tuo logo in qualsiasi formato. Se hai un SVG, le icone saranno nitide a tutte le dimensioni.Pronto per il sito e le PWA
Lo strumento genera il file manifest.json per le applicazioni web. Sotto trovi le istruzioni per l'integrazione delle icone.
Favicon nei risultati di ricerca Google
Google mostra i favicon accanto all'URL del sito nei risultati di ricerca. I risultati su dispositivi mobili mostrano i favicon dal 2019. I risultati su desktop li visualizzano da gennaio 2020. Il favicon è quindi un elemento visivo del marchio presente in ogni ricerca Google.
Google impone requisiti precisi per la visualizzazione dei favicon. L'icona deve misurare almeno 48×48 pixel. Deve essere quadrata. L'immagine deve restare chiaramente visibile su sfondo bianco. Google rifiuta le icone con contenuto inappropriato o vuoto.
Il Googlebot esplora e indicizza i favicon indipendentemente dal contenuto della pagina. L'aggiornamento del favicon nei risultati di ricerca può richiedere da qualche giorno a diverse settimane. Il file favicon non deve essere bloccato nel robots.txt - altrimenti Google non potrà recuperare la nuova versione.
Bing mostra i favicon nei suoi risultati. DuckDuckGo visualizza le icone del sito accanto a ogni link. Un set completo di favicon garantisce un aspetto coerente del marchio in tutti i principali motori di ricerca. Gli utenti riconoscono i favicon familiari più rapidamente, il che contribuisce a un tasso di clic più elevato.
Favicon e identità visuale del marchio in Italia
L'Italia ha una forte cultura del design - la coerenza tra favicon e logotipo aziendale riflette cura e professionalità. L'icona appare nelle schede del browser, nei preferiti, nella cronologia e sulla schermata iniziale del telefono. Quando un utente ha dieci o più schede aperte, il favicon rimane l'unico elemento visibile che identifica il sito.
Nei marketplace come Amazon.it ed ePrice, un favicon distintivo aiuta a distinguere il negozio tra molti risultati. I comparatori di prezzo italiani mostrano i favicon accanto ai risultati, aumentando la differenziazione visiva tra i venditori.
Le linee guida AgID (Agenzia per l'Italia Digitale) per i siti della Pubblica Amministrazione richiedono accessibilità visiva. Il favicon deve garantire un contrasto adeguato su sfondi chiari e scuri. Colori contrastati e forme semplici soddisfano questo requisito in modo affidabile.
Piattaforme come PrestaShop e WooCommerce, molto diffuse in Italia, permettono di configurare il favicon nelle impostazioni del tema. Le aziende di servizi - dagli studi legali alle agenzie immobiliari - costruiscono la fiducia già a livello dell'icona nella scheda del browser.
Favicon per PWA e dispositivi mobili
Le Progressive Web Apps richiedono icone aggiuntive oltre al favicon standard. Il file manifest.json deve includere un array di icone con dimensioni 192×192 e 512×512 pixel in formato PNG.
Le icone maskable sono un tipo speciale di icona per i dispositivi Android. Il sistema operativo ritaglia le icone maskable in diverse forme - cerchi, quadrati arrotondati o gocce. La zona sicura copre l'80% interno della superficie dell'immagine. Tutti gli elementi grafici essenziali devono trovarsi in questa zona per evitare il ritaglio.
Apple richiede un file apple-touch-icon separato di 180×180 pixel. Questo file deve essere dichiarato nella sezione head dell'HTML - iOS non lo legge dal file manifest.
In Italia le PWA crescono rapidamente. Banche come Intesa Sanpaolo e UniCredit e servizi come Trenitalia offrono esperienze simili alle app native tramite il browser. La tecnologia PWA consente un accesso rapido dalla schermata iniziale del telefono.
L'audit Lighthouse negli strumenti per sviluppatori di Chrome verifica la presenza e la validità del favicon e delle icone PWA. Un favicon mancante o non valido genera un avviso nella categoria PWA dell'audit.
Domande frequenti sul generatore di favicon
Cos'e un favicon?
Un favicon è la piccola icona mostrata nella scheda del browser accanto al titolo della pagina. Appare anche nei preferiti, nella cronologia, sulla schermata home dei dispositivi mobili e nei risultati di ricerca. Un favicon professionale rafforza l'identità del brand e migliora il riconoscimento.
Quali dimensioni genera lo strumento?
Lo strumento genera favicon.ico (16x16 e 32x32 combinati) e icone PNG in 16x16, 32x32, 180x180 (Apple Touch Icon), 192x192 e 512x512 (Android/PWA). Tutte le dimensioni corrispondono ai requisiti attuali dei browser e di Lighthouse.
Quale formato di immagine devo usare?
Idealmente, un'immagine quadrata in PNG, JPG o WebP di almeno 512x512 pixel. Lo strumento ridimensiona automaticamente l'immagine a tutte le dimensioni richieste. più l'immagine sorgente e grande e dettagliata, migliore sara il risultato.
Viene generato anche un site.webmanifest?
Sì. Puoi opzionalmente generare un file site.webmanifest che fa riferimento alle icone PWA (192x192 e 512x512). Il file è incluso nell'archivio ZIP insieme alle icone.
Le mie immagini vengono inviate a un server?
No. Tutta l'elaborazione avviene localmente nel tuo browser tramite l'API Canvas. I tuoi file non lasciano mai il tuo computer e non vengono archiviati da nessuna parte.
Cosa verifica Lighthouse riguardo ai favicon?
Lighthouse verifica se una pagina possiede un favicon valido. Si aspetta come minimo un file favicon.ico o un elemento link rel icon. Verifica anche la presenza di un Apple Touch Icon (180x180) e di icone PWA nel site.webmanifest. Questo strumento genera tutti i file necessari.
Come integrare i favicon nel mio sito?
Copia i file generati nella directory principale del tuo sito. Poi aggiungi gli elementi link corrispondenti nel tag head. Sotto lo strumento trovi una guida con il codice HTML necessario.
Perché il favicon non cambia dopo aver caricato un nuovo file?
I browser memorizzano aggressivamente i favicon nella cache. Dopo aver caricato una nuova icona, svuota la cache del browser o aggiungi un parametro di versione al percorso del file (ad es. /favicon.ico?v=2). La modifica potrebbe diventare visibile solo dopo alcune ore.
Aiutaci a migliorare i nostri strumenti
Hai un'idea per una nuova funzionalità, hai trovato un bug o vuoi suggerire un altro strumento che renderebbe il tuo lavoro più facile? Scrivici – rispondiamo entro 24 ore.