Formati di file
Cos'è l'ICO? File di icone e favicon spiegati
L'ICO è il formato di icone di Windows che contiene più dimensioni in un unico file. Spieghiamo la sua struttura, la storia della favicon e quali dimensioni servono oggi.
Autore: Hemen Dönüştür Editör EkibiPubblicato: 8 min di lettura
L'ICO è il formato che Windows usa per le icone di programmi e cartelle e che il web usa per la piccola icona del sito nella scheda del browser (la favicon). Ciò che lo distingue dagli altri formati di immagine è che un solo file può contenere più dimensioni della stessa icona. In questo articolo spieghiamo la struttura interna di un file ICO, come si è evoluto con le versioni di Windows, la storia della favicon, quali dimensioni servono oggi e come produrre correttamente file ICO.
Cos'è l'ICO?
L'ICO (estensione .ico) è un formato contenitore definito da Microsoft per le risorse delle icone. Un file ICO inizia con una "directory delle icone" che elenca ogni immagine del file (per esempio 16x16, 32x32 e 48x48 pixel) come voce separata. Windows o il browser scelgono poi la dimensione più adatta al punto in cui l'icona viene mostrata.
Il tipo MIME ufficiale registrato presso la IANA è image/vnd.microsoft.icon, ma i software Microsoft e molti server usano ancora image/x-icon. Il formato CUR per i cursori del mouse è quasi identico: usa 2 invece di 1 nel campo del tipo della directory e memorizza il punto di clic del cursore (hotspot).
Storia: dalle icone di Windows alla favicon
- Windows 1.0: le icone erano monocromatiche.
- Windows 3.0: arriva la struttura basata su directory con più immagini, come la conosciamo oggi.
- 1995: l'articolo Microsoft "Icons" di John Hornick documenta in dettaglio la struttura ICO e consiglia agli sviluppatori di includere almeno immagini 16x16 (16 colori), 32x32 (16 colori) e 48x48 (256 colori).
- Marzo 1999: Internet Explorer 5 diventa il primo browser a supportare le favicon. Un file
favicon.iconella radice del sito veniva mostrato nei preferiti e nella barra degli indirizzi. - Windows XP: alle immagini a 32 bit viene aggiunto un canale alfa a 8 bit, che rende possibili bordi morbidi e semitrasparenti.
- Windows Vista: vengono aggiunte le immagini 256x256 e la compressione PNG all'interno dell'ICO.
- 2003: il tipo MIME
image/vnd.microsoft.iconviene sottoposto alla IANA da una terza parte.
Struttura di un file ICO
Directory delle icone (ICONDIR)
Il file inizia con un'intestazione di 6 byte: un campo riservato (0), il tipo (1 per le icone, 2 per i cursori) e il numero di immagini. Segue una voce di directory di 16 byte per ogni immagine.
Voce di directory (ICONDIRENTRY)
| Campo | Significato |
|---|---|
| bWidth, bHeight | Larghezza e altezza (1 byte ciascuna). Il valore 0 indica 256 pixel. |
| bColorCount | Numero di colori della tavolozza (0 da 8 bit in su) |
| wPlanes, wBitCount | Piani di colore e bit per pixel |
| dwBytesInRes | Dimensione dei dati dell'immagine in byte |
| dwImageOffset | Punto del file in cui iniziano i dati dell'immagine |
Poiché i campi delle dimensioni occupano un solo byte, un'immagine all'interno di un ICO può essere al massimo di 256x256 pixel.
Dati dell'immagine: BMP o PNG
In un ICO classico ogni immagine è un BMP senza intestazione di file (un DIB). Secondo l'articolo di Hornick contiene un'immagine a colori (la maschera XOR) seguita da una maschera di trasparenza a 1 bit (la maschera AND): per questo l'altezza registrata nell'intestazione è l'altezza complessiva delle due maschere, cioè il doppio dell'altezza reale. Da Windows XP in poi le immagini a 32 bit portano il canale alfa direttamente nei dati dei pixel.
Da Windows Vista una voce può anche essere un file PNG completo invece di un BMP. Incorporare il PNG, soprattutto per la dimensione 256x256, rende il file molto più piccolo. MDN fa notare che il PNG dentro l'ICO non era supportato prima di Vista e può dare problemi con i software più vecchi, ma i browser e le versioni di Windows attuali leggono entrambi i tipi.
Quali dimensioni servono?
Icone delle app Windows
Le indicazioni attuali di Microsoft sulle icone delle app dicono che un'app Win32 dovrebbe includere almeno 16x16, 24x24, 32x32, 48x48 e 256x256. Se Windows non trova una corrispondenza esatta, riduce la dimensione immediatamente più grande; con un'immagine da 256 pixel presente, l'icona viene sempre solo ridotta, mai ingrandita. Con la scala al 100%, per esempio, la barra del titolo e i menu contestuali usano 16 pixel e la barra delle applicazioni ne usa 24; al 200% diventano 32 e 48.
Favicon per i siti web
Sul web funziona diversamente. Secondo l'HTML Standard, se una pagina non ha un collegamento rel="icon", i browser possono richiedere /favicon.ico dalla radice del sito. Tenere un favicon.ico nella radice resta quindi una buona pratica, ma da solo non basta:
- Google Search richiede una favicon quadrata (1:1) di almeno 8x8 pixel e ne consiglia una più grande di 48x48 perché abbia un buon aspetto sulle diverse superfici.
- Le schermate Home di iPhone e iPad usano un
apple-touch-iconda 180x180. - Android e le PWA si aspettano icone da 192 e 512 pixel nel web app manifest, più una versione "maskable" per le icone adattive.
- I browser attuali supportano anche le favicon SVG; un solo file vettoriale copre tutte le dimensioni.
In pratica, inserire 16, 32 e 48 pixel nel favicon.ico copre i browser desktop e i sistemi più vecchi, mentre le dimensioni maggiori si forniscono come file PNG separati.
Supporto in sistemi, browser e programmi
Windows legge e scrive l'ICO in modo nativo; Esplora file, i collegamenti e il desktop lavorano tutti con questo formato. Secondo MDN, Chrome, Edge, Firefox, Opera e Safari visualizzano i file ICO. macOS usa un proprio formato, ICNS, per le icone delle app, ma Anteprima apre gli ICO. Editor come GIMP aprono un ICO come file a livelli, con un livello per ogni dimensione. MDN sconsiglia l'ICO nei contenuti web in generale e osserva che le favicon si sono spostate verso il PNG con un elemento <link>.
Punti di forza e debolezze
| Punti di forza | Debolezze |
|---|---|
| Più dimensioni e profondità di colore in un unico file | Massimo 256x256 pixel |
| Supporto universale su Windows | Nessun uso sul web al di là delle favicon |
| Canale alfa e compressione PNG (da Vista in poi) | Le vecchie voci basate su BMP sono grandi e poco pratiche |
| I browser cercano automaticamente un favicon.ico nella radice | Serve uno strumento apposito; non tutti i programmi sanno scriverlo |
Problemi comuni e come risolverli
Non basta rinominare un PNG in .ico?
Alcuni browser lo tollerano, ma non è un vero ICO: manca la directory delle icone e Windows non lo accetterà come icona. La strada giusta è convertire l'immagine in un vero ICO. I nostri strumenti da PNG a ICO e da JPG a ICO scrivono sempre quadrati da 16, 32 e 48 pixel e aggiungono 64, 128 e 256 quando l'immagine è abbastanza grande. Ogni dimensione è incorporata come PNG, quindi la trasparenza viene conservata.
La favicon è sfocata o illeggibile
Linee sottili e testo piccolo spariscono a 16 pixel. Usa un simbolo semplice, marcato e ad alto contrasto; se serve, prendi solo la parte simbolica del tuo logo. Una sorgente quadrata di almeno 256x256, idealmente 512x512 pixel, dà il risultato migliore.
Un'immagine non quadrata appare schiacciata o stirata
Le icone sono quadrate. I nostri strumenti non stirano mai l'immagine: la centrano in un quadrato mantenendo le proporzioni e lasciano trasparenti i bordi. Per un quadrato perfetto, ritaglia prima una sezione quadrata con ritaglia immagine.
La nuova favicon non compare
I browser tengono in cache le favicon a lungo. Rinominare il file o aggiungere un parametro di versione (/favicon.ico?v=2) e controllare che il server restituisca il tipo MIME corretto di solito risolve. L'icona nei risultati di Google Search si aggiorna solo dopo una nuova scansione del sito.
Windows mostra ancora la vecchia icona
Windows conserva le icone in una cache separata. Spesso basta ricompilare l'app e ricreare il collegamento, oppure uscire dall'account e accedere di nuovo.
Consigli per la conversione
- Per un sito web un solo ICO non basta: il generatore di favicon produce in un colpo solo favicon.ico (16, 32 e 48 pixel), favicon-48x48.png, apple-touch-icon.png (180 pixel), icon-192.png, icon-512.png, un icon-512-maskable.png e site.webmanifest, più icon.svg quando la sorgente è un SVG. Ti fornisce anche il frammento di codice da incollare nel
<head>della pagina. - L'icona Apple richiede uno sfondo opaco: iOS mostra in nero le aree trasparenti e arrotonda da sé gli angoli, quindi il generatore di favicon riempie l'apple-touch-icon con il colore di sfondo che scegli.
- Se il tuo logo è un SVG: crea un PNG grande con da SVG a PNG e converti quello in ICO, oppure dai l'SVG direttamente al generatore di favicon.
I nostri strumenti per ICO e favicon funzionano nel tuo browser; l'immagine non viene caricata e non lascia mai il tuo dispositivo.
Domande frequenti
Qual è la dimensione massima di un'immagine ICO?
I campi di larghezza e altezza di una voce di directory occupano un byte ciascuno, e 0 significa 256. Quindi una singola immagine all'interno di un ICO è al massimo di 256x256 pixel.
Per la favicon meglio ICO o PNG?
Usali entrambi. Un favicon.ico nella radice con 16, 32 e 48 pixel serve i browser più vecchi e le richieste automatiche; dichiara icone PNG (ed eventualmente SVG) con tag <link> per i browser attuali e i dispositivi mobili.
L'ICO supporta la trasparenza?
Sì. I vecchi ICO usano una maschera a 1 bit, le immagini a 32 bit hanno un canale alfa completo da Windows XP e il PNG incorporato porta la trasparenza da Vista.
Come converto un file ICO in PNG?
Aggiungi il tuo ICO al convertitore di immagini e scegli PNG come formato di destinazione. Se il file contiene più dimensioni, viene usata la più grande.
I file ICO si usano sul Mac?
macOS usa il formato ICNS per le icone delle app. Per i siti web, favicon.ico e le icone PNG funzionano nei browser di ogni sistema operativo.
