Favicon-UX: wat maakt een favicon geweldig

Een geweldige favicon is een eenvoudig merkteken met veel contrast, meestal je beeldmerk of één of twee letters, dat leesbaar blijft op 16x16 pixels op zowel lichte als donkere browsertabbladen, bij je merk past en zelden verandert. Al het andere in deze gids (pixeluitlijning, kleur, witruimte, transparantie, bestandsgrootte) dient die doelen: je site direct vindbaar maken tussen tientallen geopende tabbladen.

Een favicon is piepklein, maar verschijnt op veel plekken: browsertabbladen, bladwijzerbalken, geschiedenislijsten, het zoekmenu voor tabbladen, Google-zoekresultaten op mobiel en desktop, en startschermen van telefoons. Voor gebruikers met veel geopende tabbladen wordt de titel vaak afgekapt tot niets en is het pictogram het enige aanknopingspunt dat overblijft. Dat maakt het een echt navigatie-element, geen decoratie.

1. Leesbaarheid op 16x16

Het klassieke favicon-formaat is 16x16 CSS-pixels. Op een standaardscherm zijn dat letterlijk 256 pixels; op een 2x retina-scherm kiest de browser voor dezelfde ruimte meestal een afbeelding van 32x32. Wat je ook ontwerpt, het moet deze verkleining doorstaan.

Houd het eenvoudig

• Één vorm of één à twee letters. Een enkele vette letter, een cirkel met een symbool of een eenvoudig geometrisch merkteken werkt. Drie letters of een woord veranderen in ruis.
• Één blikvanger. Als je het pictogram niet in vijf woorden kunt beschrijven, is het te ingewikkeld.
• Geen verlopen, schaduwen of fijne texturen. Op kleine formaten worden ze vage vlekken.

Lijn uit op het pixelraster

Bij 16x16 wordt een lijn die een halve pixel naast het raster ligt, uitgesmeerd over twee pixelrijen en ziet er grijs en zacht uit. Plaats randen op hele pixelgrenzen en gebruik even breedtes waar de vorm symmetrisch is. Als je vanuit een vectorprogramma exporteert, schakel dan pixel snapping in, of controleer het verkleinde resultaat en corrigeer het met de hand.

Vermijd dunne lijnen

Lijnen die dunner zijn dan 2 pixels bij 16x16 (ongeveer 12 procent van de breedte van het pictogram) verdwijnen vaak of flikkeren tussen formaten. Maak lijnen dikker, verwijder interne details en voeg kleine openingen samen. Een vet, iets zwaar teken leest meestal beter dan een getrouwe miniatuur van een gedetailleerd logo.

Hint met de hand

ICO- en PNG-bestanden hebben geen hinting zoals lettertypen, dus handmatig pixels bewerken is het equivalent: je past afzonderlijke pixels aan zodat bogen, diagonalen en tegenvlakken (de gaatjes in letters als "a" of "e") scherp blijven. Automatisch verkleinen is een goed eerste concept, maar een paar met de hand geplaatste pixels maken vaak het verschil tussen een klodder en een herkenbare letter. De MakeFav-pixeleditor is hiervoor gemaakt: open het 16x16-canvas, corrigeer de problematische pixels en exporteer.

2. Contrast op lichte en donkere tabbladen

Browsers draaien tegenwoordig vaak in donkere modus, en veel gebruikers hebben tabbalken die afwijken van het thema van de pagina. Een donkerblauw pictogram met een transparante achtergrond kan perfect zijn op een wit tabblad en bijna onzichtbaar op een donkergrijs tabblad. Test altijd allebei.

Praktische oplossingen

• Voeg een achtergrondvorm toe. Een effen afgerond vierkant of een cirkel in een merkkleur garandeert dat het merkteken zijn eigen contrast heeft, ongeacht het tabblad.
• Gebruik een dunne omlijning of halo. Een lichtere rand van 1 px rond een donker teken (of omgekeerd) houdt het silhouet zichtbaar in beide thema's, maar bij 16x16 moet die scherp blijven, dus test het.
• Kies merkkleuren met een middentoon. Kleuren als felblauw, oranje, groen of magenta werken doorgaans op zowel witte als bijna zwarte oppervlakken. Heel lichtgeel of heel donkerblauw zijn de risicovolle opties.
• Gebruik een adaptieve SVG-favicon. Een SVG kan een prefers-color-scheme-mediaquery bevatten, zodat het pictogram meeverandert met het systeemthema.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Let op: de mediaquery weerspiegelt het thema van het besturingssysteem of de browser, wat de tabbalk meestal volgt, maar niet altijd. Ook de ondersteuning voor SVG-favicons verschilt: Chrome en Firefox kunnen ermee overweg, terwijl Safari van oudsher achterloopt, dus houd altijd PNG- of ICO-alternatieven achter de hand. Een ontwerp met effen achtergrond is de robuustste optie, omdat het helemaal geen themalogica nodig heeft.

3. Herkenbaarheid en merkconsistentie

Gebruik het beeldmerk (het symbool of monogram), niet de volledige logocombinatie met woordmerk. Tekst in een 16x16-pictogram is onleesbaar, en een breed horizontaal logo dat in een vierkant wordt geperst, laat slechts een klein streepje in het midden over.

• Als je merk een symbool heeft, vereenvoudig het dan voor kleine formaten in plaats van het alleen te verkleinen. Een "favicon-versie" met minder details is gebruikelijk.
• Als je merk alleen een woordmerk is, neem dan de eerste letter of een kenmerkend lettercombinatie en zet die in het lettertype van je merk in een zwaar gewicht.
• Houd de kleuren consistent met je logo, app-pictogram en sociale avatars, zodat een gebruiker overal hetzelfde merk herkent.

Onderscheidend vermogen is net zo belangrijk als getrouwheid. Kijk naar een rij tabbladen: als drie andere sites ook een blauwe cirkel gebruiken, val je niet op. Een andere vorm of kleur is nuttiger dan een perfect getrouwe verkleining.

4. Kleur: een beperkt, verzadigd palet

Met zo weinig pixels voegt elke extra kleur rommel toe. Streef naar één of twee kleuren plus hooguit wit of zwart. Verzadigde kleuren komen op kleine formaten beter over dan pasteltinten, die vaak opgaan in de achtergrond van het tabblad.

Leen een beetje van toegankelijkheidsdenken. WCAG vraagt om minimaal 3:1 contrast voor betekenisvolle grafische objecten (succescriterium 1.4.11, Contrast van niet-tekstuele elementen). Een favicon valt er formeel niet onder, omdat het browser-interface is en geen paginainhoud, maar 3:1 tussen het teken en zijn achtergrond, en tussen het pictogram en het tabblad, is een verstandig streven. Vermijd ook om iets alleen via tint over te brengen: rode en groene varianten van hetzelfde pictogram zijn voor veel kleurenblinde gebruikers niet te onderscheiden, dus varieer de vorm of voeg een symbool toe.

5. Vorm, witruimte en veilige zones

Vul het vierkant

Browsertabbladen tonen de favicon op een vast klein formaat, dus extra marge maakt je merkteken alleen maar kleiner. Gebruik voor standaard tabpictogrammen het grootste deel van het canvas, met slechts een of twee pixels ademruimte, zodat het merkteken zo groot mogelijk is.

Afgerond of vierkant?

Browsers snijden favicons van tabbladen over het algemeen niet bij, dus de vorm die je tekent is de vorm die gebruikers zien. Een vierkant met licht afgeronde hoeken ziet er netjes uit en geeft een consistente achtergrond; een vrije vorm of cirkel op transparantie kan lichter en onderscheidender ogen. Beide zijn prima. Kies er één en houd je hele pictogramset consistent.

Apple touch-pictogrammen

iOS voegt zelf afgeronde hoeken toe aan het apple-touch-icon (180x180 is het gebruikelijke formaat). Lever een vierkant tot aan de rand zonder vooraf afgeronde hoeken, anders krijg je mogelijk zichtbare donkere of witte randjes in de hoeken.

Maskable-pictogrammen voor Android en PWA's

Maskable-pictogrammen worden door het besturingssysteem bijgesneden tot cirkels, squircles of andere vormen. Houd alle belangrijke inhoud binnen de veilige zone: een cirkel gecentreerd in het pictogram met een straal van 40 procent van de breedte van het pictogram. Laat de achtergrondkleur doorlopen tot aan de randen, zodat elk masker er goed uitziet. Hergebruik een strakke, van rand tot rand lopende tab-favicon niet als maskable-pictogram, want het masker snijdt die af.

6. Transparantie

Transparantie is prima voor favicons in tabbladen en zorgt ervoor dat een pictogram met alleen een teken netjes op elke tabkleur past. Het is een probleem voor Apple touch-pictogrammen: iOS vult transparante gebieden met een effen kleur (meestal zwart), wat het ontwerp kan verpesten. Geef het apple-touch-icon altijd een ondoorzichtige achtergrond in je merkkleur. Hetzelfde geldt voor maskable-pictogrammen en de meeste gebruiksgevallen op het Android-startscherm, waar een ondoorzichtige achtergrond voorspelbare resultaten geeft.

7. Stabiliteit: verander het niet te vaak

Een favicon bouwt herkenning op door herhaling. Als je hem vaak verandert, moeten gebruikers opnieuw leren welk tabblad van jou is, en het veroorzaakt ook technische hoofdpijn. Browsers cachen favicons agressief, en Google haalt ze apart van je pagina's op en slaat ze op, dus een nieuw pictogram kan dagen of weken duren voordat het in zoekresultaten verschijnt. Google vraagt ook om een stabiele favicon-URL, een pictogram waarvan het formaat een veelvoud van 48 pixels is (48x48, 96x96, enzovoort), en een bestand dat gecrawld kan worden (niet geblokkeerd door robots.txt). Behandel een favicon-wijziging als een beslissing op rebrandingniveau, niet als seizoensdecoratie.

8. Meldingsstatussen en dynamische favicons

Sommige webapps veranderen de favicon om ongelezen berichten, opnamestatus of een fout aan te geven. Goed gedaan is dat nuttig; overdreven is het irritant.

• Gebruik een kleine badge (een stip of een kort getal) in een hoek, geen volledig nieuw ontwerp. Het basispictogram moet herkenbaar blijven.
• Houd het spaarzaam. Bewaar badges voor gebeurtenissen die actie van de gebruiker vereisen. Animeer het pictogram niet continu.
• Begrens getallen. Bij 16x16 zijn slechts een of twee cijfers leesbaar; toon "9+" of een gewone stip in plaats van "137".
• Reset snel zodra de gebruiker het item heeft afgehandeld, en herstel het standaardpictogram.
• Vertrouw niet alleen op kleur. Een rode stip moet ook worden ondersteund door de paginatitel, zoals "(3) Inbox", zodat de informatie voor iedereen beschikbaar is.

Dynamische favicons worden meestal op een canvas getekend en ingewisseld door de href van het link-element van het pictogram bij te werken. Beperk het aantal updates, want een voortdurend veranderende favicon kan CPU gebruiken en gebruikers afleiden.

9. Prestaties

Favicons zijn klein, maar het zijn nog steeds verzoeken die slecht kunnen worden afgehandeld.

• Houd bestanden klein. Een PNG-favicon is doorgaans een paar honderd bytes tot enkele kilobytes. Een eenvoudige SVG kan onder 1 KB blijven.
• Vermijd opgeblazen ICO-bestanden. Een ICO met meerdere formaten met afbeeldingen van 16, 32 en 48 pixels is genoeg. Een afbeelding van 256x256 insluiten vermenigvuldigt de bestandsgrootte zonder zichtbaar voordeel in browsertabbladen.
• Stel cachingheaders in. Lever pictogrammen met een lange Cache-Control-levensduur, bijvoorbeeld public, max-age=31536000, immutable, en gebruik een bestandsnaam met versie of hash wanneer je ze wel wijzigt.
• Declareer pictogrammen expliciet. Browsers vragen standaard /favicon.ico op, dus lever er een, ook als je andere pictogrammen declareert, om 404-ruis in je logs te voorkomen.
• Comprimeer. Haal PNG's door een verliesvrije optimizer en minify SVG's.

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

Als je al deze bestanden vanuit één bronafbeelding wilt genereren, maakt de MakeFav-favicongenerator de standaardset, en de ontwikkelaarspagina behandelt de integratiemogelijkheden.

10. Toegankelijkheid

Een favicon heeft geen alternatieve tekst en schermlezers kondigen hem niet aan, dus de traditionele toegankelijkheidsmiddelen zoals alt-attributen zijn niet van toepassing. Wat wel telt:

• De paginatitel draagt de betekenis. Schrijf unieke, beschrijvende <title>-elementen. Vertrouw nooit op het pictogram om een status over te brengen; herhaal elke badge in de titel.
• Zichtbaarheid voor slechtzienden. Hoog contrast, een vette vorm en een groot merkteken helpen gebruikers die tabbladen visueel scannen.
• Kleuronafhankelijkheid. Zorg dat vormen of letters statussen onderscheiden, niet alleen de tint.
• Minder afleiding. Vermijd knipperende of geanimeerde favicons, die een probleem kunnen zijn voor gebruikers die gevoelig zijn voor beweging.

Favicon-UX-checklist

Testchecklist

Vertrouw niet op de grote voorvertoning in je ontwerptool. Test het echte pictogram in echte omstandigheden:

1. Meerdere browsers. Controleer Chrome, Firefox, Safari en Edge, want elk kiest pictogrammen en formaten een beetje anders.
2. Lichte en donkere modus. Wissel het thema van het besturingssysteem en de browser en bekijk telkens de tabbalk.
3. Retina- en standaardschermen. Controleer op een 1x-monitor en een 2x- of 3x-scherm, en zoom in de browser.
4. Bladwijzerbalk. Zet een bladwijzer voor de pagina en kijk of het pictogram nog leesbaar is naast andere sites.
5. Veel tabbladen. Open 20 tabbladen en kijk of je de jouwe in één oogopslag vindt.
6. Google SERP-voorbeeld. Controleer een mobiel zoekresultaat nadat het pictogram opnieuw is gecrawld. Onthoud dat bijwerken even kan duren.
7. Startscherm. Voeg de site toe aan het startscherm van iOS en Android en controleer dat het pictogram niet wordt afgesneden, geen zwarte hoeken heeft en binnen het masker niet te klein is.
8. Technische controle. Haal je domein door de MakeFav-faviconchecker om te bevestigen dat de bestanden bestaan, een 200-status teruggeven, de juiste formaten hebben en correct in je HTML zijn gedeclareerd.

Een praktische werkwijze

1. Begin met je beeldmerk en vereenvoudig het tot één vorm of letter.
2. Maak een vierkant canvas met een effen of gevormde achtergrond die in beide thema's werkt.
3. Exporteer de formaten 32x32 en 16x16 en verfijn de kleine versie met de hand in de pixeleditor.
4. Genereer de volledige set (ICO, PNG, apple-touch-icon, manifestpictogrammen) met de generator.
5. Voeg de link-tags toe, stel cacheheaders in, publiceer en controleer met de checker.

Een favicon is een van de kleinste assets op je site en een van de meest gezien. Een paar zorgvuldige keuzes over contrast, eenvoud en consistentie zorgen dat hij werkt op elk tabblad, in elk thema en op elk apparaat.

Veelgestelde vragen

Welk formaat moet een favicon hebben?

Ontwerp voor 16x16 en 32x32 voor browsertabbladen (de browser gebruikt 32x32 op schermen met hoge dichtheid), lever een apple-touch-icon van 180x180 voor iOS, en PNG's van 192x192 en 512x512 voor Android en PWA's. Gebruik voor Google-zoekresultaten een vierkant pictogram waarvan het formaat een veelvoud van 48 pixels is, zoals 48x48 of 96x96. Een SVG-bron schaalt naar al deze formaten.

Moet ik mijn volledige logo als favicon gebruiken?

Meestal niet. Volledige logo's met woordmerken zijn te gedetailleerd en te breed voor een vierkant 16x16-pictogram. Gebruik het beeldmerk of een monogram van een of twee letters en vereenvoudig het zodat het herkenbaar blijft als het piepklein is.

Hoe laat ik een favicon werken in donkere modus?

De veiligste aanpak is het pictogram een eigen effen achtergrondvorm of een contrasterende omlijning te geven, zodat het niet afhankelijk is van de tabkleur. Je kunt ook een SVG-favicon gebruiken met een prefers-color-scheme-mediaquery om kleuren om te wisselen, en PNG- of ICO-alternatieven bewaren voor browsers die geen SVG-pictogrammen ondersteunen. Test altijd in zowel lichte als donkere thema's.

Waarom verschijnt mijn nieuwe favicon niet?

Browsers cachen favicons lange tijd, en Google slaat een eigen kopie op die het volgens eigen schema ververst, wat vaak dagen of weken duurt. Ververs de pagina geforceerd, wis de browsercache, gebruik een nieuwe bestandsnaam met versie en zorg dat de link-tags en een /favicon.ico in de root naar het juiste bestand verwijzen. Je kunt de opzet controleren met de MakeFav-checker.

Is het een goed idee om meldingsbadges op een favicon te tonen?

Ja, als je het spaarzaam gebruikt. Een kleine stip of een getal van een of twee cijfers helpt gebruikers iets op te merken waarvoor actie nodig is, maar constante animatie of grote getallen schaden de leesbaarheid en de aandacht. Herhaal de status altijd in de paginatitel, herstel het standaardpictogram wanneer het item is afgehandeld en vertrouw niet alleen op kleur.