Wat is een favicon en waarom is het belangrijk voor je website?

Een favicon (afkorting van "favorite icon", oftewel favoriet icoon) is de kleine vierkante afbeelding die een website vertegenwoordigt in browsertabbladen, bladwijzers, geschiedenislijsten, Google-zoekresultaten, startschermen van telefoons en geïnstalleerde webapps. Het is belangrijk omdat het je site in één oogopslag een herkenbaar gezicht geeft, je site gemakkelijker vindbaar maakt tussen veel geopende tabbladen, laat zien dat de site professioneel en betrouwbaar is en tegenwoordig ook naast de naam van je site in Google-resultaten wordt getoond. Zonder favicon zien bezoekers een algemeen wereldbolletje of een leeg pagina-icoon, en vult je server zijn logbestanden met 404-fouten. Met de MakeFav favicon-generator maak je gratis een complete favicon-set.

Wat is een favicon?

Een favicon is een klein grafisch merkelement, meestal een vereenvoudigde versie van een logo of een enkele letter of een symbool, dat browsers en andere software van je website ophalen en tonen waar een compacte visuele identificatie nodig is. In een desktopbrowser wordt het meestal getekend op 16 bij 16 CSS-pixels, maar het bestand zelf moet groter zijn zodat het scherp blijft op schermen met een hoge pixeldichtheid.

Technisch gezien is een favicon gewoon een afbeeldingsbestand waarnaar in je HTML wordt verwezen (of dat op een standaardlocatie wordt gevonden) en dat user agents los van de pagina-inhoud downloaden. Tegenwoordig is een "favicon" zelden één enkel bestand. Een moderne site levert meestal meerdere versies van hetzelfde icoon, zodat browsers, zoekmachines, iOS en Android elk een passend formaat en een passende afmeting krijgen.

Een korte geschiedenis van de favicon

De favicon bestaat sinds maart 1999, toen Microsoft Internet Explorer 5 uitbracht. Met die browser konden gebruikers pagina's opslaan in een lijst met "Favorieten", en hij zocht ook naar een klein icoonbestand met de naam favicon.ico in de hoofdmap van de site om naast elk opgeslagen item te tonen. Het idee was simpel: als een site /favicon.ico aanbood, verscheen het icoon naast de bladwijzer.

Andere browsers namen de functie al snel over en tabbladen maakten het nog veel nuttiger. Toen tabbladen de belangrijkste manier werden om te navigeren, veranderde de favicon van een bladwijzerversiering in een kernonderdeel van de navigatie. In de loop der jaren ontwikkelde de aanpak zich verder:

• Begin jaren 2000: met het element <link rel="icon"> konden sites naar een icoon op elke URL verwijzen in plaats van alleen in de hoofdmap, en browsers anders dan IE gingen PNG- en GIF-bestanden accepteren.
• Jaren 2010: Apple introduceerde het apple-touch-icon voor iOS-startschermen, en Android en Windows voegden eigen conventies toe, zoals manifesticonen en tegelafbeeldingen.
• Vandaag: SVG-favicons, webapp-manifesten, iconen die rekening houden met de donkere modus en de favicon-eisen van Google voor zoekresultaten hebben van de favicon een klein maar reëel onderdeel van de technische inrichting van een site gemaakt.

Waar favicons tegenwoordig verschijnen

Je favicon wordt op veel meer plekken getoond dan alleen in het browsertabblad. De belangrijkste zijn:

• Browsertabbladen: de meest zichtbare plek, waar het icoon vaak het enige is dat je nog ziet als er veel tabbladen openstaan.
• Bladwijzers en favorieten: het icoon staat naast de paginatitel in bladwijzerbalken en menu's.
• Geschiedenis en meest bezochte pagina's: browsers tonen favicons in geschiedenislijsten en op nieuwe-tabbladpagina's.
• Google-zoekresultaten: zowel op mobiel als op desktop toont Google de favicon van een site naast de sitenaam en de URL.
• Startschermen: wanneer een bezoeker je site aan het startscherm van iOS of Android toevoegt, wordt het touch-icoon of manifesticoon de snelkoppeling in appstijl.
• Geïnstalleerde PWA's: een progressive web app gebruikt de iconen uit het webapp-manifest voor het icoon op het startscherm, het opstartscherm en de taakwisselaar.
• Windows-tegels en vastgemaakte sites: oudere versies van Windows en Edge gebruikten tegelafbeeldingen die voor vastgemaakte sites waren gedefinieerd; moderne versies hergebruiken meestal je standaardiconen.
• Linkvoorbeelden in sommige apps: bepaalde chat- en productiviteitstools (Slack is een bekend voorbeeld) tonen de favicon van een site naast een uitgevouwen link. De meeste voorbeelden zijn vooral gebaseerd op Open Graph-afbeeldingen, maar de favicon levert vaak het kleine merkteken.

Waarom een favicon belangrijk is voor je website

Merkherkenning

Mensen herkennen kleuren en vormen sneller dan ze tekst lezen. Een consistent icoon dat telkens terugkomt in tabbladen, bladwijzers en zoekresultaten, bouwt vertrouwdheid op elke keer dat iemand het ziet. Dat is gratis merkzichtbaarheid bij elk bezoek.

Vertrouwen en geloofwaardigheid

Een ontbrekende favicon laat een site er onaf uitzien. Een nette, correct weergegeven icoon is een klein signaal dat iemand om details geeft, wat de indruk versterkt dat de site legitiem is. Het is geen beveiligingsfunctie en phishingsites kunnen iconen kopiëren, maar een leeg standaardicoon helpt een bedrijf zelden om gevestigd over te komen.

Doorklikratio in zoekresultaten

Omdat Google de favicon naast je vermelding toont, wordt het onderdeel van hoe jouw resultaat eruitziet naast dat van concurrenten. Google publiceert geen rankingeffect voor favicons en je moet dan ook geen hogere posities verwachten. Het voordeel zit in visuele herkenning: gebruikers die je icoon kennen, zien je resultaat eerder en kiezen er vaker voor, vooral op mobiel waar resultaten compact zijn.

Gebruiksgemak met veel geopende tabbladen

Als er twintig tabbladen openstaan in een browser, worden titels afgekapt tot niets en blijft alleen de favicon over. Met een onderscheidend icoon vinden mensen je tabblad direct terug en gaan ze ernaar terug in plaats van een dubbel exemplaar te openen of het te vergeten.

Professionele indruk

Een goed ontworpen favicon toont dezelfde aandacht voor detail als de rest van je site. Voor productpagina's, documentatie, blogs en webapps is het een van de goedkoopste afwerkingen die je kunt toevoegen.

Toegankelijkheid bij het terugvinden van tabbladen

Iconen helpen gebruikers die visueel scannen in plaats van lezen, waaronder mensen met dyslexie of cognitieve verschillen, en iedereen die snel tussen taken wisselt. Een icoon met hoog contrast en een eenvoudige vorm is makkelijker te herkennen. Houd er wel rekening mee dat een favicon een aanvulling is: het vervangt geen duidelijke paginatitel, waarop schermlezers en hulptechnologie vertrouwen.

Wat gebeurt er als je geen favicon hebt

Browsers vragen automatisch /favicon.ico op in de hoofdmap van je domein, ook als je HTML er niet naar verwijst. Als het bestand niet bestaat, gebeurt er van alles:

• Algemeen icoon: bezoekers zien een standaard wereldbol, document of leeg icoon in het tabblad en in bladwijzers, wat anoniem overkomt.
• 404-fouten in je logs: elke browser die om het bestand vraagt, genereert een mislukte aanvraag. Op drukke sites zorgt dit voor ruis in toegangslogs, foutmonitoring en analytics, en kan het echte problemen verbergen.
• Geen icoon in Google-resultaten: zonder geldige, crawlbare favicon toont Google zijn standaardplaatshouder naast je vermelding.
• Verspilde aanvragen: browsers kunnen het opnieuw proberen, wat een kleine maar zinloze belasting voor je server toevoegt.

Zelfs een heel simpel icoon is beter dan geen, omdat het de 404's wegneemt en gebruikers iets herkenbaars geeft.

Favicon-formaten uitgelegd

Geen enkel formaat dekt alle platforms, dus de meeste sites gebruiken een kleine set bestanden.

Oude Windows-tegelafbeeldingen (geconfigureerd via browserconfig.xml) waren nodig voor Internet Explorer 11 en de oude Edge. Ze zijn tegenwoordig zelden nodig, tenzij je die omgevingen moet ondersteunen.

De favicon-richtlijnen van Google voor zoekresultaten

Als je wilt dat je icoon in Google Zoeken verschijnt, volg dan de gepubliceerde eisen van Google:

• Afmeting: de afbeelding moet vierkant zijn (1:1) en een veelvoud van 48 pixels, zoals 48x48, 96x96 of 144x144. Google verkleint hem vervolgens naar 16x16 voor weergave. De minimaal ondersteunde afmeting is 8x8, maar 48x48 of groter wordt aanbevolen.
• Formaten: elk formaat dat door browsers wordt ondersteund werkt, waaronder ICO, PNG en SVG.
• Stabiele URL: wijzig de favicon-URL niet vaak. Een stabiel adres helpt Google je icoon actueel te houden.
• Crawlbaar: zowel het favicon-bestand als je homepage moeten toegankelijk zijn voor Googlebot. Blokkeer ze niet in robots.txt en zet ze niet achter een login.
• Eén declaratie per site: het icoon is gekoppeld aan de homepage van de site, dus plaats de <link>-tag in de head van je homepage.
• Representatief en gepast: het icoon moet je merk weerspiegelen, en Google kan een aanstootgevend of misleidend icoon vervangen door zijn standaardicoon.

Nadat je een favicon hebt gepubliceerd of gewijzigd, kan het dagen tot weken duren voordat Google hem opnieuw crawlt en bijwerkt, dus verwacht geen directe verandering.

Zo maak je snel een favicon met MakeFav

Je hebt geen ontwerpsoftware of opdrachtregel nodig. De MakeFav-generator zet één bronafbeelding om in de hierboven beschreven bestanden.

1. Bereid je artwork voor. Gebruik een vierkant logo of symbool van 512 x 512 px of groter. Eenvoudige vormen werken het beste, omdat het icoon op 16 px wordt bekeken.
2. Upload het op de MakeFav-homepage, of open de editor om de afbeelding, achtergrond en marge aan te passen voordat je exporteert.
3. Bekijk een voorbeeld van het resultaat op kleine afmetingen en op lichte en donkere achtergronden om te controleren of het leesbaar blijft.
4. Download het pakket. Het bevat het ICO-bestand, PNG-afmetingen, het Apple touch-icoon, manifesticonen en het HTML-fragment om te plakken.
5. Upload de bestanden naar de hoofdmap van je website, zodat ze bereikbaar zijn op paden zoals /favicon.ico.
6. Voeg de HTML toe aan de <head> van elke pagina, of aan je gedeelde layout of template.
7. Controleer het met de favicon-checker, wis daarna de cache van je browser en laad de pagina opnieuw om het nieuwe icoon te zien.

Voorbeeld van een HTML-fragment

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Het attribuut sizes="48x48" op de ICO-link helpt browsers de SVG te verkiezen als ze die ondersteunen, terwijl de ICO als terugvaloptie behouden blijft. De PNG van 96 px voldoet aan de regel van Google over veelvouden van 48.

Voorbeeld van een webapp-manifest

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Werk je met buildpipelines of wil je het maken van iconen automatiseren, bekijk dan de ontwikkelaarsbronnen.

Ontwerptips voor een favicon die werkt

• Houd het simpel. Eén vorm, één letter of een vet monogram wint het van een gedetailleerd logo dat op 16 px in een brij verandert.
• Gebruik sterk contrast. Zorg dat het icoon zichtbaar is op zowel lichte als donkere browserthema's. Een gekleurde achtergrondtegel helpt.
• Vermijd tekst. Een enkele initiaal is prima; woorden zijn op deze afmeting onleesbaar.
• Laat wat marge vrij voor maskable iconen en iconen met afgeronde hoeken, zodat niets belangrijks wordt afgesneden.
• Blijf consistent met je logo en merkkleuren, zodat de favicon de herkenning versterkt.
• Test op echte apparaten en controleer hoe het eruitziet in een tabblad, een bladwijzer en een Google-resultaat.

Veelvoorkomende favicon-problemen

Als je icoon niet verschijnt, zijn de gebruikelijke oorzaken caching, verkeerde paden en geblokkeerde bestanden. Browsers cachen favicons agressief, dus een harde verversing of een nieuw privévenster is vaak genoeg om updates te zien. Controleer of de bestands-URL een 200-status en het juiste contenttype teruggeeft, en of de <link>-tag in de <head> staat. Zorg er voor zoekmachines voor dat robots.txt het icoon of de homepage niet blokkeert. De MakeFav-checker helpt je deze problemen snel op te sporen.

Veelgestelde vragen

Waar staat favicon voor?

Favicon is een afkorting van "favorite icon" (favoriet icoon). De naam komt van Internet Explorer 5, dat in 1999 als eerste een klein icoonbestand gebruikte om items in de Favorietenlijst van de browser te versieren. De term bleef hangen, ook al verschijnt het icoon nu op veel andere plekken.

Helpt een favicon bij SEO?

Een favicon is geen directe rankingfactor. Hij verschijnt wel naast de naam van je site in Google-resultaten op mobiel en desktop, dus hij kan de merkherkenning en de visuele aantrekkingskracht van je vermelding verbeteren, wat indirect klikken kan ondersteunen. Door de richtlijnen van Google te volgen, komt je icoon in aanmerking om getoond te worden.

Welke afmeting moet een favicon hebben?

Gebruik voor Google Zoeken een vierkante afbeelding die een veelvoud van 48 pixels is, zoals 48x48 of 96x96. Voor bredere dekking lever je ook een ICO-bestand, een Apple touch-icoon van 180x180 en manifesticonen van 192x192 en 512x512. Een SVG is een goede aanvulling voor schaalbaarheid.

Heb ik favicon.ico nog nodig als ik PNG of SVG gebruik?

Het is nog steeds verstandig. Browsers en sommige tools vragen standaard /favicon.ico op, en oudere software vertrouwt erop. Een ICO-bestand in de hoofdmap van de site voorkomt 404-fouten en geeft je een veilige terugvaloptie wanneer SVG of PNG niet wordt ondersteund.

Waarom wordt mijn favicon niet bijgewerkt?

Browsers en zoekmachines cachen favicons lang. Probeer een harde verversing, een privévenster of het wissen van de cache. Controleer of het bestandspad klopt en het nieuwe bestand wordt geleverd. In Google Zoeken kan het dagen of weken duren voordat een gewijzigd icoon opnieuw is gecrawld en bijgewerkt.