Tien tabbladen open in je browser, en jouw site is de enige met dat grijze standaardbolletje ernaast. Klein detail, grote indruk: de favicon (het site-icoontje in de browsertab) is voor veel bezoekers het eerste herkenningspunt van je site, en het ontbreken ervan straalt onaf uit. Het goede nieuws: dit is een van de snelste verbeteringen die je aan je site kunt doen. WordPress heeft er een ingebouwde functie voor, het duurt twee minuten, en het enige waar mensen op stuklopen is het bestandsformaat en een icoon dat na de wijziging “blijft hangen”. Beide lossen we hier op.
Waar je favicon overal opduikt
Het icoontje doet meer dan de browsertab. Dezelfde afbeelding verschijnt in de favorieten- en bladwijzerlijst van je bezoekers, in de geschiedenis van hun browser, als snelkoppeling-icoon wanneer iemand je site aan het beginscherm van zijn telefoon toevoegt, en steeds vaker naast je site in zoekresultaten. Eén upload bedient al die plekken, en dat is precies waarom WordPress spreekt van een site-icoon in plaats van alleen een favicon: het is het beeldmerk van je site op elke plek buiten je site zelf.
Het juiste bestand: vierkant en minimaal 512 bij 512 pixels
Voordat je gaat klikken, zet het juiste bestand klaar. WordPress vraagt om een vierkante afbeelding van minimaal 512 bij 512 pixels, als PNG of JPG. Uit die ene afbeelding maakt WordPress zelf alle kleinere varianten die browsers en telefoons nodig hebben; je hoeft dus geen los .ico-bestand meer te maken zoals vroeger. Drie praktische adviezen bij het ontwerp. Gebruik niet je volledige logo met tekst: op 16 bij 16 pixels in een tabblad is tekst onleesbaar, dus kies het beeldmerk of de eerste letter van je naam. Zorg voor voldoende contrast, want het icoon moet zowel op lichte als donkere browserthema’s zichtbaar zijn. En een PNG met transparante achtergrond oogt op de meeste plekken het netst.
Heb je alleen een logo in een ander formaat, snijd het dan eerst vierkant bij in een gratis beeldbewerker. Uitgerekte of afgesneden iconen zijn de meest voorkomende schoonheidsfout die we op dit vlak tegenkomen.
Het site-icoon instellen
- Log in op je WordPress-dashboard.
- Ga naar Instellingen en dan Algemeen. Bovenin staat het onderdeel Site-icoon. Gebruik je een ouder thema en zie je het daar niet, ga dan naar Weergave, open de Customizer en kies Site-identiteit; daar staat dezelfde functie.
- Klik op Site-icoon kiezen en upload je vierkante afbeelding, of kies er een uit je Mediabibliotheek.
- Snijd de afbeelding bij als WordPress daarom vraagt en bevestig.
- Sla de wijzigingen op en open je site in een nieuw tabblad om het resultaat te zien.
Werk je met een page builder of een thema met eigen instellingen, dan kan daar nóg een favicon-veld bestaan. Vul het icoon maar op één plek in, bij voorkeur de standaard WordPress-plek hierboven; twee concurrerende instellingen leiden tot verwarring over welke er wint.
Oude icoon blijft hangen? Dat is cache
Je hebt een nieuw icoon ingesteld en de browsertab toont doodleuk het oude. Geen paniek en vooral: niet nóg een keer uploaden. Favicons worden extreem hardnekkig onthouden in de cache (het tijdelijke geheugen van je browser en je site), hardnekkiger dan bijna elk ander onderdeel van een website. De volgorde om het te doorbreken: open je site eerst in een incognitovenster. Zie je daar het nieuwe icoon, dan is alles goed en hoef je alleen je eigen browsercache te legen of simpelweg een dag geduld te hebben; bezoekers zien vanzelf de nieuwe versie. Zie je ook incognito nog het oude icoon, leeg dan de cache van je site zelf via je caching-plugin.
Bij Surver: op onze hosting is LiteSpeed Cache de standaard caching-plugin. Het legen doe je in het dashboard via het menu LiteSpeed Cache en dan Beheren. Blijft het oude icoon daarna nog ergens opduiken, dan kijkt onze support zeven dagen per week met je mee.
Voor gevorderden: handmatig en per netwerk
Wie zonder de ingebouwde functie werkt, bijvoorbeeld in een eigen thema, plaatst de favicon-bestanden zelf en verwijst ernaar met link-tags in de head van de site, het liefst via een child theme zodat de verwijzingen updates overleven. In een multisite-netwerk stelt elke site zijn eigen site-icoon in via de eigen instellingen; er is geen netwerkbreed icoon. En controleer na een migratie of domeinwissel even of het icoon nog laadt: de verwijzing bevat een volledig webadres dat bij zo’n wijziging mee moet veranderen, wat automatisch gebeurt als je de migratie netjes uitvoert volgens onze complete gids over WordPress back-ups en migratie.
Klein onderdeel, onderdeel van een groter geheel
Het site-icoon is typisch zo’n afwerkingsklus die je in de laatste fase van het bouwen meepakt, samen met de sitetitel en je permalinks. Ben je je site nog aan het opzetten, dan loopt onze startgids voor het maken van een website met WordPress al die afwerkpunten in de juiste volgorde met je door. En staat je site er eenmaal, dan vind je in onze complete gids over WordPress-beheer hoe je hem netjes bijhoudt.
