Bestandsformaten
Wat is ICO? Iconbestanden en favicons uitgelegd
ICO is het iconformaat van Windows dat meerdere formaten in één bestand bewaart. We leggen de opbouw uit, de geschiedenis van de favicon en welke formaten je vandaag nodig hebt.
Auteur: Hemen Dönüştür Editör EkibiGepubliceerd: 8 min lezen
ICO is het formaat dat Windows gebruikt voor iconen van programma's en mappen, en dat het web gebruikt voor het kleine site-icoon in een browsertabblad (de favicon). Wat het onderscheidt van andere afbeeldingsformaten, is dat één bestand meerdere formaten van hetzelfde icoon kan bevatten. Dit artikel legt de interne opbouw van een ICO-bestand uit, hoe die zich over de Windows-versies heen ontwikkelde, de geschiedenis van de favicon, welke formaten je vandaag nodig hebt en hoe je ICO-bestanden goed maakt.
Wat is ICO?
ICO (extensie .ico) is een containerformaat dat Microsoft voor iconbronnen definieerde. Een ICO-bestand begint met een "icon directory" die elke afbeelding in het bestand (bijvoorbeeld 16x16, 32x32 en 48x48 pixels) als aparte vermelding opsomt. Windows of de browser kiest daarna het formaat dat het best past bij de plek waar het icoon wordt getoond.
Het officiële MIME-type dat bij IANA is geregistreerd, is image/vnd.microsoft.icon, maar software van Microsoft en veel servers gebruiken nog image/x-icon. Het CUR-formaat voor muisaanwijzers is vrijwel identiek; het gebruikt 2 in plaats van 1 in het typeveld van de directory en slaat het klikpunt (hotspot) van de aanwijzer op.
Geschiedenis: van Windows-iconen tot de favicon
- Windows 1.0: iconen waren monochroom.
- Windows 3.0: de op een directory gebaseerde structuur met meerdere afbeeldingen, zoals we die nu kennen, deed haar intrede.
- 1995: het Microsoft-artikel "Icons" van John Hornick documenteerde de ICO-structuur in detail en raadde ontwikkelaars aan minstens afbeeldingen van 16x16 (16 kleuren), 32x32 (16 kleuren) en 48x48 (256 kleuren) op te nemen.
- Maart 1999: Internet Explorer 5 werd de eerste browser met ondersteuning voor favicons. Een bestand
favicon.icoin de hoofdmap van de site werd getoond bij favorieten en in de adresbalk. - Windows XP: 32-bits afbeeldingen kregen een 8-bits alfakanaal, waardoor zachte, halfdoorzichtige randen mogelijk werden.
- Windows Vista: afbeeldingen van 256x256 en PNG-compressie binnen ICO werden toegevoegd.
- 2003: het MIME-type
image/vnd.microsoft.iconwerd door een derde partij bij IANA ingediend.
Opbouw van een ICO-bestand
Icon directory (ICONDIR)
Het bestand begint met een header van 6 bytes: een gereserveerd veld (0), het type (1 voor iconen, 2 voor aanwijzers) en het aantal afbeeldingen. Daarna volgt voor elke afbeelding een directoryvermelding van 16 bytes.
Directoryvermelding (ICONDIRENTRY)
| Veld | Betekenis |
|---|---|
| bWidth, bHeight | Breedte en hoogte (elk 1 byte). De waarde 0 betekent 256 pixels. |
| bColorCount | Aantal paletkleuren (0 bij 8 bits en meer) |
| wPlanes, wBitCount | Kleurvlakken en bits per pixel |
| dwBytesInRes | Grootte van de beeldgegevens in bytes |
| dwImageOffset | Waar de beeldgegevens in het bestand beginnen |
Omdat de groottevelden maar één byte zijn, kan een afbeelding in een ICO maximaal 256x256 pixels zijn.
Beeldgegevens: BMP of PNG
In een klassiek ICO is elke afbeelding een BMP zonder bestandsheader (een DIB). Volgens het artikel van Hornick bevat die een kleurenafbeelding (het XOR-masker) gevolgd door een 1-bits transparantiemasker (het AND-masker); daarom is de hoogte in de header de gezamenlijke hoogte van beide maskers, twee keer de werkelijke hoogte. Vanaf Windows XP dragen 32-bits afbeeldingen hun alfakanaal direct in de pixelgegevens.
Sinds Windows Vista kan een vermelding ook een volledig PNG-bestand zijn in plaats van een BMP. PNG insluiten, vooral voor het formaat 256x256, maakt het bestand veel kleiner. MDN wijst erop dat PNG binnen ICO vóór Vista niet werd ondersteund en in oude software problemen kan geven, maar actuele browsers en Windows-versies lezen beide soorten.
Welke formaten heb je nodig?
App-iconen voor Windows
Volgens de actuele richtlijnen van Microsoft voor app-iconen moet een Win32-app minstens 16x16, 24x24, 32x32, 48x48 en 256x256 bevatten. Vindt Windows geen exacte match, dan schaalt het het eerstvolgende grotere formaat omlaag; met een afbeelding van 256 pixels erbij wordt het icoon alleen verkleind, nooit vergroot. Bij 100% schaal gebruiken de titelbalk en contextmenu's bijvoorbeeld 16 pixels en de taakbalk 24; bij 200% worden dat 32 en 48.
Favicons voor websites
Op het web werkt het anders. Volgens de HTML Standard mogen browsers /favicon.ico uit de hoofdmap van de site opvragen als een pagina geen link met rel="icon" heeft. Een favicon.ico in de hoofdmap is dus nog steeds een goede gewoonte, maar op zichzelf niet genoeg:
- Google Zoeken vereist een vierkante favicon (1:1) van minstens 8x8 pixels en raadt er een groter dan 48x48 aan, zodat hij er op verschillende plekken goed uitziet.
- Startschermen van iPhone en iPad gebruiken een
apple-touch-iconvan 180x180. - Android en PWA's verwachten iconen van 192 en 512 pixels in het web app manifest, plus een "maskable" versie voor adaptieve iconen.
- Actuele browsers ondersteunen ook SVG-favicons; één vectorbestand dekt elk formaat.
In de praktijk dek je met 16, 32 en 48 pixels in favicon.ico desktopbrowsers en oudere systemen af, terwijl grotere formaten als aparte PNG-bestanden worden aangeleverd.
Ondersteuning in systemen, browsers en software
Windows leest en schrijft ICO zonder hulp; Verkenner, snelkoppelingen en het bureaublad werken er allemaal mee. Volgens MDN tonen Chrome, Edge, Firefox, Opera en Safari ICO-bestanden. macOS gebruikt voor app-iconen een eigen formaat, ICNS, maar Voorvertoning opent ICO. Editors zoals GIMP openen een ICO als bestand met lagen, één laag per formaat. MDN raadt ICO af voor gewone webcontent en merkt op dat favicons zijn opgeschoven naar PNG met een <link>-element.
Sterke en zwakke punten
| Sterke punten | Zwakke punten |
|---|---|
| Meerdere formaten en kleurdieptes in één bestand | Maximaal 256x256 pixels |
| Universele ondersteuning op Windows | Op het web geen nut buiten favicons |
| Alfakanaal en PNG-compressie (Vista en later) | Oude, op BMP gebaseerde vermeldingen zijn groot en onhandig |
| Browsers zoeken automatisch naar een favicon.ico in de hoofdmap | Vraagt om een aparte tool; niet elk programma kan het schrijven |
Veelvoorkomende problemen en oplossingen
Is een PNG hernoemen naar .ico niet genoeg?
Sommige browsers accepteren het, maar het is geen echt ICO: er is geen icon directory en Windows accepteert het niet als icoon. De juiste manier is de afbeelding om te zetten naar een echt ICO. Onze tools PNG naar ICO en JPG naar ICO schrijven altijd vierkanten van 16, 32 en 48 pixels en voegen 64, 128 en 256 toe als je afbeelding groot genoeg is. Elk formaat wordt als PNG ingesloten, dus de transparantie blijft behouden.
De favicon is wazig of onleesbaar
Dunne lijnen en kleine tekst verdwijnen in 16 pixels. Gebruik een krachtig, eenvoudig beeldmerk met veel contrast; neem zo nodig alleen het symbooldeel van je logo. Een vierkante bron van minstens 256x256, liefst 512x512 pixels, geeft het beste resultaat.
Een niet-vierkante afbeelding ziet er platgedrukt of uitgerekt uit
Iconen zijn vierkant. Onze tools rekken de afbeelding nooit uit: ze centreren haar met behoud van verhoudingen in een vierkant en laten de randen transparant. Voor een perfect vierkant snijd je eerst een vierkant stuk uit met afbeelding bijsnijden.
De nieuwe favicon verschijnt niet
Browsers bewaren favicons lang in hun cache. Het bestand hernoemen of een versieparameter toevoegen (/favicon.ico?v=2), en controleren of de server het juiste MIME-type teruggeeft, lost het meestal op. Het icoon in de zoekresultaten van Google wordt pas bijgewerkt nadat de site opnieuw is gecrawld.
Windows toont nog het oude icoon
Windows bewaart iconen in een aparte cache. De app opnieuw bouwen en de snelkoppeling opnieuw maken, of uit- en weer inloggen, is vaak genoeg.
Tips voor het converteren
- Eén ICO is niet genoeg voor een website: de favicongenerator maakt in één keer favicon.ico (16, 32 en 48 pixels), favicon-48x48.png, apple-touch-icon.png (180 pixels), icon-192.png, icon-512.png, een maskable icon-512-maskable.png en site.webmanifest, plus icon.svg als de bron een SVG is. Je krijgt er ook het stukje code bij om in de
<head>van je pagina te plakken. - Het Apple-icoon heeft een dekkende achtergrond nodig: iOS toont transparante delen als zwart en rondt de hoeken zelf af, dus de favicongenerator vult de apple-touch-icon met de achtergrondkleur die je kiest.
- Is je logo een SVG: maak dan een grote PNG met SVG naar PNG en zet die om naar ICO, of geef de SVG direct aan de favicongenerator.
Onze tools voor ICO en favicons draaien in je browser; je afbeelding wordt niet geüpload en verlaat je apparaat nooit.
Veelgestelde vragen
Hoe groot kan een ICO-afbeelding maximaal zijn?
De velden voor breedte en hoogte in een directoryvermelding zijn elk één byte, en 0 betekent 256. Een afzonderlijke afbeelding in een ICO is dus maximaal 256x256 pixels.
Gebruik ik ICO of PNG voor mijn favicon?
Allebei. Een favicon.ico in de hoofdmap met 16, 32 en 48 pixels bedient oudere browsers en automatische verzoeken; geef PNG-iconen (en eventueel SVG) met <link>-tags op voor actuele browsers en mobiele apparaten.
Ondersteunt ICO transparantie?
Ja. Oude ICO's gebruiken een 1-bits masker, 32-bits afbeeldingen hebben sinds Windows XP een volledig alfakanaal, en ingesloten PNG draagt sinds Vista transparantie.
Hoe zet ik een ICO-bestand om naar PNG?
Voeg je ICO toe aan de afbeeldingsconverter en kies PNG als doel. Bevat het bestand meerdere formaten, dan wordt het grootste gebruikt.
Worden ICO-bestanden op een Mac gebruikt?
macOS gebruikt voor app-iconen het formaat ICNS. Voor websites werken favicon.ico en PNG-iconen in browsers op elk besturingssysteem.
