.ico blijft het verwachte formaat in de hoofdmap van een site. De meeste online converters vragen je om je afbeelding naar hun server te uploaden. Hier lees je hoe je vanuit een PNG een correct favicon.ico-bestand met meerdere afmetingen maakt, zonder iets te uploaden.
Een .ico is meer dan een hernoemde afbeelding
logo.png hernoemen naar favicon.ico is niet voldoende. ICO is een containerformaat met een eigen header: die beschrijft hoeveel afbeeldingen het bestand bevat, welke afmetingen ze hebben en waar ze in het bestand beginnen. Een hernoemde PNG heeft die header niet en strengere browsers weigeren deze weer te geven.
Een correct ICO-bestand bevat meerdere resoluties van hetzelfde pictogram. De browser leest de header, kiest de variant die het dichtst bij de gewenste afmeting ligt en hoeft niets te vergroten.
Een PNG naar ICO omzetten in drie stappen
Stap één: bereid de bron voor. Een vierkante PNG van minstens 512×512 pixels geeft het beste resultaat, omdat elke afmeting door verkleining ontstaat. Heeft je afbeelding een transparante achtergrond, bepaal dan nu of je die wilt behouden: prima voor een tabblad, maar iOS en Android vervangen deze door zwart.
Stap twee: genereer de resoluties. Het bestand moet minstens 16×16, 32×32 en 48×48 bevatten. Gebruik bij het schalen een kwalitatief resamplingfilter, anders worden de kleine versies onleesbaar.
Stap drie: bundel ze. De drie afbeeldingen worden samengevoegd in één ICO-container, waarvan de header elke vermelding beschrijft. Plaats het resultaat als favicon.ico in de hoofdmap van de site, waar browsers het zelfs zonder HTML-tag vinden.
Waarom lokale conversie belangrijk is
De meeste PNG-naar-ICO-converters uploaden je bestand naar een server, verwerken het daar en sturen het resultaat terug. Je logo, vaak nog vóór de publieke lancering, belandt op een machine waarover je geen controle hebt, met een bewaarbeleid dat je niet hebt gelezen.
Een moderne browser kan dit echter allemaal zelf: een PNG decoderen, schalen op een canvas, elke afmeting opnieuw coderen en de ICO-container samenstellen. Dat doet LFFavicon. Geen verzoek verstuurt je afbeelding en als je het tabblad sluit, wordt alles gewist.
Het voordeel is ook praktisch: de conversie gebeurt direct, werkt offline nadat de pagina is geladen en kent geen wachtrij of daglimiet.
Alleen .ico is niet meer genoeg
Je PNG omzetten naar ICO dekt tabbladen en oudere programma's, maar drie toepassingen blijven over: moderne browsers die de voorkeur geven aan een SVG die op elke grootte scherp blijft, het iOS-startscherm dat een ondoorzichtige PNG van 180×180 nodig heeft en Android dat het webmanifest leest.
Als je de afbeelding toch verwerkt, kun je beter meteen de hele set maken. Dat doet de generator: één bron levert de .ico, SVG, het Apple Touch-pictogram en de manifestpictogrammen op, met voor elke toepassing een voorbeeld voordat je downloadt.
Primaire bronnen
Veelgestelde vragen
Welke PNG-afmeting heb je nodig om een ICO te maken?
Een vierkant van minstens 512×512 pixels. Onder 128×128 moeten de grotere versies in het pakket worden vergroot, waardoor het resultaat onscherp wordt. Een SVG is nog beter, omdat die geen resolutielimiet heeft.
Blijft transparantie behouden in de .ico?
Ja, het ICO-formaat ondersteunt een volledig alfakanaal en een transparante PNG blijft transparant in het tabblad. Let wel op het iOS-pictogram: het systeem vult transparante delen met zwart, dus geef het een achtergrond.
Waar moet het bestand favicon.ico staan?
In de hoofdmap van het domein, bereikbaar via https://yoursite.com/favicon.ico. Browsers en crawlers vragen volgens conventie precies dat adres op, ook wanneer geen linktag het vermeldt.