PNG naar ICO omzetten voor een scherpe favicon
Een favicon is de kleine afbeelding die een website zijn visuele handtekening geeft. Je ziet hem in het browsertabblad naast de paginatitel, in je bladwijzerlijst, in het keuzemenu voor het adresbalkgeschiedenis en soms naast zoekresultaten. Hij is klein, maar doet veel werk: een herkenbare favicon helpt gebruikers jouw tabblad te vinden tussen een dozijn andere en geeft aan dat een site af en verzorgd is. Het klassieke formaat voor dat kleine icoon is ICO, en de eenvoudigste manier om er een te maken is te beginnen met een nette vierkante PNG en die om te zetten.
Dit hulpmiddel neemt een PNG-afbeelding en maakt er direct in je browser een ICO-favicon van. De conversie verloopt lokaal op je eigen apparaat, zodat de afbeelding die je kiest nooit naar een server wordt geüpload. Dat is belangrijk wanneer je icoon een logo of merkasset is die je liever niet aan een derde overdraagt. Wanneer het bestand klaar is, download je het gewoon.
Wat het ICO-formaat is en waarom het meerdere groottes bevat
ICO is een icoonscontainerformaat dat zijn oorsprong heeft in Microsoft Windows, waar het de iconen opslaat die worden gebruikt voor programma's, snelkoppelingen en mappen. De definierende eigenschap — en de reden waarom het de standaard is geworden voor webfavicons — is dat één ICO-bestand dezelfde afbeelding op meerdere resoluties tegelijk kan bevatten. In plaats van één vaste bitmap bevat het bestand een kleine set vierkante afbeeldingen en laat de browser of het besturingssysteem kiezen welke grootte past op de plek waar het icoon moet worden getekend.
Dat is oprecht nuttig. Een browsertabblad heeft een klein icoon nodig, een bladwijzerbalk gebruikt misschien een iets grotere en een vastgezette snelkoppeling op het bureaublad kan om iets nog groters vragen. Met een multi-grootte ICO pakt elke context de versie die erbij past, zodat je icoon scherp blijft in plaats van opgeschaald te worden vanuit één kleine bitmap en wazig te worden. ICO bewaart ook transparantie, waardoor de hoeken van een rond of onregelmatig logo netjes afsteken tegen elke tabbladkleur.
Aanbevolen favicongroot
Voor een websitefavicon zijn de drie groottes die het waard zijn te gebruiken 16x16, 32x32 en 48x48 pixels. De versie van 16 pixels is de versie die de meeste browsers in het tabblad en de adresbalk weergeven. De versie van 32 pixels wordt gebruikt op schermen met hogere resolutie en in sommige bladwijzer- en geschiedenisweergaven, zodat alles scherp blijft op moderne schermen. De versie van 48 pixels dekt grotere contexten zoals Windows-sitesnelkoppelingen. Omdat ze allemaal in één ICO-bestand staan, lever je één asset en laat je elk oppervlak kiezen wat het nodig heeft.
Begin met een vierkante PNG zodat er niets wordt uitgerekt. Als je bronafbeelding rechthoekig of te groot is, snijd of schaal hem dan eerst bij tot een nette vierkant met onze afbeeldingsverkleiner en voer dan de conversie uit. Een eenvoudig, hoogcontrast ontwerp is op 16 pixels veel beter leesbaar dan een gedetailleerde illustratie, dus kies voor gedurfde vormen boven fijne tekst.
Hoe je de favicon aan je site toevoegt
Zodra je je ICO-bestand hebt, upload je het naar je website — traditioneel naar de siteroot als favicon.ico. Veel browsers vinden het daar automatisch, maar het is best practice het expliciet te declareren in de head van je HTML zodat er geen giswerk is. Voeg een link-tag als volgt toe:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Plaats die regel in de <head>-sectie van je pagina's. Het rel="icon"-attribuut vertelt de browser dat deze resource het pagina-icoon is, en de href wijst naar waar je het bestand hebt opgeslagen. Als je een root-relatief pad zoals het bovenstaande gebruikt, werkt dezelfde declaratie op elke pagina van je site. Na het implementeren moet je mogelijk een harde refresh uitvoeren of de cache leegmaken voordat het nieuwe icoon verschijnt, omdat browsers favicons hardnekkig vasthouden.
Privéconversie in je browser
Alles gebeurt op jouw apparaat. De PNG die je kiest wordt lokaal gelezen, gedecodeerd en opnieuw gecodeerd als ICO, en er verlaat niets je machine tijdens het proces. Er is geen account, geen wachtrij en geen opslag aan de serverzijde, wat dit handig maakt zelfs voor onuitgegeven logo's of klantwerk onder een overeenkomst. Bekijk onze volledige set afbeeldingstools voor meer manieren om afbeeldingen voor te bereiden en op te schonen.
Veelgestelde vragen
Wordt mijn afbeelding ergens geüpload?
Nee. De PNG wordt volledig in je browser op je eigen apparaat naar ICO omgezet. Er wordt niets naar een server gestuurd en er wordt niets opgeslagen, zodat je afbeelding privé blijft.
Welke groottes moet mijn favicon bevatten?
De meest nuttige groottes zijn 16x16, 32x32 en 48x48 pixels. De afbeelding van 16 pixels wordt weergegeven in browsertabbladen, terwijl de grotere versies het icoon scherp houden op schermen met hoge resolutie en bureaubladsnelkoppelingen.
Waarom ICO gebruiken in plaats van gewoon een PNG?
ICO is het bewezen faviconsformaat en kan meerdere groottes in één bestand opslaan. Browsers en het besturingssysteem kiezen de resolutie die bij elke context past, zodat het icoon scherp blijft in plaats van opgeschaald te worden vanuit één bitmap.
Behoudt de ICO de transparantie van mijn PNG?
Ja. Het ICO-formaat ondersteunt transparantie, zodat de doorzichtige gebieden van je PNG bewaard blijven en het icoon netjes samensmelt met elke tabblad- of achtergrondkleur.
Hoe voeg ik de favicon toe aan mijn website?
Upload het ICO-bestand naar je site, doorgaans als favicon.ico in de root, en voeg een link-tag toe in de head van je HTML, zoals link rel icon type image x-icon href slash favicon.ico. Leeg daarna je browsercache om het te zien.
Mijn bronafbeelding is niet vierkant. Wat moet ik doen?
Snijd hem bij of schaal hem tot een vierkant zodat hij niet wordt uitgerekt. Je kunt onze afbeeldingsverkleiner gebruiken om een nette vierkant te maken en dat dan omzetten naar ICO voor de best uitziende favicon.