Zo gebruik je het
- Sleep een .ico-bestand naar het sleepvak, klik om er een te kiezen of plak een afbeelding.
- Kies Origineel behouden, zodat alle groottes die in het pictogram zijn opgeslagen in de uitvoer terechtkomen.
- Controleer de gecodeerde grootte; een pictogram met veel groottes kan groter zijn dan je verwacht.
- Kopieer de data-URI voor een favicon-linktag, of kopieer de uitvoer als img-tag, CSS of Markdown.
Het ICO-formaat
ICO is het pictogramformaat van Windows en het oorspronkelijke faviconformaat. Het is een container: een korte inhoudsopgave somt een of meer afbeeldingen op met hun breedte, hoogte en kleurdiepte, en elke afbeelding is opgeslagen als bitmapgegevens of, bij grote formaten zoals 256 bij 256, als ingesloten PNG. Een typische favicon.ico bevat versies van 16, 32 en 48 pixels, zodat de browser de scherpste kan kiezen.
Het geregistreerde MIME-type is image/vnd.microsoft.icon, maar image/x-icon komt veel vaker voor, en browsers accepteren beide. ICO-gegevens in Base64 beginnen met AAABAA, de gecodeerde bestandsheader.
Een favicon als data-URI
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">Het favicon inline opnemen is handig voor HTML-documenten in één bestand, zoals geëxporteerde rapporten, op schijf opgeslagen dashboards en offline documentatie, en voor prototypes of interne tools waarbij je geen apart bestand wilt uitrollen. Op een website met veel pagina's is een gewone /favicon.ico meestal beter: die wordt één keer gedownload en gecachet, terwijl een data-URI in elk HTML-antwoord wordt herhaald.
Wil je helemaal geen pictogram, dan voorkomt <link rel="icon" href="data:,"> dat de browser /favicon.ico opvraagt.
Favicons in ICO, PNG of SVG
Huidige browsers accepteren ook favicons in PNG en SVG, bijvoorbeeld <link rel="icon" type="image/png" href="data:image/png;base64,...">. Eén PNG van 32 bij 32 is vaak kleiner dan een ICO met meerdere groottes; gebruik daarvoor PNG naar Base64 of SVG naar Base64.
Als je hier een ICO naar PNG, JPEG of WebP converteert, blijft er maar één afbeelding over: degene die de browser kiest om weer te geven. Wil je de andere kant op en een ICO-bestand maken, codeer dan een PNG en plak het resultaat in Base64 naar ICO, dat pictogrammen van 16 tot 256 pixels schrijft.
Veelgestelde vragen
Moet ik image/x-icon of image/vnd.microsoft.icon gebruiken?
image/vnd.microsoft.icon is het officieel geregistreerde type, terwijl image/x-icon het type is dat de meeste sites gebruiken. Verwacht een systeem een bepaald type, pas dan na het kopiëren het voorvoegsel aan.Blijven alle pictogramgroottes behouden in de Base64-uitvoer?
Ja, als je het originele formaat behoudt. Het hele bestand wordt gecodeerd, dus de browser kan nog steeds de grootte kiezen die hij nodig heeft. Bij conversie naar een ander formaat blijft er één afbeelding over.
Werken favicons als data-URI in elke browser?
Huidige desktopbrowsers tonen ze in het tabblad. Bladwijzers, snelkoppelingen op het beginscherm en sommige oudere browsers kunnen een inline pictogram negeren, dus openbare websites moeten nog steeds een faviconbestand aanbieden.