Wat is een favicon en hoe maak je er een van je logo (2026)

Een favicon is het piepkleine icoon dat je site vertegenwoordigt in een browsertabblad, een bladwijzer, of het beginscherm van een telefoon. Maak het van het beeldmerk van je logo, vereenvoudig het zodat het duidelijk blijft op 16–32 pixels, en lever de minimale bestandenset van 2026: een SVG, een ICO-terugval, en een apple-touch-icon van 180×180.

Door LogoSagaGepubliceerd
Op deze pagina
  1. Wat is een favicon?
  2. Waarom is een favicon belangrijk?
  3. De faviconformaten en -bestandstypen die je nodig hebt
  4. Hoe maak je een favicon van je logo
  5. Een favicon koppelen in je HTML
  6. Bonus: een favicon die zich aanpast aan donkere modus
  7. Je favicon testen
Hetzelfde beeldmerk getoond op faviconformaten, inclusief een versie op browsertabgrootte.
Een favicon is het beeldmerk van je logo, vereenvoudigd om helder te blijven op minuscule formaten.

Wat is een favicon?

Een favicon (afkorting van "favorite icon") is de kleine vierkante afbeelding die een website vertegenwoordigt in een browsertabblad, een bladwijzer, een geschiedenisitem, en het beginscherm van een telefoon. Het is bijna altijd een vereenvoudigde versie van het logo van een merk — specifiek het beeldmerk, aangezien er op dat formaat geen ruimte is voor de volledige naam.

Waarom is een favicon belangrijk?

Een favicon is een klein maar constant stukje branding. Met een dozijn open tabbladen is het vaak de enige manier waarop iemand je site in één oogopslag herkent, en een naar het beginscherm opgeslagen icoon staat naast gepolijste app-icoons. Een scherpe, merkeigen favicon oogt doordacht; een ontbrekende of wazige oogt onaf.

De faviconformaten en -bestandstypen die je nodig hebt

Je hebt niet het dozijn iconen nodig dat oude tutorials opsommen. In 2026 is de minimale, betrouwbare set klein:

BestandGrootteDoel
favicon.svgelkemoderne browsers; kan zich aanpassen aan donkere modus
favicon.ico16 + 32terugval voor oudere browsers
apple-touch-icon.png180×180iOS-beginscherm
PWA-iconen (optioneel)192, 512installeerbare webapps

Formaten zoals 64×64, 96×96, en 128×128 die oudere gidsen aanraden zijn achterhaald — sla ze over. Het .ico-bestand is een terugval, niet het hoofdbestand: browsers die SVG ondersteunen geven er de voorkeur aan.

  1. Begin bij het beeldmerk, niet het volledige logo — de naam is op tabbladformaat niet leesbaar.
  2. Vereenvoudig voor piepkleine formaten. Laat fijn detail, dunne lijnen, en subtiele kleurverlopen die verdwijnen op 16–32 pixels achterwege. Kies voor stevige vormen en hoog contrast.
  3. Houd het vierkant met een beetje opvulling zodat het niet tegen de tabbladranden aan gedrukt staat.
  4. Exporteer de set — SVG, ICO, en de PNG van 180×180 — vanuit de vectormaster van je logo.
De exportstap van de LogoSaga-editor met favicon.svg opgenomen bij de logobestanden.
Exporteren vanuit de vectormaster geeft je een favicon die exact overeenkomt met het logo.

Omdat SVG het ideale masterformaat is, loont het de moeite om SVG versus PNG voor logo's te begrijpen voordat je exporteert.

Een favicon koppelen in je HTML

Verwijs naar de bestanden vanuit de <head> van je pagina's. Een moderne, minimale set ziet er zo uit:

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Browsers die SVG ondersteunen gebruiken het; de rest valt terug op het ICO-bestand.

Bonus: een favicon die zich aanpast aan donkere modus

Een SVG-favicon kan zijn eigen styling voor donkere modus meedragen. Sluit een media query in de SVG in zodat het beeldmerk van kleur wisselt met het browserthema:

<style>
  path {
    fill: #18231d;
  }
  @media (prefers-color-scheme: dark) {
    path {
      fill: #eef1ea;
    }
  }
</style>

Chrome, Firefox, en Edge respecteren dit; Safari nog niet, kies dus kleuren die op beide thema's leesbaar blijven als terugval.

Je favicon testen

Controleer het in een echt browsertabblad, licht en donker, en op het beginscherm van een telefoon. Omdat browsers favicons hardnekkig cachen, ververs de pagina geforceerd na elke wijziging — of doorbreek de cache door het bestand te hernoemen of ?v=2 toe te voegen. Oogt het modderig op tabbladformaat, vereenvoudig het beeldmerk dan verder: de favicon is de eerlijke test van hoe goed een logo zich laat reduceren.

Bouw je je logo met LogoSaga, dan bevat de export al een favicon.svg naast de logo-SVG en -PNG, zodat de favicon altijd exact overeenkomt met het beeldmerk.

Maak een logo met een bijpassende favicon

Veelgestelde vragen

Welke grootte moet een favicon hebben?

Lever een schaalbare SVG plus PNG-rasterformaten: 32×32 is de moderne tabbladstandaard, 16×16 is het klassieke kleine formaat, en 180×180 is het Apple-touch-icon. PWA's hebben ook 192×192 en 512×512 nodig.

Welk formaat moet een favicon hebben — SVG, PNG, of ICO?

Gebruik een SVG voor moderne browsers, een ICO als terugval voor oudere browsers, en PNG's voor het apple-touch-icon en de PWA-formaten. SVG is schaalbaar en kan zich zelfs aanpassen aan donkere modus; ICO dekt oudere browsers.

Kan een favicon veranderen in donkere modus?

Ja, met een SVG-favicon. Sluit een prefers-color-scheme media query in de SVG in om lichte en donkere kleuren te definiëren. Safari respecteert dit nog niet, kies dus een neutrale kleur die op beide leesbaar blijft.

Waarom verschijnt of vernieuwt mijn favicon niet?

Browsers cachen favicons agressief. Ververs na een wijziging de pagina geforceerd, of doorbreek de cache door het bestand te hernoemen of een querystring zoals favicon.svg?v=2 toe te voegen, en controleer of de link-tags in de paginakop kloppen.

Bronnen