Artikel

Een favicon maken van een PNG

Een favicon is een kleine afbeelding die browsers weergeven in tabbladen, bladwijzers en geschiedenislijsten. Het goed doen is meer dan een logo verkleinen: het .ico-formaat verpakt meerdere resoluties in één bestand, moderne browsers geven de voorkeur aan PNG, mobiele apparaten hebben hun eigen apple-touch-icon, en web-app-manifests hebben hun eigen iconenset nodig. Dit artikel behandelt elk onderdeel en legt uit hoe de volledige set te produceren vanuit één bron-PNG.

Geschreven door Bastien Sulyan · Gepubliceerd op 29 juni 2026

Wat een favicon is en waar browsers het gebruiken

Het woord favicon is een samentrekking van "favorite icon". Browsers toonden het eerst in de adresbalk in Internet Explorer 5 (1999), waarna het werd overgenomen voor bladwijzers. Tegenwoordig verschijnt het in browsertabbladen, de bladwijzerwerkbalk, browsergeschiedenis, de nieuwe-tabpagina in sommige browsers, en taakbalken van besturingssystemen wanneer een site is vastgezet. Op mobiel gebruikt het apparaat, als een gebruiker een site aan zijn startscherm toevoegt, een gerelateerde maar afzonderlijke afbeelding genaamd de apple-touch-icon in plaats van de standaardfavicon. Zoekmachines tonen soms favicons naast resultaten in hun interface. De afbeelding is klein door het ontwerp, waardoor het effectief is voor snelle visuele identificatie maar ook veeleisend om goed te produceren: bij 16x16 pixels wordt een gedetailleerd logo een onherkenbare vlek. Het faviconbestand zelf heeft door de jaren heen meerdere formaten gekend, waarbij .ico de meest breed compatibele blijft en PNG nu de moderne standaard is voor de meeste browsers.

De .ico-container: meerdere resoluties in één bestand

Het .ico-formaat is een container, geen enkele afbeelding. Een enkel .ico-bestand kan meerdere bitmapafbeeldingen bevatten op verschillende resoluties, elk opgeslagen als een afzonderlijk item in een index aan het begin van het bestand. De drie meest voorkomende afmetingen zijn 16x16, 32x32 en 48x48 pixels. Wanneer Windows een favicon weergeeft in Explorer of op de taakbalk, kiest het het item dat het beste overeenkomt met de weergavecontext. Oudere Windows-versies hadden een 48x48-item nodig voor slots met hoge dichtheid op de taakbalk. Browsers vragen de favicon op bij 16x16 voor tabbladen, maar kunnen een groter item gebruiken als een scherm met hogere dichtheid wordt gedetecteerd. Alle drie de afmetingen in één .ico-bestand verpakken betekent dat één HTTP-verzoek elk gebruik dekt. Ze als afzonderlijke PNG's distribueren is ook geldig maar vereist extra linktags en voegt HTTP-verzoeken toe. De interne afbeeldingen in een .ico-bestand zijn standaard BMP- of PNG-data, dus de container voegt slechts een kleine koptekstoverhead per item toe.

Ontwerpen voor kleine afmetingen: vereenvoudig het teken

Bij 16x16 pixels heeft u in totaal 256 pixels. Een typisch logotype met een woordmerk of fijne details wordt op die grootte onleesbaar. De standaardbenadering is een vereenvoudigd teken te maken: een enkele letter, een abstracte vorm, of een pictogram dat het merk vertegenwoordigt zonder te vertrouwen op detail. Een paar specifieke problemen om te anticiperen: dunne strepen verdwijnen volledig bij kleine afmetingen, vooral op niet-retina-schermen. Letterparen en details van negatieve ruimte lopen samen tot grijs ruis. Kleurverlopen worden nauwelijks zichtbaar. Hoog contrast tussen het teken en de achtergrond is de grootste factor in leesbaarheid. Een solide vorm op een eenvoudige achtergrond leest bij 16x16 bijna altijd beter dan een gedetailleerde illustratie. De 32x32- en 48x48-afmetingen zijn vergevingsgezinder en kunnen wat meer detail ondersteunen, maar de 16x16-versie moet worden behandeld als de bindende beperking. Als het teken nog steeds niet leest bij 16x16, heeft het ontwerp verdere vereenvoudiging nodig.

De moderne set: .ico, PNG-pictogrammen, apple-touch-icon, manifest en HTML-linktags

Een volledige faviconinstellingen voor een openbare site heeft momenteel vijf dingen nodig. Ten eerste een favicon.ico in de root van de site (browsers vragen /favicon.ico direct op zonder een linktag als terugvaloptie). Ten tweede een 32x32 PNG voor moderne desktopbrowsers, aangegeven met een linktag: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. Ten derde een 16x16 PNG voor de tabbladgrootte: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. Ten vierde een apple-touch-icon van 180x180 pixels voor iOS-startschermbladwijzers: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. Ten vijfde een web-app-manifest (site.webmanifest) met een 192x192 en een 512x512 PNG voor Android en progressive web apps. Transparantie wordt ondersteund in PNG en in de PNG-gecodeerde items in .ico, hoewel de apple-touch-icon een ondoorzichtige achtergrond moet hebben omdat iOS het alfakanaal negeert en transparante gebieden met zwart vult.

Lokaal doen: favicon-generator houdt uw afbeelding op uw apparaat

De favicon-generator op deze site neemt een PNG en produceert de volledige set: een favicon.ico met meerdere resoluties verpakt met 16x16, 32x32 en 48x48-items, de afzonderlijke PNG-afmetingen voor direct gebruik met linktags, en de apple-touch-icon van 180x180. Dit alles gebeurt in uw browser met de Canvas API en een JavaScript .ico-encoder. Uw bronafbeelding wordt nergens geüpload; het blijft op uw apparaat. Dit is belangrijk wanneer het bronbestand een bedrijfslogo is of een asset die uw machine niet mag verlaten voordat u bepaalt waar het naartoe gaat. Elk gegenereerd bestand wordt als eigen download aangeboden, met de gangbare bestandsnamen. U kopieert ze naar de root van uw site en voegt de bijbehorende linktags toe aan uw HTML-koptekst. Als uw bronlogo fijne details heeft die de 16x16-render niet overleven, kunt u het bijsnijden of vereenvoudigen voor het in de generator te slepen, of een andere bronafbeelding aanleveren die specifiek is voorbereid voor de favicon.

Tools in dit artikel

Veelgestelde vragen

Heb ik nog steeds een favicon.ico nodig als ik PNG-linktags heb?

Ja, om twee redenen. Ten eerste zoeken browsers die uw HTML niet lezen (webcrawlers, RSS-lezers, sommige oude mobiele browsers) direct naar /favicon.ico in de root van het domein. Als dat bestand ontbreekt, genereren ze bij elke paginalading een 404-verzoek, wat ruis toevoegt aan uw serverlogboeken en een kleine onnodige retour. Ten tweede herkennen oudere versies van Internet Explorer alleen het .ico-formaat en negeren PNG-linktags. Beide leveren dekt alle gevallen.

Kan ik een SVG als favicon gebruiken?

Chrome en Firefox ondersteunen SVG-favicons via `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari ondersteunt geen SVG-favicons. Omdat SVG-favicons resolutie-onafhankelijk zijn, zien ze er scherp uit op elke weergavedichtheid, inclusief retina-schermen, zonder meerdere afmetingsvarianten nodig te hebben. De praktische aanbeveling is de SVG-linktag te declareren voor browsers die het ondersteunen en toch de .ico-terugvaloptie te bewaren voor volledige dekking. SVG-favicons kunnen ook een `prefers-color-scheme`-mediaquery bevatten om automatisch te wisselen tussen een lichte en donkere versie.

Welke afbeelding moet ik gebruiken voor het beste resultaat?

Een vierkante PNG van 512x512 of groter met een transparante achtergrond geeft de meeste flexibiliteit. Beginnen groot en verkleinen bewaart meer detail dan beginnen met een kleine afbeelding. Als uw hoofdlogo een woordmerk bevat, overweeg dan een aparte vereenvoudigde versie voor te bereiden die alleen het pictogram of teken toont, omdat de tekst bij 16x16 niet leesbaar zal zijn, ongeacht de bronresolutie. Hoog contrast tussen het teken en de achtergrond is de meest betrouwbare voorspeller of de kleine afmetingen duidelijk leesbaar zullen zijn.