PNG naar ICO omzetten

Vrijwel iedereen die een PNG naar ICO omzet is een favicon aan het maken. Browsers vragen al bijna dertig jaar `/favicon.ico` op vanaf de hoofdmap van elke site, en ze doen het nog steeds, wat je HTML ook verklaart — er een neerzetten stopt dus een gestage stroom 404’s in je logboek en dekt de hulpmiddelen die nergens anders kijken.

Moderne favicon-markering mag ook naar een PNG of een SVG wijzen, en de meeste sites leveren allebei. De ICO is de terugval die nooit verklaard hoeft te worden.

Een verpakking en geen compressieformaat, en daarom gaat er bij deze omzetting niets van betekenis verloren. Je beeld wordt er als PNG in bewaard, één per maat, alfakanaal en al, dus een logo met ronde hoeken of een merkteken met doorzichtige hoeken houdt ze precies.

Daarom blijft het bestand ook zo klein. Er wordt niets opnieuw uitgerekend; er komt een inhoudsopgave voor die zegt welke maten erin zitten.

Eén beperking komt uit het formaat en die is hard: een pictogram houdt op bij 256 beeldpunten, dus alles wat groter is wordt verkleind. Het maatveld van een vermelding in de ICO-inhoudsopgave is één byte, en 256 wordt daarin als nul geschreven omdat het er niet in past.

Onder dat plafond kies je zelf. Het veld „Pictogramformaten” bepaalt wat er in de inhoudsopgave terechtkomt, en de standaard schrijft drie vermeldingen — 48, 32 en 16 beeldpunten, de grootste eerst — elk als een eigen PNG. Dat is precies waar een favicon vanaf het begin om vroeg: de browser leest de inhoudsopgave en pakt de vermelding die het dichtst bij de maat ligt die hij gaat tekenen, in plaats van één groot beeld ter plekke te verkleinen met een filter voor alles.

Elke vermelding die hier geschreven wordt is vierkant, want pictogrammen zijn vierkant. Een bron die niet vierkant is wordt niet bijgesneden en niet uitgerekt: hij komt gecentreerd op het vierkant te staan, zo groot als past, en de rest blijft doorzichtig. Er vervormt dus niets, maar een langwerpig logo beslaat dan de halve ruimte en oogt kleiner dan zijn buren in een rij tabbladen.

Maak het daarom vierkant in het programma dat het maakte, op 256 beeldpunten of meer, en laat het merkteken ongeveer negentig procent van het vlak vullen. Dat is één ingreep in de bron, en die bepaalt meer over hoe het pictogram leest dan al het andere op deze pagina.

16 en 32 beeldpunten zijn in de praktijk degene die tellen: 16 voor een browsertabblad en een bladwijzerlijst, 32 voor de taakbalk en de meeste plekken op het bureaublad. Windows tekent pictogrammen in bepaalde weergaven ook op 48 en op 256.

Dat zijn precies de drie die de standaard schrijft, en daarom is het de standaard. Begin toch groot: elke vermelding wordt verkleind uit het beeld dat je erin sleept. Een bron van 256 beeldpunten geeft een schone 48, 32 en 16; een bron van 32 beeldpunten opgeblazen naar 256 ziet er precies zo uit als dat klinkt.

De beperking waar mensen op stuklopen is niet het formaat, het is de rekensom. Op 16 beeldpunten is een letter ongeveer tien beeldpunten hoog, en dat is niet genoeg voor een woordmerk, een slogan, of welke lijn dan ook die dunner is dan de rest.

Wat werkt is één vorm, veel contrast, weinig kleuren: de beginletter en niet de naam, het symbool en niet het hele logo met tekst. Toets het door de PNG tot 16 beeldpunten te verkleinen voordat je omzet — zie je dan niet wat het is, dan redt geen enkel formaat het.

Zet het in de hoofdmap van de site als favicon.ico. Die ene plek dekt browsers die er rechtstreeks om vragen, feedlezers, en oudere hulpmiddelen die nergens anders zoeken.

Het in de HTML-kop aangeven is het daarnaast waard, samen met een PNG voor de huidige browsers en een apple-touch-icon voor het beginscherm van iOS. De ICO is de bodem, niet de hele strategie.

Vrijwel altijd cache, en favicons worden ongewoon hardnekkig bewaard — door de browser, door elk CDN dat voor de site staat, en soms ook door het besturingssysteem.

Laad het adres van het pictogram rechtstreeks om te bevestigen dat het nieuwe bestand geleverd wordt, en wis daarna de sitegegevens van die ene herkomst in plaats van je hele browser. Staat er een CDN voor, leeg die dan ook. Zodra het bestand zelf bevestigd goed is, is de rest geduld.

Sleep er zoveel PNG’s in als je wilt. Elk wordt zijn eigen ICO en ze komen samen terug als ZIP, wat past bij een app of een reeks sites die er elk één nodig hebben.

De omzetting draait in je browser, dus er is geen upload, geen wachtrij en geen grens behalve je eigen machine. Pictogrammen zijn klein genoeg dat dat nooit de knellende factor is.