Een PNG-afbeelding omzetten naar ICO

Wat is een ICO-bestand?

ICO is het pictogramformaat van Windows, dat browsers hebben overgenomen voor de favicon: het kleine plaatje in het tabblad, bij je bladwijzers en in de geschiedenis. Het bijzondere: één .ico-bestand bevat meerdere afbeeldingen van verschillende formaten. Windows toont de versie van 16 × 16 in lijsten en op de taakbalk, 32 en 48 voor normale pictogrammen, 256 voor de grote pictogrammen in de Verkenner; de browser neemt 16 of 32, afhankelijk van de scherpte van het scherm. Een .png-bestand hernoemen naar .ico is dus niet genoeg: een echt ICO-bestand begint met een header die de formaten opsomt die erin zitten. Deze tool schrijft dat bestand volgens de regels, waarbij elk formaat als PNG wordt opgeslagen, het formaat dat Windows sinds Vista en alle huidige browsers herkennen.

Een favicon maken voor je website

Begin met een vierkant, eenvoudig logo en download het faviconpakket. Het bevat favicon.ico (16, 32 en 48 pixels), apple-touch-icon.png (180 × 180, het pictogram dat verschijnt als je de site op een iPhone aan het beginscherm toevoegt), icon-192.png en icon-512.png (voor Android en webapps), het bestand site.webmanifest dat ze aanmeldt, en de HTML-regels om te kopiëren. Zet deze bestanden in de hoofdmap van je website en plak de regels in de head van je pagina's. Websitebouwers zoals WordPress, Wix of Shopify vragen vaak gewoon om een vierkante PNG: gebruik dan icon-512.png. Browsers onthouden de oude favicon lang: herlaad de pagina na een wijziging met Ctrl+F5 of wacht even.

Het pictogram van een map of snelkoppeling in Windows wijzigen

Voor een map: klik met de rechtermuisknop en kies Eigenschappen, tabblad Aanpassen, knop ‘Ander pictogram…’, dan Bladeren om je .ico-bestand te kiezen. Voor een snelkoppeling: Eigenschappen, tabblad Snelkoppeling, knop ‘Ander pictogram…’. Bewaar het .ico-bestand in een map die niet verandert: wordt het verplaatst of verwijderd, dan gaat Windows terug naar het standaardpictogram. Voor een scherp pictogram in alle weergaven van de Verkenner (kleine, normale, grote en extra grote pictogrammen) vink je met de voorinstelling ‘Windows’ alle formaten van 16 tot 256 pixels aan.

Een pictogram dat ook op 16 pixels leesbaar blijft

Een pictogram van 16 × 16 telt maar 256 pixels: fijne details, tekst en heel dunne lijnen verdwijnen erin. Kies liever een eenvoudige vorm met veel contrast die het hele vierkant vult, zoals een beginletter of een symbool, in plaats van een volledig logo met slogan. Controleer het voorbeeld in het lichte en het donkere tabblad: een zwart logo op een transparante achtergrond wordt onzichtbaar in de donkere modus, en een achtergrondkleur kan het dan redden. Is je afbeelding niet vierkant, kies dan tussen ‘Vierkant bijsnijden’, dat het midden houdt, en ‘Hele afbeelding + randen’, dat transparante of gekleurde randen toevoegt. Een SVG-bestand geeft het scherpste resultaat, omdat het voor elk formaat opnieuw wordt getekend voordat het wordt verkleind.