Zo gebruik je het
- Plak de Base64-string of data-URI van een pictogram, of van de afbeelding waarvan je een pictogram wilt maken.
- Controleer het voorbeeld en de afmetingen. Een vierkante bronafbeelding levert het strakste pictogram op.
- ICO is al geselecteerd. Kies bij Pictogramgrootte één grootte (16, 32, 48, 64, 128 of 256 pixels) of Meerdere formaten (16, 32, 48, 256).
- Download het .ico-bestand. Is de invoer al een ICO en wil je alle afbeeldingen erin ongewijzigd houden, kies dan Origineel.
ICO-bestanden in Base64
Een ICO-bestand is een kleine container: een header, een lijst met items en één afbeelding per item, elk opgeslagen als BMP- of PNG-gegevens. De header begint met de bytes 00 00 01 00, dus de Base64-vorm van een pictogram begint met AAABAA. Je ziet Base64-pictogrammen in favicon-data-URI's zoals <link rel="icon" href="data:image/x-icon;base64,...">, in HTML-pagina's die uit één bestand bestaan en in API's die websitepictogrammen teruggeven.
Het geregistreerde MIME-type is image/vnd.microsoft.icon, maar image/x-icon komt veel vaker voor en werkt overal.
Welke pictogramgrootte kies je
| Grootte | Typisch gebruik |
|---|---|
| 16 × 16 | Browsertabblad en bladwijzer op standaardschermen |
| 32 × 32 | Browsertabblad op schermen met een hoge pixeldichtheid |
| 48 × 48 | Pictogrammen op het Windows-bureaublad en in Verkenner |
| 64, 128 | Grotere voorbeelden en lijsten met toepassingen |
| 256 × 256 | De weergaven Grote en Extra grote pictogrammen in Windows |
De optie Meerdere formaten (16, 32, 48, 256) bundelt al die groottes in één bestand, zodat elk systeem de best passende kan kiezen. De afbeeldingen erin zijn als PNG gecomprimeerd; dat behoudt transparantie en wordt ondersteund door Windows Vista en later en door alle moderne browsers.
Het pictogram als favicon gebruiken
Browsers vragen /favicon.ico automatisch op uit de hoofdmap van de site, dus het bestand daar opslaan werkt zelfs zonder enige opmaakcode. Een Base64-data-URI in de href bespaart dat verzoek, maar dan wordt het pictogram bij elke pagina opnieuw gedownload in plaats van apart in de cache te worden bewaard. Moderne browsers accepteren ook PNG- en SVG-pictogrammen, en een gangbare opzet combineert beide:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">Begin met een vierkante afbeelding met eenvoudige vormen en sterk contrast; fijne details verdwijnen bij 16 pixels. Wil je een PNG-versie voor ander gebruik, probeer dan Base64 naar PNG.
Veelgestelde vragen
Hoe groot moet favicon.ico zijn?
Een pictogram in meerdere formaten, met afbeeldingen van 16, 32 en 48 pixels, dekt browsers en Windows. De optie Meerdere formaten (16, 32, 48, 256) voegt hier ook 256 toe voor grote pictogramweergaven.
Kan ik een Base64-PNG of -SVG omzetten naar ICO?
Ja. Plak hem, laat Downloaden als op ICO staan en kies een grootte. Elke afbeelding die je browser kan weergeven, kan worden geconverteerd.
Waarom toont het voorbeeld maar één grootte van mijn pictogram?
Een ICO-bestand kan meerdere afbeeldingen bevatten, maar een voorbeeld toont er maar één. Download als Origineel om alle afbeeldingen in het bestand te behouden.
Behoudt de ICO transparantie?
Ja. De pictogrammen worden opgeslagen als PNG-gegevens met een volledig alfakanaal, dus afgeronde hoeken en zachte randen blijven transparant.
Hoe zet ik een pictogram in een data-URI?
href van je <link rel="icon">-tag.