CodeKitHubWat is deze tool?
Een favicon.ico is niet zomaar een klein plaatje — het is een containerformaat dat meerdere groottes van hetzelfde icoon in één bestand kan bevatten, zodat de browser, taakbalk of bladwijzerbalk kan kiezen welke resolutie er het scherpst uitziet op de plek waar het getoond wordt. Een PNG hernoemen naar favicon.ico levert dat niet op: het is een enkele afbeelding met de verkeerde bestandsextensie, en hoewel sommige browsers dit tolereren, verwachten veel tools, crawlers en oudere browsers die de ruwe bytes lezen de echte ICO-containerstructuur en zullen ze falen of terugvallen op een leeg icoon.
Deze tool bouwt een echte ICO-container: hij rendert je SVG op 16×16, 32×32 en 48×48, codeert elk intern als PNG, en pakt alle drie in één geldig favicon.ico-bestand met hetzelfde PNG-in-ICO-formaat dat elke browser en elk besturingssysteem sinds Windows Vista ondersteunt. Daarnaast krijg je aparte PNG-bestanden op 180×180 (de grootte die iOS gebruikt voor het icoon wanneer iemand je site aan het beginscherm toevoegt) en 192×192 / 512×512 (de groottes die Android en PWA-installatiepromts uit je web-app-manifest halen).
Waarom gebruiken?
- Produceert een écht geldige multi-resolutie favicon.ico, geen hernoemde PNG.
- Dekt elke icoongrootte die een echte deployment nodig heeft in één keer: 16, 32, 180, 192, 512px.
- Kant-en-klare HTML voor je <head> — geen giswerk met rel/sizes/type-attributen.
- Niet-vierkante SVG's worden gecentreerd op een transparant vierkant in plaats van uitgerekt.
- Alles rendert lokaal in je browser; de SVG wordt nooit geüpload.
Hoe te gebruiken
- Klik op het vak of sleep je SVG-logobestand ernaartoe.
- De tool rendert het automatisch op elke faviconformaat — geen instellingen nodig.
- Download favicon.ico voor je siteroot, plus de losse PNG-iconen.
- Kopieer het HTML-fragment en plak het in de <head> van je pagina.
Voorbeeld
Invoer
logo.svg — een bedrijfslogo, 3 KB vectorUitvoer
favicon.ico (16/32/48px gecombineerd), plus favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngEén SVG erin, elk icoonbestand dat een echte deployment nodig heeft eruit.
Welke icoongrootte waarvoor wordt gebruikt
| Bestand | Grootte | Gebruikt voor |
|---|---|---|
| favicon.ico | 16/32/48px (gecombineerd) | Browsertab, bladwijzerbalk, taakbalk |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Terugvaloptie voor browsers die PNG-favicons prefereren |
| apple-touch-icon.png | 180×180 | iOS-beginschermicoon wanneer de site aan het beginscherm wordt toegevoegd |
| icon-192.png | 192×192 | Android-beginschermicoon, web-app-manifest |
| icon-512.png | 512×512 | PWA-installatiepromt, Android-opstartschermicoon |
Waarom de SVG-bron ertoe doet
Omdat SVG vormen als wiskunde opslaat in plaats van pixels, beginnen een fris rendering op 16px en op 512px allebei vanuit exact dezelfde paddata — er is geen opschalingsartefact aan de grote kant en geen geforceerd pixel-snapping-giswerk waar de tool aan de kleine kant compromissen voor moet sluiten. Als je alleen een PNG-logo hebt, kan deze tool niet helpen; converteer of hermaak het logo eerst als SVG, want een kleine PNG opschalen naar 512px zou gewoon een wazig resultaat opleveren.
Veelgestelde vragen
Waarom kan ik niet gewoon een PNG hernoemen naar favicon.ico?
Een .ico-bestand heeft een eigen binair containerformaat (een ICONDIR-header die beschrijft hoeveel afbeeldingen het bevat, gevolgd door een directory-item per afbeelding) — een PNG die naar .ico wordt hernoemd, blijft gewoon een PNG met de verkeerde extensie. De meeste moderne browsers zijn coulant en renderen het toch, maar deze tool bouwt een echte ICO-container met drie daadwerkelijke resoluties, wat is waarvoor het formaat is ontworpen en wat strengere lezers verwachten.
Waarom heb ik PNG-iconen nodig als ik al favicon.ico heb?
favicon.ico dekt alleen het klassieke gebruik in browsertab/bladwijzer. De 180×180 PNG is wat iOS gebruikt wanneer een gebruiker je site aan het beginscherm toevoegt (apple-touch-icon), en de 192×192 / 512×512 PNG's zijn wat Android en PWA-installatiepromts uit je web-app-manifest halen. Zonder deze valt je icoon op een telefoonbeginscherm terug op een generieke schermafbeelding of leeg vierkant.
Mijn logo is niet vierkant — wat gebeurt ermee?
Het wordt gecentreerd op een transparant vierkant op elke doelgrootte in plaats van uitgerekt, zodat een breed of hoog logo zijn juiste verhoudingen behoudt in plaats van in een vierkant geperst te worden.
Waar plaats ik de gedownloade bestanden?
Plaats favicon.ico, apple-touch-icon.png, icon-192.png en icon-512.png in de hoofdmap van je site (naast index.html), en plak dan de gegenereerde <link>-tags in de <head> van je pagina.
Wordt mijn SVG ergens geüpload?
Nee. De SVG wordt gerenderd op lokale <canvas>-elementen en de ICO/PNG-bestanden worden in je browser samengesteld. Er wordt niets naar een server gestuurd.