Creare file ICO: guida alle icone Windows e alle favicon

I file ICO sono alla base delle icone delle applicazioni Windows e delle favicon dei siti. A differenza dei formati che contengono una sola immagine, un file ICO può riunire più dimensioni nello stesso file: proprio ciò che serve a Windows e ai browser per scegliere un'icona vicina alle dimensioni di visualizzazione richieste. Questa guida parte dalle basi del formato ICO e spiega passo dopo passo come creare icone professionali.

Che cos'è il formato ICO?

ICO è un formato contenitore sviluppato da Microsoft appositamente per le icone. La sua caratteristica principale è la possibilità di memorizzare in un unico file .ico più immagini con dimensioni e profondità colore diverse.

Quando Windows o un browser deve mostrare un'icona, cerca nel file ICO l'immagine più adatta alle dimensioni richieste e la utilizza. Fornire più dimensioni può ridurre la necessità di ridimensionamento. Controlla il disegno a 16×16, 32×32 e 256×256: i dettagli più fini possono comunque risultare poco chiari alle dimensioni inferiori.

Caratteristiche principali di ICO:

• Contenitore per più immagini incorporate
• Ogni immagine incorporata può avere dimensioni e profondità colore diverse
• Supporta la trasparenza completa tramite codifica PNG-32

Verifica che la destinazione accetti il formato ICO e le dimensioni fornite.

Perché servono i file ICO

Per le applicazioni Windows

Windows usa i file ICO in molte parti del sistema operativo:

• Collegamenti sul desktop e icone delle applicazioni
• Icone della barra delle applicazioni
• Icone del menu Start
• Icone delle associazioni dei file (l'icona mostrata per un tipo di file specifico)
• Icone del selettore Alt+Tab

Senza file ICO adeguati, l'applicazione mostra l'icona generica predefinita di Windows, dando subito l'impressione di un prodotto incompleto.

Per le favicon dei siti

Ogni sito ha bisogno di una favicon, la piccola icona che compare in:

• Schede del browser
• Elenchi dei preferiti
• Cronologia del browser
• Collegamenti nella schermata Home (quando il sito viene salvato su un dispositivo mobile)
• Barra degli indirizzi

Verifica che la destinazione accetti il formato ICO e le dimensioni fornite.

Come creare un file ICO

Per partire da un PNG e scegliere le dimensioni delle icone, usa Da PNG a ICO:

1. Carica un PNG fino a 20 MB.
2. Seleziona 16, 32, 48, 64, 128 o 256 px; inizialmente sono selezionate 32, 64 e 128.
3. Converti, scarica ed estrai icons.zip.
4. Scegli un ICO di una singola dimensione oppure favicon.ico, che contiene tutte le dimensioni selezionate.

Le immagini rettangolari vengono adattate proporzionalmente al quadrato con margini trasparenti. Se vuoi che il soggetto occupi più spazio nell'icona, prepara prima un ritaglio quadrato. Per un pacchetto predefinito destinato a un sito, comprensivo di PNG e manifest, il Generatore di favicon accetta una sola immagine e non consente di scegliere le dimensioni.

Dimensioni necessarie in base all'uso

Scegli le dimensioni in base alla destinazione effettiva. Questo sito offre 16, 32, 48, 64, 128 e 256 px; non offre 24 px. Includi le dimensioni richieste dall'applicazione o dall'interfaccia del browser e controlla quella più piccola. Nessun insieme di dimensioni garantisce compatibilità o nitidezza in ogni contesto.

Consigli per progettare le icone

Dai priorità alla semplicità

Le icone vengono mostrate a dimensioni molto ridotte. Un disegno dettagliato e raffinato a 512×512 può diventare una macchia irriconoscibile a 16×16. Progettare icone efficaci richiede criteri diversi rispetto ad altri lavori grafici:

• Usa forme semplici e decise — pensa a forme geometriche ben definite, non a illustrazioni elaborate
• Contrasto elevato — l'icona deve essere leggibile sia su sfondi chiari sia su sfondi scuri
• Sagoma riconoscibile — la forma complessiva deve essere distinguibile anche senza i dettagli di colore
• Pochi colori — di solito ne bastano 3–5; troppi colori creano confusione alle dimensioni ridotte

Parti dalla dimensione più piccola

L'errore più comune è progettare una bella icona grande e aspettarsi che funzioni anche ridotta. Procedi invece così:

1. Inizia pensando a come apparirà il disegno a 16×16
2. Crea il disegno tenendo conto di questo vincolo
3. Usa le dimensioni maggiori per aggiungere dettagli e rifiniture
4. Verifica che tutte le dimensioni siano corrette prima di finalizzare il lavoro

Evita i dettagli troppo fini

A dimensioni ridotte, alcuni elementi diventano problematici:

• Linee sottili — scompaiono o diventano poco definite; usa uno spessore minimo di 2px
• Testo minuscolo — è illeggibile sotto circa 32px; quando possibile, evita il testo nelle icone
• Sfumature — possono essere belle nelle versioni grandi ma trasformarsi in macchie uniformi in quelle piccole
• Ombre esterne — spesso rendono le icone poco definite alle dimensioni ridotte

Convertire immagini esistenti in ICO

Da PNG (la scelta più comune)

PNG è il formato di partenza ideale per la conversione in ICO:

• PNG quadrato con sfondo trasparente
• Alta risoluzione (512×512 o superiore)
• Bordi puliti e uniformi
• Nessun artefatto di compressione

Da JPG

JPG può funzionare, ma ha alcuni limiti:

• Nessuna trasparenza — le aree che devono essere trasparenti vanno gestite manualmente
• Ritaglia l'immagine in un quadrato se non lo è già
• Gli artefatti di compressione JPG possono diventare visibili alle dimensioni ridotte

Da SVG

SVG è un ottimo punto di partenza perché è scalabile senza limiti:

• Esporta prima l'SVG come PNG ad alta risoluzione (512×512 o 1024×1024)
• Converti poi il PNG in ICO
• Controlla il PNG esportato e ogni dimensione ICO; una sorgente vettoriale non garantisce che i dettagli fini restino visibili nelle versioni piccole

Integrare la favicon nel codice HTML del sito

Integrazione di base

Un collegamento favicon di base:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Inseriscilo nella sezione <head> del codice HTML. La maggior parte dei browser trova automaticamente anche un file favicon.ico nella directory principale, senza alcuna dichiarazione HTML, ma includere il tag link è più affidabile.

Integrazione moderna con più formati

Per ottenere i risultati migliori sulle diverse piattaforme e sui diversi dispositivi, usa più formati:

<!-- Favicon standard -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Favicon PNG per i browser moderni -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Icona Apple touch per la schermata Home di iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Carica ogni file indicato e verifica l'icona nei browser e sui dispositivi a cui è destinata.

Manifest dell'app web

Per le applicazioni web progressive (PWA), aggiungi anche un file manifest:

<link rel="manifest" href="/site.webmanifest">

Il manifest fa riferimento a icone più grandi (192×192 e 512×512), usate quando il sito viene installato come app nella schermata Home.

Integrare le icone nelle applicazioni Windows

Incorporarle nelle risorse dell'applicazione

Per chi sviluppa applicazioni desktop, il file ICO viene incorporato direttamente nell'applicazione:

• In Visual Studio, aggiungi il file .ico come risorsa
• Inserisci un riferimento nel manifest dell'applicazione
• Windows usa automaticamente la dimensione appropriata in base al contesto di visualizzazione

Associazioni dei tipi di file

Se vuoi un'icona specifica per un tipo di file, ad esempio i file .myapp:

• Registra l'estensione nel Registro di sistema di Windows
• Indica l'eseguibile dell'applicazione oppure un file ICO separato
• L'icona appare in Esplora file per tutti i file di quel tipo

Risolvere i problemi di qualità

Icone sfocate

Causa: nel file ICO manca la dimensione richiesta, quindi Windows ridimensiona quella disponibile più vicina.

Soluzione: includi tutte le dimensioni comunemente necessarie (16, 32, 48, 256). Controlla quelle contenute nel file ICO con uno strumento come IcoFX o Resource Hacker.

Bordi seghettati o con aliasing

Causa: uso della trasparenza binaria (1 bit) invece della trasparenza completa del canale alfa.

Soluzione: usa file sorgente PNG-32 con un canale alfa completo. Il formato ICO moderno supporta la codifica PNG-32 all'interno del contenitore.

La favicon non compare nel browser

Causa: cache del browser, codice HTML errato o percorso del file non corretto.

Soluzione:

1. Svuota la cache del browser e forza il ricaricamento della pagina (Ctrl+Shift+R o Cmd+Shift+R)
2. Verifica che il tag <link> sia in <head> e che il percorso href sia corretto
3. Controlla che il file sia effettivamente accessibile aprendo direttamente il suo URL
4. Assicurati che il formato del file sia corretto usando uno strumento di verifica delle favicon

Verificare le icone

Prima della distribuzione, verifica che le icone appaiano correttamente in tutti i contesti:

Contesti di visualizzazione di Windows

• Barra delle applicazioni (piccola, in genere 24×24 ridimensionata da 32×32)
• Collegamento sul desktop (media, in genere 48×48)
• Visualizzazione a icone grandi in Esplora file (96×96 o 128×128)
• Icone molto grandi (256×256)
• Menu Start di Windows 11 (varie dimensioni)

Contesti del browser

• Scheda del browser (16×16 o 32×32)
• Barra dei preferiti
• Elenco della cronologia
• Su dispositivi mobili: icona del collegamento nella schermata Home

Verifica degli sfondi

• Sfondi chiari (il contesto più comune)
• Modalità scura e sfondi scuri (sempre più importanti)
• Barre delle applicazioni e barre degli strumenti colorate

Domande frequenti

Quali dimensioni dovrebbe contenere un file ICO?

Scegli le dimensioni in base alla destinazione effettiva. Questo sito offre 16, 32, 48, 64, 128 e 256 px; non offre 24 px. Includi le dimensioni richieste dall'applicazione o dall'interfaccia del browser e controlla quella più piccola. Nessun insieme di dimensioni garantisce compatibilità o nitidezza in ogni contesto.

Posso usare PNG al posto di ICO per le favicon?

Sì, i browser moderni supportano le favicon PNG con <link rel="icon" type="image/png" ...>. ICO offre però la compatibilità più ampia, soprattutto con i browser meno recenti, i client di posta e alcuni strumenti di terze parti che cercano per impostazione predefinita favicon.ico nella directory principale.

Perché la mia icona è sfocata?

Nel file ICO manca la dimensione che Windows o il browser sta cercando di visualizzare. Includi tutte le dimensioni necessarie. Puoi verificare il contenuto di un file ICO con strumenti come IcoFX, Resource Hacker o strumenti online per l'ispezione degli ICO.

Le icone devono essere sempre quadrate?

Le immagini rettangolari vengono adattate proporzionalmente al quadrato con margini trasparenti. Questo convertitore non le ritaglia e non le deforma automaticamente.

Come creo un'icona trasparente?

Parti da un PNG che contenga già trasparenza. Il convertitore conserva il canale alfa della sorgente senza un'opzione separata. Controlla le singole dimensioni dopo aver estratto lo ZIP: i bordi più piccoli possono cambiare durante il ridimensionamento.

Conclusione

Creare un file ICO corretto è semplice quando è chiaro che il formato contiene più dimensioni, anziché una sola immagine. Parti da un PNG pulito, quadrato e ad alta risoluzione, includi tutte le dimensioni necessarie, verifica i diversi contesti di visualizzazione e controlla il risultato a ogni dimensione prevista.

Per creare file ICO da un'immagine PNG, JPG, WebP, GIF o SVG supportata, usa il nostro Convertitore ICO: genera automaticamente le dimensioni disponibili.

Crea un file ICO →

---

Strumenti correlati: Generatore di favicon | Ridimensiona immagini | Convertitore PNG