Rastrový grafický formát ICO

Pavel Tišnovský 15. 2. 2007

V dnešním článku si ukážeme interní strukturu obrazového formátu ICO, ve kterém jsou ukládány ikony primárně používané především v operačních systémech Microsoft Windows. V posledních několika letech se však tento formát rozšířil i na webu ve formě ikon umístěných u bookmarků a titulkových lišt oken (takzvané favicon).

Obsah

1. Grafický formát ikon – ICO
2. AND-bitmapy a XOR-bitmapy
3. Ukázka souboru ICO obsahujícího jednu ikonu
4. Ukázka souboru ICO obsahujícího sadu ikon
5. Odkazy na další informační zdroje
6. Obsah dalšího pokračování tohoto seriálu

1. Grafický formát ikon – ICO

Grafický formát ICO zavedla firma Microsoft pro potřeby svého operačního systému Microsoft Windows. Historie tohoto formátu dokonce sahá až ke grafickým kartám CGA a Windows 2.0. Jedná se o soubor, ve kterém se může nacházet několik ikon (malých rastrových obrázků) s různou barevnou hloubkou, rozlišením a volitelnou průhledností. Na platformě Microsoft Windows se tento typ souborů stal zákonitě populární a velmi rozšířený; prakticky každá aplikace obsahuje jednu či několik těchto ikon, ať už ve formě samostatných souborů s příponou .ico nebo prostředků (resources) vložených do spustitelných souborů (většinou s koncovkou .exe) a dynamických knihoven (.dll) – viz funkce LoadIcon() a LoadImage(). Velké množství ikon je obsažených například v systémových knihovnách moricons.dll a shell32.dll.

Formát ICO však není zdaleka omezen pouze na tento operační systém, protože je v současnosti podporován prakticky všemi rozšířenějšími webovými prohlížeči s grafickou podporou pro zobrazení „ikony“ či loga webových stránek. Tato ikona, která bývá označována termíny favicon (Favorite Icon), Page Icon či URL Icon, může být ve webovém prohlížeči zobrazena jak v bookmarcích, tak i na titulkové liště celého okna nebo jednotlivých tabů či v adresovém řádku. Dnes je patrná snaha místo formátu ICO používat pro tento účel formát PNG, který je však z několika důvodů nevhodný; například nepodporuje ukládání více obrázků s různou barevnou hloubkou a různým rozlišením v jednom souboru, což komplikuje podporu pro různá zařízení (mobilní telefony atd.). Přiřazení ikony nějaké WWW stránce je možné kromě konfigurace HTTP serveru provést například tímto kódem:

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon"> 

Struktura grafického formátu ICO s uloženými ikonami je poměrně složitá, ale implementace dekodéru (například v prohlížečích) je kupodivu jednodušší, než se na první pohled může zdát. Soubor .ico s uloženými ikonami začíná takzvanou informační resp. souborovou hlavičkou, ve které jsou mimo dvou vcelku bezvýznamných (konstantních a nicneříkajících) položek uloženy především informace o celkovém počtu ikon, které se v souboru nachází. Všechny vícebytové údaje (rozlišení, offsety, bytové délky atd.) jsou uloženy v pořadí nižší byte-vyšší byte, tj. jedná se o uspořádání little-endian, které je pro procesory Intel řady x86 nativní. Informační/sou­borová hlavička obsahuje celkem tři položky s následujícím formátem:

Jméno položky Počet bytů Datový typ Význam položky
idReserved 2 WORD rezervováno, mělo by být nastaveno na hodnotu 0
idType 2 WORD typ prostředku (resource), pro ikony je zde hodnota 1
idCount 2 WORD celkový počet ikon, které se v souboru nachází

Jména jednotlivých položek informační hlavičky odpovídají názvům složek céčkovských struktur z oficiálních hlavičkových souborů WinAPI (i když je pravda, že ve WinAPI se na tak nízké úrovni většinou nepracuje). Uvedené datové typy (BYTE, WORD, DWORD) jsou bezznaménkové celočíselné typy odpovídající v třicetidvou­bitových překladačích jazyka C typům unsigned char, unsigned short int a unsigned int. Po informační hlavičce jsou v souboru uloženy hlavičky jednotlivých ikon (ikony mohou mít různé rozměry, čehož se typicky využívá pro uložení toho samého obrázku ve více velikostech). Těchto hlaviček za sebou může být uloženo více, celkový počet hlaviček souhlasí s hodnotou idCount. Každá hlavička ikony má následující formát:

Jméno položky Počet bytů Datový typ Význam položky
bWidth 1 BYTE šířka ikony v pixelech
bHeight 1 BYTE výška ikony v pixelech
bColorCount 1 BYTE počet barev v obrázku nebo 0 pro více než 256 barev
bReserved 1 BYTE rezervováno, nepoužito
wPlanes 2 WORD počet barevných rovin
wBitCount 2 WORD počet bitů na pixel
dwBytesInRes 4 DWORD délka obrázku v bytech (včetně palety aj.)
dwImageOffset 4 DWORD offset začátku ikony od začátku souboru

Mezi hlavičkami ikon a jejich definicemi se teoreticky může nacházet libovolné množství nadbytečných bytů (v budoucnu může být například podporována animace), proto by měl dekódovací program vždy načítat a správně zpracovat hodnotu dwImageOffset a nespoléhat se na to, že ihned po hlavičkách nalezne data první ikony. Na daném offsetu (dwImageOffset) můžeme najít čtyři struktury plně popisující danou ikonu. Jedná se o hlavičku obrázku (není těch hlaviček už nějak moc?), kterou již známe z dílů, ve kterých jsme se zabývali grafickým formátem BMP. Dále o barvovou paletu následovanou dvojicí bitmap. První bitmapa je nazývaná podle své funkce XOR-bitmapa, druhá bitmapa pak AND-bitmapa. Nejdříve si ukážeme, jak jednotlivé struktury vypadají, posléze si popíšeme význam obou bitmap.

Struktura s hlavičkou obrázku vypadá následovně:

Jméno položky Počet bytů Datový typ Význam položky
biSize 4 DWORD celková délka této datové struktury, vždy 40 bytů
biWidth 4 DWORD šířka obrázku v pixelech (duplicitní údaj)
biHeight 4 DWORD výška obrázku v pixelech (dvojnásobek výšky ikony)
biPlanes 2 WORD počet bitových rovin, vždy 1, existuje pouze z historických dů­vodů
biBitCount 2 WORD celkový počet bitů na pixel, typicky hodnoty 1, 4, 8 nebo 24
biCompression 4 DWORD typ komprimační metody: 0 (BI_RGB), 1 (BI_RLE8) či 2 (BI_RLE4)
biSizeImage 4 DWORD velikost obrazu v bytech
biXPelsPerMeter 4 DWORD u ikon je zde nulová hodnota
biYPelsPerMeter 4 DWORD u ikon je zde nulová hodnota
biClrUsed 4 DWORD opět nulová hodnota
biClrImportant 4 DWORD hádejte – opět nula

Z výše uvedené struktury, která odpovídá datové struktuře BITMAPINFOHEADER je patrné, že některé hodnoty jsou duplikovány již v hlavičce ikony. Některé položky, které mají význam pouze u samostatných bitmap, jsou v případě souborů s ikonami nulové, konkrétně se jedná o položky biXPelsPerMeter, biYPelsPerMeter, biClrUsed a biClrImportant. Tyto položky může dekodér ignorovat.

Po hlavičce bitmapy následuje barvová paleta. Ta je uložena stejným způsobem, jako u grafického formátu BMP. Každá barva je reprezentována čtveřicí bytů. V prvním bytu je uložena hodnota barvové složky R (Red, červená), ve druhém bytu hodnota barvové složky G (Green, zelená), ve třetím bytu hodnota složky B (Blue, modrá) a čtvrtý byt je rezervovaný – obsahuje nulovou hodnotu. Barvová paleta je platná pro XOR-bitmapu, kterou si popíšeme v následující kapitole. AND-bitmapa je vždy monochromatická a vlastně se přímo nevykresluje, proto se pro ni žádná barevná paleta neukládá.

2. AND-bitmapy a XOR-bitmapy

Každá ikona je představována dvojicí bitmap. Jedna z těchto bitmap se nazývá AND-bitmapa, druhá je XOR-bitmapa. Jaký je jejich význam? Musíme si uvědomit, že ikony jsou sice obdélníkové či čtvercové rastrové obrázky, ale většinou jsou vykreslovány s průhledností například na desktopový obrázek (wallpaper). Původní obrázky typu BMP neměly podporu průhlednosti, proto firma Microsoft přišla s nápadem použití dvou bitmap, kde jedna bitmapa představuje masku (AND-bitmapa) a druhá bitmapa vlastní obarvené pixely (XOR-bitmapa). Není to nápad nijak nový, podobným způsobem jsou řešeny například sprity v mnoha starších i moderních hrách.

Kromě toho je možné pomocí dvojice bitmap zajistit, že se některé barvy pozadí (podkladového obrázku) budou invertovat, tj. k průhlednosti se přidává i negativní maskování. Již víme, že AND-bitmapa je monochromatická, každý pixel je tedy představován pouze jedním bitem. Jak se vzájemná interakce obrázku na pozadí, AND-bitmapy a XOR bitmapy projeví nám ukazuje následující tabulka. Vidíme, že názvy obou bitmap jsou zvoleny přiléhavě, protože 0 xor pozadí=pozadí a max xor pozadí=inverze pozadí, kde max je maximální povolený index barvy (například 15 či 255 podle bitů na pixel).

Maska (AND-bitmapa) 0 1 1 1
Barva (XOR-bitmapa) libovolná 0 vše mimo 0 a max max
Výsledná barva barva XOR-bitmapy barva pozadí pozadí xor barva inverzní barva pozadí

3. Ukázka souboru ICO obsahujícího jednu ikonu

V operačních systémech Microsoft Windows se často setkáme se soubory .ico, které mají velikost přesně 766 bytů. Tyto ikony jsou opravdu typické a možná proto si mnoho lidí myslí, že ikony mohou mít velikost pouze 32×32 pixelů v šestnácti barvách – přesně taková ikona je v těchto souborech uložena. Podívejme se nyní, co se v souborech této délky nachází:

Struktura Délka v bytech
Informační hlavička 6
Hlavička ikony 16
Hlavička bitmapy 40
Barvová paleta 64 (16×4)
XOR-bitmapa 512 (32×32/2)
AND-bitmapa 128 (32×32/8)
Celkem 766

V hexadecimálním výpisu uvedeném níže je obsah souboru py.ico, který si můžete stáhnout zde. Jedná se o ikonu z instalace interpreteru programovacího jazyka Python.

gfx_27_1
Ukázková ikona získaná ze souboru py.ico a převedená do formátu PNG
0000000: 00 00 01 00 01 00 20 20 10 00 00 00 00 00 e8 02
0000010: 00 00 16 00 00 00 28 00 00 00 20 00 00 00 40 00
0000020: 00 00 01 00 04 00 00 00 00 00 80 02 00 00 00 00
0000030: 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
0000040: 00 00 00 00 80 00 00 80 00 00 00 80 80 00 80 00
0000050: 00 00 80 00 80 00 80 80 00 00 80 80 80 00 c0 c0
0000060: c0 00 00 00 ff 00 00 ff 00 00 00 ff ff 00 ff 00
0000070: 00 00 ff 00 ff 00 ff ff 00 00 ff ff ff 00 00 00
0000080: 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
0000090: 00 00 aa a3 a0 00 00 00 00 00 00 00 00 00 00 00
00000a0: 00 03 33 aa aa a0 0a aa aa 00 00 00 00 00 00 00
00000b0: 00 aa aa a3 33 33 a3 33 33 33 00 00 00 00 00 00
00000c0: 00 aa aa 33 33 33 33 33 33 33 30 0a a0 00 00 00
00000d0: 00 33 3a 33 33 33 33 33 33 33 33 33 33 00 00 00
00000e0: 00 aa aa 33 33 30 33 33 33 03 33 33 33 30 00 00
00000f0: 00 0a aa 33 33 33 03 33 30 00 33 30 03 30 00 00
0000100: 00 03 33 a3 33 33 30 00 00 00 00 00 00 30 00 90
0000110: 00 00 0a aa 33 33 33 00 00 00 00 00 00 00 90 90
0000120: 00 00 00 33 aa 33 33 30 00 00 00 00 00 00 09 90
0000130: 00 00 00 00 aa a3 33 33 00 00 00 00 00 00 00 99
0000140: aa aa 00 00 03 3a 33 33 30 00 00 00 00 00 00 09
0000150: 9a 3a aa 00 00 0a a3 33 33 00 00 00 00 00 00 00
0000160: 99 00 3a aa 00 00 3a 33 33 00 00 00 00 00 00 00
0000170: 09 90 00 3a a0 00 aa a3 33 30 00 00 00 00 00 a3
0000180: a3 a3 00 0a 3a 00 33 a3 33 30 00 00 00 00 0a aa
0000190: aa aa a0 00 3a a0 aa a3 33 30 00 00 00 00 0a a3
00001a0: a3 a3 aa a0 0a 3a 0a 33 33 30 00 00 00 00 03 33
00001b0: 33 33 a3 aa 00 aa a0 33 33 30 00 00 00 00 03 03
00001c0: 30 33 33 a3 aa aa a0 33 33 00 00 00 00 00 03 33
00001d0: 33 33 33 33 a3 aa a0 33 33 00 00 00 00 00 00 33
00001e0: 33 33 33 33 33 3a 03 33 30 00 00 00 00 00 00 00
00001f0: 33 33 33 33 33 30 33 30 00 00 00 00 00 00 00 00
0000200: 00 00 30 00 33 30 00 00 00 00 00 00 00 00 00 00
0000210: 00 bb 0b bb 03 00 00 00 00 00 00 00 00 00 00 00
0000220: 00 bc 0b cc 03 00 00 00 00 00 00 00 00 00 00 00
0000230: 00 bc 0b cc 03 00 00 00 00 00 00 00 00 00 00 00
0000240: 00 bb 0b bb 03 00 00 00 00 00 00 00 00 00 00 00
0000250: 00 00 00 00 33 00 00 00 00 00 00 00 00 00 00 00
0000260: 00 03 30 33 30 00 00 00 00 00 00 00 00 00 00 00
0000270: 00 00 00 00 00 00 00 00 00 00 00 00 00 00 ff 07
0000280: ff ff fe 01 83 ff fc 00 00 ff f8 00 00 67 f8 00
0000290: 00 03 f8 00 00 01 f8 00 00 00 fc 00 02 00 fc 00
00002a0: 07 18 de 00 1f fc 5f 80 0f fe 80 e0 07 ff c0 30
00002b0: 03 ff c0 0c 01 ff c0 06 01 ff c0 02 00 ff 80 00
00002c0: 00 ff 00 00 00 ff 00 00 00 ff 00 00 00 ff 00 00
00002d0: 01 ff 00 00 01 ff 80 00 03 ff c0 00 07 ff f0 00
00002e0: 1f ff f8 00 ff ff f8 01 ff ff f8 01 ff ff f8 01
00002f0: ff ff f8 01 ff ff fc 03 ff ff fe 47 ff ff 

Pokusme se tento soubor analyzovat:

Informační hlavička

Sekvence bytů Význam
00 00 rezervovaná položka
01 00 typ zdroje (resource)
01 00 celkový počet ikon v souboru

Hlavička ikony

Sekvence bytů Význam
20 šířka ikony je 32 pixelů
20 výška ikony je 32 pixelů
10 ikona obsahuje 16 barev
00 rezervovaná položka
00 00 počet barvových rovin=neuvedeno
04 00 počet bitů na pixel=neuvedeno
e8 02 00 00 délka obrázku je rovna 744 bytům
16 00 00 00 obrázek začíná na offsetu 22 (za tímto údajem)

Hlavička obrázku

Sekvence bytů Význam
28 00 00 00 celková délka této datové struktury je 40 bytů
20 00 00 00 šířka obrázku je 32 pixelů
40 00 00 00 výška obrázku je 32 pixelů (dvojnásobný údaj)
01 00 počet bitových rovin=1
04 00 počet bitů na pixel=4 (16 barev)
00 00 00 00 žádná komprese
80 02 00 00 velikost obrazu je 560 bytů
00 00 00 00 nepoužito
00 00 00 00 nepoužito
00 00 00 00 nepoužito
00 00 00 00 nepoužito

Po těchto údajích následuje 64 bytů barvové palety (16 barev po čtyřech bytech), XOR-bitmapa (512 bytů, 32×32 pixelů, každý je reprezentován čtyřmi bity) a AND-bitmapa (128 bytů, 32×32 pixelů, každý je reprezentován jedním bitem).

4. Ukázka souboru ICO obsahujícího sadu ikon

V dokumentaci WinAPI se píše, že by aplikace měla obsahovat minimálně tři ikony: 16×16 pixelů, šestnáct barev, 32×32 pixelů, šestnáct barev a 48×48 pixelů, 256 barev. To pomáhá operačnímu systému se zobrazením ikon v různých oknech a dialozích. Na desktopu jsou většinou zobrazeny ikony o velikosti 32×32 pixelů, ale po volbě „Zobrazovat velké ikony“ se použijí ikony 48×48 pixelů. Ve startovacím menu a Exploreru se naopak používají ikony velikosti 16×16 pixelů a při zvětšení 32×32 pixelů. Přepočet rozlišení obrázku je samozřejmě ztrátový a celkově nepěkný, z toho důvodu je vhodné výše uvedené doporučení dodržovat. Ukázkový soubor se sadou ikon pochází z instalace Javy 1.4.2. Jedná se o soubor s názvem JavaCup.ico, který obsahuje celkem devět ikon (nových log Javy), jejichž rozměry a počet barev jsou vypsány v následující tabulce:

Číslo ikony Rozlišení Počet barev
1 48×48 16
2 32×32 16
3 16×16 16
4 48×48 256
5 32×32 256
6 16×16 256
7 48×48 224
8 32×32 224
9 16×16 224

Tento ukázkový soubor si můžete stáhnout zde. Detailní rozbor jeho struktury si již ukazovat nebudeme, pouze se podíváme, zda informační hlavička opravdu obsahuje položky o všech devíti uložených ikonách:

Sekvence bytů Význam
00 00 rezervovaná položka
01 00 typ zdroje (resource)
09 00 celkový počet ikon v souboru

gfx_27_2
Jedna ikona získaná ze souboru JavaCup.ico a převedená do formátu PNG

Následují hlavičky jednotlivých ikon, na dalším výpisu jsou seřazeny po šestnácti bytech (což je přesně délka jedné hlavičky):

30 30 10 00 01 00 04 00 68 06 00 00 96 00 00 00
20 20 10 00 01 00 04 00 e8 02 00 00 fe 06 00 00
10 10 10 00 01 00 04 00 28 01 00 00 e6 09 00 00
30 30 00 00 01 00 08 00 a8 0e 00 00 0e 0b 00 00
20 20 00 00 01 00 08 00 a8 08 00 00 b6 19 00 00
10 10 00 00 01 00 08 00 68 05 00 00 5e 22 00 00
30 30 00 00 01 00 20 00 a8 25 00 00 c6 27 00 00
20 20 00 00 01 00 20 00 a8 10 00 00 6e 4d 00 00
10 10 00 00 01 00 20 00 68 04 00 00 16 5e 00 00 

Jako příklad si ukážeme hlavičku první ikony:

Sekvence bytů Význam
30 šířka ikony je 48 pixelů
30 výška ikony je 48 pixelů
10 ikona obsahuje 16 barev
00 rezervovaná položka
01 00 počet barvových rovin=1
04 00 počet bitů na pixel=4
68 06 00 00 délka obrázku je rovna 1640 bytům
96 00 00 00 obrázek začíná na offsetu 150

5. Odkazy na další informační zdroje

  1. Wikipedia: ICO (icon image file format)
    http://en.wiki­pedia.org/wiki/I­CO_%28icon_ima­ge_file_format%29
  2. Wikipedia: Favicon
    http://en.wiki­pedia.org/wiki/Fa­vicon
  3. Mysteries Of The Favicon.ico – How To Create A Favicon In Photoshop
    http://www.pho­toshopsupport­.com/tutorial­s/jennifer/fa­vicon.html
  4. Alfons Hoogervorst: Complete Icon Format Explanation (ukázky v Pascalu)
    http://www.bsdg­.org/SWAG/WIN-OS2/0058.PAS.htm
  5. Hynek Sládeček: 1000 File Formats (Freeware encyklopedie souborových formátů):
    http://www.kro­vina.cz/studna/ 1997, 1998 (bývalá adresa)
  6. Wikipedia: Icons
    http://en.wiki­pedia.org/wiki/Wi­kipedia:Icons

6. Obsah dalšího pokračování tohoto seriálu

V následujícím pokračování tohoto seriálu konečně uzavřeme rozsáhlou kapitolu rastrových grafických formátů. Popíšeme si formát WBMP určený pro mobilní aplikace a dále formát IMG firmy Alias Research.

Našli jste v článku chybu?
Vitalia.cz: „Sjíždět“ porno není bez rizika

„Sjíždět“ porno není bez rizika

120na80.cz: Víte, co je svobodná menstruace?

Víte, co je svobodná menstruace?

Vitalia.cz: Za její cukrovkou stojí rodiče

Za její cukrovkou stojí rodiče

Vitalia.cz: Očkování je nutné, říká homeopatka

Očkování je nutné, říká homeopatka

Měšec.cz: Do ostravské MHD bez jízdenky. Stačí karta

Do ostravské MHD bez jízdenky. Stačí karta

Lupa.cz: Samořídicí taxíky jsou tu. Začíná s nimi Uber

Samořídicí taxíky jsou tu. Začíná s nimi Uber

DigiZone.cz: Hodlá Markíza skončit v DVB-T?

Hodlá Markíza skončit v DVB-T?

DigiZone.cz: AXN u FreeSatu měsíc zdarma

AXN u FreeSatu měsíc zdarma

Podnikatel.cz: Pozor na vykuky, imitují služby České pošty

Pozor na vykuky, imitují služby České pošty

Měšec.cz: Co s reklamací, když e-shop krachuje?

Co s reklamací, když e-shop krachuje?

Vitalia.cz: Musí moudrák opravdu ven?

Musí moudrák opravdu ven?

Podnikatel.cz: Česká pošta vycouvala ze služby ČP Cloud

Česká pošta vycouvala ze služby ČP Cloud

Měšec.cz: Ceny PHM v Evropě. Finty na úspory

Ceny PHM v Evropě. Finty na úspory

Lupa.cz: Hackujete? Můžete mít problém sehnat práci

Hackujete? Můžete mít problém sehnat práci

120na80.cz: Kam umístit silikony?

Kam umístit silikony?

Podnikatel.cz: OSA zdraží, ale taky přidá nový poplatek

OSA zdraží, ale taky přidá nový poplatek

Měšec.cz: Test: Výběry z bankomatů v cizině a kurzy

Test: Výběry z bankomatů v cizině a kurzy

Lupa.cz: Co najdete uvnitř kosmické sondy?

Co najdete uvnitř kosmické sondy?

Měšec.cz: Co když na dovolené přijdete o kartu?

Co když na dovolené přijdete o kartu?

Vitalia.cz: 9 potravin, které nesmí chybět v jídelníčku těhotné

9 potravin, které nesmí chybět v jídelníčku těhotné