Trasforma il tuo logo in favicon.ico e in un set completo di icone

Ultima revisione dei contenuti:2026-09-07

Carica il logo in formato PNG, JPG o SVG. Lo strumento ne ricava un file favicon.ico che contiene tre dimensioni, insieme a cinque icone PNG separate. I file nascono nel tuo browser e da lì passano direttamente sul disco: puoi scaricarli tutti insieme oppure uno alla volta.

Anteprima e file favicon

Aggiungi un'immagine a sinistra per generare favicon.ico e un set di icone PNG conformi alle raccomandazioni attuali.

favicon.ico

ICO 16x16 + 32x32 + 48x48

Da generare

favicon-16x16.png

PNG 16x16

Da generare

favicon-32x32.png

PNG 32x32

Da generare

apple-touch-icon.png

PNG 180x180

Da generare

android-chrome-192x192.png

PNG 192x192

Da generare

android-chrome-512x512.png

PNG 512x512

Da generare

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.

Che cos’è una favicon e che cos’è un’apple-touch-icon?

La favicon è l’icona del sito che il browser disegna nella scheda accanto al titolo della pagina, nella barra dei preferiti e nella cronologia. La definizione enciclopedica la descrive come l’icona che compare davanti all’indirizzo nella barra degli indirizzi oppure sulla scheda di una pagina aperta [1]. Nella scheda ha a disposizione un lato di poco più di una decina di pixel, cioè meno spazio di quanto ne occupi una singola lettera di questa frase.

L’apple-touch-icon è la stessa immagine preparata per iPhone e iPad. Arriva sulla schermata home quando qualcuno salva il tuo sito come collegamento. Il suo lato misura 180 pixel, perché il sistema la disegna in una dimensione vicina a quella di una normale app.

Le due icone più grandi del set, da 192 e 512 pixel, servono alle applicazioni web. Android le usa quando crea un collegamento e durante l’installazione, e le trova grazie al file manifest, cioè al documento in cui un sito dichiara il proprio nome, i propri colori e proprio questo elenco di icone [2].

Come si crea una favicon dal proprio logo?

Carica il logo nel campo Aggiungi immagine base, fai clic su Genera favicon e scarica sei file: favicon.ico e le icone PNG con lati da 16, 32, 180, 192 e 512 pixel. L’immagine la elabora il browser sul tuo computer, e i file pronti li salvi direttamente sul disco.

Il file favicon.ico è qualcosa di più di una singola immagine. Il formato ICO è un contenitore per più versioni dello stesso disegno, e il generatore ne inserisce tre: 16, 32 e 48 pixel. Il browser oppure il sistema sceglie dal file la dimensione adatta al punto in cui sta per disegnare l’icona. La scheda del browser prende la più piccola, il collegamento sulla scrivania una più grande.

I nomi dei file corrispondono a quelli che i modelli di sito e le documentazioni si aspettano: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png e android-chrome-512x512.png. Caricali sul server esattamente come escono dal generatore.

Quali file ottieni e dove compare ciascuno di essi?

Il generatore crea sempre il set completo. Qui sotto trovi la dimensione di ogni file e il punto in cui chi visita il sito lo vede davvero.

Nome del file	Dimensione	Dove compare
favicon.ico	16, 32 e 48 px in un solo file	Scheda del browser, barra dei preferiti, collegamento sulla scrivania
favicon-16x16.png	16 × 16 px	Scheda del browser su uno schermo a densità normale
favicon-32x32.png	32 × 32 px	Scheda del browser su uno schermo ad alta densità
apple-touch-icon.png	180 × 180 px	Schermata home di iPhone e iPad
android-chrome-192x192.png	192 × 192 px	Collegamento sulla schermata home di Android
android-chrome-512x512.png	512 × 512 px	Schermata di avvio e installazione dell'applicazione web

Quale dimensione dell’icona chiedono Google, Apple, Android e WordPress?

Ognuno di questi contesti legge l’icona secondo regole proprie. Un solo set del generatore li copre tutti insieme.

Dove compare l’icona	Lato necessario	Formato del file
Risultati di ricerca di Google	Almeno 8 px, consigliato oltre 48 px	ICO, PNG, JPEG, GIF, BMP, TIFF o PPM
Scheda del browser	16 px, su schermi densi 32 px	ICO o PNG
Schermata home di iPhone e iPad	180 px	PNG
Collegamento sulla schermata home di Android	192 px	PNG
Installazione dell’applicazione web	512 px	PNG
Icona del sito in WordPress	Almeno 512 px	PNG o JPG

I requisiti di Google per la favicon, compresa la forma quadrata e l’elenco dei formati, sono descritti nella documentazione del motore di ricerca [3]. La soglia di 512 pixel per l’icona del sito è indicata dalla documentazione di WordPress [4].

Dove si dichiara ciascuno dei file scaricati?

Quattro file si inseriscono nella sezione head della pagina, mentre i due più grandi si indicano nel file manifest.

File dal generatore	Luogo della dichiarazione	Attributo rel
favicon.ico	Sezione head della pagina	icon
favicon-16x16.png	Sezione head della pagina	icon
favicon-32x32.png	Sezione head della pagina	icon
apple-touch-icon.png	Sezione head della pagina	apple-touch-icon
android-chrome-192x192.png	File manifest, elenco icons	Dichiarazione nel manifest
android-chrome-512x512.png	File manifest, elenco icons	Dichiarazione nel manifest

I valori dell’attributo rel con cui Google riconosce una favicon sono icon, apple-touch-icon e apple-touch-icon-precomposed [3]. Le righe di codice pronte all’uso le trovi più sotto, nella scheda HTML.

Come si usa il generatore di favicon?

Tre passaggi ti separano da un set completo di icone sul disco:

1. Aggiungi l’immagine base
Trascina il file sul campo Aggiungi immagine base oppure fai clic e scegli un’immagine dal disco. Lo strumento accetta PNG, JPG/JPEG e SVG, e sotto il campo mostra il nome e il peso del file scelto.
2. Imposta lo sfondo
Il generatore parte dallo sfondo bianco. Spuntando Sfondo trasparente (PNG/ICO) l’area attorno al tuo segno resta vuota, mentre una tinta personale la scegli con il selettore accanto a Colore sfondo.
3. Genera e scarica
Fai clic su Genera favicon. Poco dopo nella colonna di destra compaiono sei file con il rispettivo peso e una dimensione complessiva in alto. Il pulsante Scarica salva l’intero set, e ogni riga ha il proprio pulsante Scarica.

Sfondo trasparente (PNG/ICO)

Colore sfondo:

Sfondo dell’icona: trasparente o colorato?

Il bianco vale come impostazione di partenza

All’apertura della pagina il selettore è sul bianco, e tutte e sei le icone ricevono quel colore. Va bene con i loghi in tinte scure e in tutti i casi in cui l’icona deve apparire uguale su una barra delle schede chiara e su una scura.

Sfondo trasparente (PNG/ICO)

Spuntando questa casella l’area attorno al tuo segno resta vuota, e il selettore del colore diventa inattivo. Scegli questa opzione se il tuo logo ha una forma propria — un cerchio, un monogramma, una lettera — e vuoi che assuma il colore dello sfondo su cui poggia.

Un colore della tua identità

Il selettore accetta qualsiasi tinta, anche quella del tuo manuale di marca. Se ti serve il valore esatto di un materiale che hai già, ricavalo con l'estrattore di colori da immagine e incollalo qui.

Quale immagine di partenza dà il risultato migliore?

L’icona più piccola del set ha un lato di 16 pixel, quindi è soprattutto ciò che carichi a decidere il risultato.

Punta su una forma semplice e su un segno forte
Con un lato di 16 pixel restano leggibili i monogrammi, le singole lettere e i simboli compatti. Sui cartelli di segnaletica agisce lo stesso meccanismo: il pittogramma trasmette il suo contenuto con pochi tratti, perché deve funzionare da lontano e in piccola scala.
Carica il logo in formato SVG
Il file SVG descrive le forme con curve e figure geometriche, quindi il generatore disegna ogni dimensione partendo dalla descrizione completa. Nella nostra misurazione il bordo di un cerchio nell’icona da 512 pixel è risultato netto: su una linea che passa per il suo centro non è caduto neppure un pixel di tonalità intermedia. Lo stesso file serve oltre le icone: una bitmap di quel segno per una presentazione o per una firma e-mail esce dal convertitore da SVG a PNG.
Scegli un file con un lato di almeno 512 pixel
È il lato dell’icona più grande del set. Con un file raster di questa misura ogni icona più piccola nasce da una riduzione, e questo mantiene nitidi i bordi.
Carica un’immagine con proporzioni qualsiasi
Lo strumento la inserisce per intero nel quadrato: la scala fino al lato più lungo, la centra e riempie le fasce libere con lo sfondo scelto. Prendi un logo orizzontale da 400 × 100 pixel. Nell’icona con lato da 64 pixel ne esce una fascia alta 16 pixel, con lo sfondo sopra e sotto. Se preferisci che il segno riempia tutto il quadrato, ritaglia prima il logo in un quadrato nell'editor di immagini e caricalo qui dopo.
Scegli un contrasto valido per entrambi i temi
L’icona poggia una volta su una barra delle schede chiara e una volta su una scura. Le tinte nettamente distinte sia dal bianco sia dal nero mantengono la leggibilità in tutti e due i casi.
Lascia margine ai bordi per Android
Android può ritagliare l’icona a cerchio oppure a quadrato con angoli arrotondati. La specifica garantisce la visibilità entro un cerchio con raggio pari a due quinti del lato più corto, misurato dal centro [2], quindi un segno centrato supera ognuno di questi ritagli.
Parti dal PNG se hai il logo in un altro formato
Il campo Aggiungi immagine base lavora su file PNG, JPG/JPEG e SVG. Un segno salvato in altro modo chiede solo un passaggio preliminare in un convertitore. Una foto dall’iPhone si apre nel convertitore da HEIC a PNG. Una grafica presa da un sito passa dal convertitore da WEBP a PNG oppure dal convertitore da AVIF a PNG. Un logo consegnato nel manuale di marca in PDF esce dal convertitore da PDF a PNG.

Basta un file SVG da solo come icona del sito?

Oggi l’icona in formato SVG funziona nei browser da computer: Chrome ed Edge la leggono dalla versione 80, Firefox dalla 41. Su iPhone e iPad lo fa Safari dalla versione 26 [5]. Per questo l’SVG rende meglio come completamento del set, accanto ai file ICO e PNG.

La favicon per i risultati di ricerca Google la legge da file ICO, PNG, JPEG, GIF, BMP, TIFF e PPM [3]. Il set di questo generatore rientra due volte in quell’elenco: una con favicon.ico, una con le icone PNG. Se hai già un tuo file SVG, tienilo nella sezione head accanto a loro: così ognuno di questi contesti trova un formato che sa leggere.

Dove caricare i file generati?

Quattro strade, a seconda di che cosa c’è sotto il tuo sito:

WordPress
Nel WordPress di oggi l’icona si imposta nella bacheca, in Impostazioni › Generali. Il campo si chiama lì Icona del sito. I temi classici offrono la stessa opzione anche nel personalizzatore, nella sezione dedicata all’identità del sito.
Carica lì il file android-chrome-512x512.png. La documentazione chiede un’immagine quadrata di almeno 512 pixel [4], e le versioni più piccole le prepara WordPress da solo.
Preferisci controllare ogni singolo file? Carica l’intero set via FTP nella cartella principale del sito e inserisci i collegamenti come mostra la scheda HTML.
Shopify
Nel pannello del negozio vai su Online Store, individua il tuo tema e fai clic su Modifica tema. In Impostazioni del tema apri la sezione del logo e, al suo interno, il campo Immagine favicon.
Shopify indica 32 × 32 pixel come dimensione consigliata e riduce a quella misura le immagini più grandi [6]. Carica quindi android-chrome-512x512.png: ti lascia una riserva di qualità per gli schermi ad alta densità.
HTML
Copia i file nella cartella principale del sito, cioè dove si trova index.html. I browser controllano l’indirizzo /favicon.ico per conto proprio, mentre trovano le altre icone grazie ai collegamenti nella sezione <head>:
```
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
```
Le due icone più grandi si indicano nel file manifest, nell’elenco icons, insieme alle loro dimensioni e al tipo image/png.
L’icona si può anche incorporare direttamente nel codice come stringa di caratteri: la prepara il convertitore da immagine a Base64. Nelle pagine a file singolo e nei prototipi torna comodo; accanto lascia un file normale all’indirizzo /favicon.ico, perché è quello a cui arriva il crawler di Google [3].
Next.js
Next.js con App Router riconosce le icone dal nome del file e aggiunge da solo i collegamenti alla sezione head [7]:
- app/favicon.ico — soltanto nella cartella app/ e soltanto con l’estensione .ico
- app/icon.png — l’icona PNG; con questo nome funzionano anche .jpg e .svg, e le varianti successive si numerano come icon1.png, icon2.png
- app/apple-icon.png — l’equivalente del file apple-touch-icon.png; questo nome accetta .png, .jpg e .jpeg
Lascia le icone da 192 e 512 pixel nella cartella public/ e indicale dal manifest. Puoi anche descrivere l’intero set in layout.tsx, nell’oggetto metadata.icons.

Come si comporta la favicon nei risultati di Google?

Google mostra l’icona del sito accanto al suo nome nei risultati, sia sul telefono sia sul computer. Per prelevarla ha bisogno di accedere a due cose: il Googlebot che indicizza le immagini deve poter scansionare il file dell’icona, e il Googlebot normale la pagina iniziale [3]. Tieni quindi la cartella con l’icona fuori dalle regole di blocco del file robots.txt.

Dopo la sostituzione del file serve un po' di pazienza: la documentazione dice apertamente che una nuova scansione richiede da qualche giorno a qualche settimana [3]. Google segnala inoltre che la comparsa della favicon nei risultati dipende da una sua decisione, anche quando tutte le linee guida sono rispettate.

L’icona in sé appartiene al livello di presentazione del risultato, e proprio così la descrive la documentazione del motore di ricerca. Dove agisce davvero è sul riconoscimento: nella colonna dei risultati e tra una decina di schede aperte è spesso l’unico elemento colorato che distingue il tuo sito dagli altri.

Fonti

Favicon — Wikipedia
Web Application Manifest — W3C
Definire la favicon del sito web per i risultati della Ricerca — Google Search Central
Customizer — Identità del sito — WordPress
SVG favicons — Can I use
Impostazioni del tema — immagine favicon — Centro assistenza Shopify
favicon, icon e apple-icon — Next.js

Tutti i valori delle tabelle sono stati calcolati dalle definizioni delle unità e verificati con il calcolo prima della pubblicazione. I dati storici e i nomi delle unità locali si basano sulle fonti elencate sopra.

Ultima revisione dei contenuti: 7 settembre 2026 · scritto e verificato dal team Arteon

Domande frequenti sul generatore di favicon

Quanti file bastano a un normale sito aziendale?

Tre: favicon.ico, favicon-32x32.png e apple-touch-icon.png. Il primo copre la scheda del browser e i risultati di ricerca, il secondo gli schermi ad alta densità, il terzo la schermata home dell’iPhone. Le due icone più grandi entrano in gioco nel momento in cui vuoi offrire il sito come applicazione web.

La favicon deve essere quadrata?

Google richiede un rapporto di 1:1 [3], e anche WordPress si aspetta un quadrato per l’icona del sito [4]. Il generatore se ne occupa per te: un’immagine di qualsiasi proporzione viene inserita per intero nel quadrato e completata con lo sfondo scelto, così tutti e sei i file escono quadrati.

Perché il browser mostra ancora la vecchia icona?

Il browser conserva le icone nella memoria cache più a lungo del resto della pagina. Apri l’indirizzo del file stesso, per esempio /favicon.ico, e ricaricalo saltando la cache con Ctrl + F5. Puoi anche aggiungere un numero di versione al collegamento, per esempio /favicon.ico?v=2: per il browser quello è un indirizzo nuovo.

La favicon influisce sulla posizione del sito su Google?

La documentazione del motore di ricerca descrive la favicon come parte dell’aspetto del risultato [3]. L’influenza sulla posizione vera e propria è indiretta e riguarda la rapidità con cui una persona riconosce il tuo marchio nella colonna dei risultati.

Che cosa contiene esattamente il favicon.ico di questo generatore?

Tre immagini dello stesso disegno: 16 × 16, 32 × 32 e 48 × 48 pixel, ciascuna salvata in PNG dentro il contenitore ICO. Il browser e il sistema scelgono la versione adatta al punto in cui disegnano l’icona.

Che cos’è un’icona maskable e quale sua zona è sicura?

È un’icona preparata per le maschere di sistema di Android, che la ritaglia a cerchio, a quadrato con angoli arrotondati oppure a goccia. La specifica del manifest garantisce la visibilità entro un cerchio con raggio pari a due quinti del lato più corto, misurato dal centro dell’immagine [2]. Un segno collocato in quella zona supera ogni forma di maschera.

Dove vanno messi sul server i file scaricati?

Nella cartella principale del sito, accanto al file iniziale. I browser controllano l’indirizzo /favicon.ico per conto proprio, anche senza un collegamento nel codice, e trovano le altre icone grazie alle righe della sezione head mostrate sopra, nella scheda HTML.

Posso scaricare un solo file del set?

Sì. Ogni riga dell’elenco dei risultati ha il proprio pulsante Scarica, così salvi una singola icona quando sul sito aggiorni una sola dimensione. Il pulsante Scarica sopra l’elenco salva l’intero set in una volta.

Quali immagini accetta il generatore e che fine fa il mio file?

Il campo Aggiungi immagine base accetta file PNG, JPG/JPEG e SVG. Tutto il lavoro avviene nel tuo browser: l’immagine viene caricata nella memoria della scheda, lì nascono tutte le icone e da lì passano sul disco. Il pulsante Cancella rimuove subito immagine e risultati, e la chiusura della scheda fa lo stesso.

Aiutaci a migliorare i nostri strumenti

Hai un’idea per una nuova funzione, hai trovato un errore o vuoi proporre un altro strumento che ti semplificherebbe il lavoro? Scrivici – rispondiamo entro 24 ore.