WebP naar ICO omzetten

Bijna iedereen op deze pagina werkt achterstevoren. De ontwerpbestanden staan bij een bureau dat niet meer reageert, op een gesloten Figma-account, of op een laptop die twee banen geleden werd ingeleverd, en de enige overgebleven kopie van het logo is de WebP die de site zelf serveert.

Dat is een redelijk startpunt en levert een prima bruikbare favicon op. Het loont dertig seconden te zoeken naar iets beters eerst: probeer /favicon.svg op het domein, zoek in de paginabron naar ".svg", of controleer of hetzelfde beeld als PNG wordt geserveerd in een picture-element als terugval.

De ICO hier is beperkt tot 256 pixel op de langste zijde — de eigen grens van het formaat, want de directory bewaart elke afmeting in één byte en 256 wordt als nul genoteerd. Op de meeste iconenpagina’s is dat plafond de hoofdzaak, want de bron is vaak een drukbestand of een camerafoto van duizenden pixels breed.

Hier meestal niet. Sites serveren logo’s op de grootte die de layout nodig heeft, vaak via een resizingdienst, en 240 tot 400 pixel breed is heel gewoon voor een headermerk — ruim meer dan de 48 waar de standaardset op uitkomt. Het risico ligt andersom en bijt alleen als je om formaten vraagt die de bron niet kan leveren.

WebP kent twee smaken en de extensie zegt niet welke. Een verliesvrije WebP van een vlak logo is net zo schoon als een PNG. Een lossy WebP is door een transformatie gegaan die vlakke vlakken vervaagt en langs harde randen ringing achterlaat, en dat is onzichtbaar op 400 pixel en zichtbaar zodra het icoon tot 32 pixel is verkleind.

Het symptoom is een flauwe grijze waas rond het merk. Niets op deze pagina verwijdert dat, want de informatie is weg. Wat helpt, is groter beginnen — een lossy bron van 400 pixel geschaald naar 256 middelt een deel van de ringing weg — en bijsnijden tot het symbool alleen.

De ICO hier bevat een PNG in plaats van een ruwe bitmap. Dat is de moderne conventie, elke Windows sinds Vista leest het, en het bestand is een fractie van de omvang van het alternatief. Belangrijker: het brengt een echt 8-bit alfakanaal mee, en WebP heeft er ook een.

Een favicon heeft dat meer nodig dan de meeste afbeeldingen. Het staat op de tabbladbalk van de browser, die per thema en per browser van kleur verschilt; een merk op een ondoorzichtig wit vlak oogt als een bug in donkere modus.

WebP kan een animatie bevatten, en de decoder hier leest alleen stilstaande beelden. Een geanimeerd bestand wordt met een leesbare melding geweigerd in plaats van stilzwijgend tot zijn eerste beeld te worden teruggebracht.

Het is ook geen verlies in dit geval. Browsers animeren geen ICO-favicons, dus een geanimeerde bron zou nooit een geanimeerd icoon opleveren. Wil je één beeld ervan, open het bestand dan in een browser, pauzeer, maak een schermafbeelding en zet die om.

Dit is eerder een ontwerpprobleem dan een omzettingsprobleem, en het bepaalt het meeste van het resultaat. Een favicon wordt in de praktijk op 16 of 32 pixel bekeken, en op die grootte wordt een tagline een grijze veeg en verdwijnt een dunne lijn.

Snij de WebP bij tot het symbool alleen voordat je omzet: laat de woordmerk weg, laat de marge weg. Bestaat het merk alleen uit een woordmerk, dan is één letter in het merklettertype wat bijna elke bekende site doet.

De ICO-container is ontworpen om meerdere formaten van dezelfde tekening tegelijk te bevatten, en dat schrijft dit: één ingang per formaat, standaard drie op 48, 32 en 16 pixel. Een browser die een tabblad tekent, leest de 16 in plaats van een 256 te verkleinen met een eigen filter.

Metadata reist niet mee. Elke beeldomzetting hier decodeert naar ruwe pixels en codeert opnieuw, dus elke EXIF, XMP of ICC in de WebP valt weg. Voor een favicon is dat volkomen welkom.

Zet het bestand aan de root van de site als /favicon.ico. Browsers vragen dat exacte pad zelf op, of de HTML er nu naar verwijst of niet, wat verklaart waarom de 404 in het log verschijnt zelfs op sites die al een icoon in de head declareren.

Wacht daarna, en wis de cache voordat je iets concludeert. Favicons worden agressief gecachet door elke browser en door tussenliggende proxy’s, en een nieuwe verschijnt routinematig pas na een dag of een harde herlaadbeurt.

libwebp gecompileerd naar WebAssembly decodeert het bestand, het beeld wordt geschaald en als PNG gecodeerd met oxipng per formaat toegepast, en de ICO-header en zijn directory worden eromheen geschreven. Dat alles draait in je browser: niets wordt geüpload.

Op deze pagina is dat de moeite waard om te zeggen in plaats van aan te nemen, want het bestand is een logo dat iemand bezit — mogelijk van een klant, mogelijk nog niet publiek. De gratis limiet is 100 MB per bestand.