Een favicon voor je website maken en goed instellen

Je website heeft een logo, maar in een rij open tabbladen staat vooral de paginatitel en een klein pictogram. Dat pictogram heet een favicon, ook wel site-icoon of website icon. Het verschijnt onder meer in browsertabbladen en kan bij je site in Google Zoeken worden getoond. Een goed bestand en een juiste instelling maken je site herkenbaarder, maar geven geen garantie dat Google het pictogram altijd laat zien. Hieronder lees je hoe je een passend ontwerp kiest, het instelt en de werking controleert.

Wat doet een website icon voor je site?

Een favicon is het kleine icoon dat bij een website hoort. Bezoekers kunnen het zien in een browsertabblad, bladwijzer of andere browserweergave. Het helpt om jouw site tussen meerdere geopende pagina’s terug te herkennen. Google kan het pictogram ook naast een site in de zoekresultaten tonen. Dat is een visuele herkenningshulp, geen advertentie en geen belofte van een hogere positie.

Een favicon is niet hetzelfde als een groot logo in de header. Op klein formaat verdwijnen dunne lijnen, kleine details en lange bedrijfsnamen al snel. Het bestand moet daarom zelfstandig herkenbaar zijn: bijvoorbeeld een eenvoudige letter, vorm of een compact beeldmerk uit je huisstijl. Kies iets dat bij je bedrijf past, maar test het ook op een lichte en donkere achtergrond en op klein formaat.

Welke afmetingen en bestanden zijn geschikt?

Google stelt voor weergave in Google Zoeken een vierkant bestand voor: de verhouding moet 1:1 zijn. De minimale afmeting is 8 bij 8 pixels; Google raadt aan een afbeelding van meer dan 48 bij 48 pixels te gebruiken, zodat het icoon op verschillende plekken goed kan worden weergegeven. Die ondergrens is geen aanbeveling om een ontwerp op 8 bij 8 pixels te maken. Begin liever met een grotere bronafbeelding en controleer hoe het verkleinde beeld eruitziet. De actuele eisen en ondersteunde bestandstypen staan in de richtlijnen van Google Search Central voor favicons.

Google noemt BMP, GIF, ICO, JPEG, PNG, PPM en TIFF als ondersteunde bestandsformaten voor zoekresultaten. De browserkeuze kan daarnaast afhangen van de HTML-verwijzingen en eigenschappen van de bestanden. MDN beschrijft dat een website meerdere iconen kan aanbieden en dat de browser onder meer media, type en sizes kan gebruiken om een passend bestand te kiezen. Voor een moderne website is een scherpe vierkante PNG vaak praktisch; een ICO-bestand kan meerdere icoonformaten bundelen. Een SVG kan schaalbaar zijn, maar check of het door de browsers en systemen die je bezoekers gebruiken goed wordt verwerkt.

De getallen op een bestand zijn geen vervanging voor een visuele controle. Een canvas van 512 bij 512 pixels kan nog steeds een onleesbaar icoon opleveren als het ontwerp te fijn is. Houd vormen duidelijk, laat voldoende ruimte rond het beeld en vermijd tekst die op tabformaat niet meer te onderscheiden is. Probeer het pictogram op 16 bij 16 en 32 bij 32 pixels te bekijken als snelle praktische test; dat zijn testweergaven, geen aanvullende Google-eisen. De uitleg van MDN over het HTML-element link laat zien hoe sizes en type bij iconverwijzingen kunnen worden gebruikt.

Kies tussen zelf instellen en de functie van je platform

Werk je met WordPress, dan kun je meestal het ingebouwde Site-icoon gebruiken in plaats van handmatig HTML aan te passen. De WordPress-documentatie vermeldt een minimale bronafbeelding van 512 bij 512 pixels. De kern kan daar vervolgens kleinere iconen uit afleiden. De standaard uitvoer van WordPress bevat verwijzingen voor onder meer 32 bij 32, 192 bij 192, 180 bij 180 en 270 bij 270 pixels. Die maten zijn WordPress-uitvoer voor verschillende toepassingen en niet allemaal vereisten van Google. Zie hiervoor de documentatie over de Site Icon-functie in WordPress.

Bij een ander contentmanagementsysteem (CMS) of een maatwerkwebsite kan de instelling op een andere plek staan. Soms upload je een bronbestand in een dashboard; soms voeg je in de head van de HTML een verwijzing toe, bijvoorbeeld <link rel="icon" href="/favicon.ico">. Gebruik het mechanisme dat je platform ondersteunt en kijk na welke tags daadwerkelijk in de broncode verschijnen. Zet niet op goed geluk meerdere plugins of themainstellingen tegelijk aan: dubbele configuratie kan onduidelijk maken welk bestand wordt gebruikt.

Het favicon is een klein onderdeel van de totale website-ervaring. Als je ook de navigatie, inhoudsstructuur en vormgeving aanpakt, helpt het om die onderdelen samen te plannen. Bij een traject voor een website voor je bedrijf kun je het site-icoon opnemen in de lijst met merkbestanden en technische opleverpunten. Een wireframe voor de websitestructuur gaat over de indeling van pagina’s, maar is een handig moment om ook vast te leggen welke merkonderdelen bij de uiteindelijke site horen.

Hoe stel je een favicon stap voor stap in?

1. Kies het beeldmerk. Gebruik een element uit je bestaande huisstijl of maak een vereenvoudigde variant. Test of het zonder bedrijfsnaam herkenbaar blijft.
2. Maak een vierkante bronafbeelding. Voor WordPress is minimaal 512 bij 512 pixels nodig. Voor Google Zoeken moet het favicon vierkant zijn en ten minste 8 bij 8 pixels meten; een bestand groter dan 48 bij 48 pixels wordt aanbevolen.
3. Exporteer het bestand in een formaat dat je platform ondersteunt. Geef het een duidelijke bestandsnaam en bewaar de bronafbeelding, zodat je later een bijgewerkte versie kunt maken.
4. Upload of plaats het bestand via de site-instellingen of de HTML van je website. Controleer of de verwijzing in de paginakop naar de juiste URL wijst.
5. Publiceer de wijziging en test de openbare website. Een afbeelding die alleen zichtbaar is in het dashboard, maar niet publiek bereikbaar is, helpt browser of zoekmachine niet.

Gebruik bij maatwerk bijvoorbeeld rel="icon" in een <link>-element en verwijs naar het bestand met een juiste URL. Voeg alleen maten toe die werkelijk bij het bestand horen. Als je meerdere bestanden vermeldt, beschrijf dan de bestandsgrootte en het type correct; die informatie helpt de browser bij het kiezen. MDN beschrijft ook dat browsers bij meerdere passende iconverwijzingen hun keuze op basis van beschikbare eigenschappen maken. De exacte weergave kan per browser, apparaat en instelling verschillen.

Hoe controleer je of het pictogram werkt?

Open je website in een privévenster of een browser waarin je de site niet eerder hebt bezocht. Kijk of het pictogram naast de paginatitel verschijnt. Test ook de startpagina en een interne pagina, en controleer of het bestand rechtstreeks via de opgegeven URL bereikbaar is. Een oude afbeelding kan tijdelijk in de browsercache blijven staan; de cache is een lokale kopie die de browser bewaart. Probeer daarom ook een andere browser of een nieuw privévenster voordat je concludeert dat de wijziging niet is doorgekomen.

Bekijk vervolgens de HTML-bron van de startpagina en zoek naar de faviconverwijzing. Controleer het pad, de bestandsnaam, het formaat en eventuele sizes-waarde. Bij WordPress kijk je na of het Site-icoon op de juiste plek is ingesteld en of de gegenereerde tags bij de bedoelde afbeelding horen. Controleer ook dat beveiligingsinstellingen of een robots.txt-regel het bestand niet ontoegankelijk maken voor crawlers.

Voor Google is niet genoeg dat het icoon op je eigen laptop zichtbaar is. Google moet de startpagina kunnen crawlen, de verwijzing naar het favicon kunnen volgen en het bestand zelf kunnen ophalen. Google ondersteunt één favicon per hostname: een subdomein kan dus een eigen icoon hebben, maar een map op hetzelfde domein niet als afzonderlijke site laten behandelen. Na een wijziging kan herverwerking enkele dagen tot enkele weken duren. Ook als je aan de richtlijnen voldoet, garandeert Google geen weergave van het favicon in zoekresultaten.

Controleer daarom eerst de technische toegang en de beeldkwaliteit, en beoordeel de zoekresultaten pas daarna opnieuw. Verander de URL van het bestand niet onnodig vaak, omdat Google een stabiele favicon-URL aanbeveelt. Als je het bestand wel vervangt, houd de locatie waar mogelijk gelijk. Een herkenbaar favicon maakt je website consistenter in kleine browser- en zoekweergaven; het blijft één detail binnen een complete, goed opgebouwde site.

In de rubriek Webdesign