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.

Ohodnoťte jako ve škole:

Průměrná známka 2,68

Našli jste v článku chybu?
Zasílat nově přidané názory e-mailem
120na80.cz: Tady se vaří padělané léky

Tady se vaří padělané léky

Vitalia.cz: Sója a rakovina

Sója a rakovina

DigiZone.cz: Mafra varuje před stíháním za pomluvu

Mafra varuje před stíháním za pomluvu

DigiZone.cz: Druhá anglická liga pro Digi TV

Druhá anglická liga pro Digi TV

Vitalia.cz: Proč máme prasklý chléb nejraději?

Proč máme prasklý chléb nejraději?

Lupa.cz: Válka e-shopů. Alza končí s Heurekou

Válka e-shopů. Alza končí s Heurekou

120na80.cz: Poznáte, který z léků je pravý?

Poznáte, který z léků je pravý?

Lupa.cz: Kam si doma dáte internet věcí? Na polici?

Kam si doma dáte internet věcí? Na polici?

Vitalia.cz: Ministerstvo: tyto příbory jsou nebezpečné

Ministerstvo: tyto příbory jsou nebezpečné

Podnikatel.cz: Přechod z OSVČ na firmu? Totální šok!

Přechod z OSVČ na firmu? Totální šok!

Podnikatel.cz: Konečně vývar. Skoro jako od Steva Jobse

Konečně vývar. Skoro jako od Steva Jobse

120na80.cz: Velký přehled: 7 očkování proti exotickým nemocem

Velký přehled: 7 očkování proti exotickým nemocem

Lupa.cz: Jak EET vidí ajťák aneb Drahá vražda UX

Jak EET vidí ajťák aneb Drahá vražda UX

120na80.cz: 10 dezinfekcí: Vede „starý dobrý“ peroxid

10 dezinfekcí: Vede „starý dobrý“ peroxid

Podnikatel.cz: Heureka pod Rockaway? Tohle musí splnit

Heureka pod Rockaway? Tohle musí splnit

120na80.cz: Co jí dělá? Sklerotizaci

Co jí dělá? Sklerotizaci

Vitalia.cz: 7 nemocí očí, které musíte léčit včas

7 nemocí očí, které musíte léčit včas

Vitalia.cz: Muži kouří 24 cigaret denně, ženy o dost míň

Muži kouří 24 cigaret denně, ženy o dost míň

Vitalia.cz: Tetanus v USA – i po odřeninách

Tetanus v USA – i po odřeninách

Podnikatel.cz: Šizený guláš na pultě. Jako Lidl to nedělejte

Šizený guláš na pultě. Jako Lidl to nedělejte