Er is een nieuw logo, u heeft netjes een vierkant icoon aangeleverd en in WordPress bij de site-instellingen geüpload. In het voorbeeldvenster ziet het er goed uit. En toch staat er in het tabblad van uw browser nog steeds dat oude, afgekeurde vlaggetje. Dat de favicon niet werkt in WordPress is bijna nooit een fout in WordPress zelf; het is een stapel kopieën die elk hun eigen kant van het verhaal vasthouden.
Dit artikel loopt die stapel van boven naar beneden af, zodat u niet twintig keer hetzelfde bestand opnieuw upload in de hoop dat het de volgende keer wel pakt.
Waarom juist dit icoontje zo hardnekkig is
Een favicon wordt door browsers behandeld als een bestand dat vrijwel nooit verandert. Het wordt daarom extra lang bewaard, soms weken, en het wordt ook bewaard als u de rest van uw geschiedenis wist. Bovendien wordt hij op meerdere plekken tegelijk opgeslagen: in het gewone browsergeheugen, in een aparte iconendatabase, en nog eens bij de snelkoppelingen op uw startscherm.
Daar komt bij dat de vraag om het icoon vaak op een vast adres binnenkomt, namelijk /favicon.ico in de hoofdmap. Ligt daar een oud bestand van jaren geleden, dan wint dat het van wat u in WordPress heeft ingesteld, want het staat er letterlijk vóór.
Eerst vaststellen wát er nu wordt geserveerd
Voordat u iets aanpast, wilt u weten of het probleem bij uw server of bij uw browser ligt. Dat scheelt een hoop werk.
- Open uw site in een privévenster of in een browser die u zelden gebruikt. Ziet u daar het nieuwe icoon, dan staat het er goed en zit de kopie alleen bij u lokaal.
- Roep het adres van de afbeelding rechtstreeks op. Ga naar uw domein gevolgd door /favicon.ico en kijk wat er verschijnt.
- Bekijk de broncode van uw homepage en zoek op het woord icon. U vindt daar een verwijzing naar een bestand in de map wp-content/uploads. Roep dat adres op en controleer of dat het nieuwe icoon is.
Nu weet u waar de fout zit. Toont het rechtstreekse adres het nieuwe bestand, dan is het een kwestie van opruimen aan de kant van de bezoeker. Toont het het oude, dan ligt er ergens een bestand dat weg moet.
De vier plekken waar een oude kopie blijft hangen
Uw eigen browser. Een gewone verversing helpt hier niet, ook niet met de shift-toets erbij. In Chrome opent u de instellingenpagina voor het wissen van browsegegevens, kiest u afbeeldingen en bestanden in de cache, en zet u de periode op alle tijden. Firefox en Safari hebben vergelijkbare knoppen. Sluit de browser daarna volledig af en start hem opnieuw; anders blijft de iconenlijst in het geheugen staan.
Een cacheplugin of serverkant. Draait er WP Rocket, LiteSpeed Cache, W3 Total Cache of iets van uw host, leeg dan de volledige cache, niet alleen die van de homepage. Dit is dezelfde oorzaak die maakt dat tekstwijzigingen soms niet doorkomen; daarover meer in het artikel over een site die een oude versie blijft tonen.
Cloudflare of een andere tussenlaag. Zit er een netwerkdienst voor uw site, dan bewaart die het icoon ook. In het beheerpaneel van Cloudflare kiest u onder Caching voor het legen van één specifiek adres; vul daar het volledige adres van uw favicon in.
Een fysiek bestand in de hoofdmap. Log in via FTP en kijk of daar favicon.ico of favicon.png staat. Is dat een overblijfsel van een oude site, verwijder het dan of vervang het door het nieuwe icoon. Sommige thema’s zetten er zelf ook een neer in de themamap.
Als het icoon nergens verschijnt
Soms is er helemaal geen icoon te zien, ook niet in een schone browser. Loop dan deze punten na.
- Het bestand is te klein of niet vierkant. WordPress vraagt om minimaal 512 bij 512 pixels. Levert u iets van 32 bij 32 aan, dan wordt het geweigerd of wazig weergegeven.
- Het is een SVG-bestand. WordPress accepteert dat standaard niet als site-icoon. Lever een PNG aan.
- Het thema regelt het zelf. Sommige thema’s, met name die van commerciële bouwers, hebben een eigen veld voor het icoon dat de WordPress-instelling overschrijft. Zoek in de themaopties naar site icon of favicon en vul het daar ook in.
- Een SEO-plugin of een aparte faviconplugin mengt zich ermee. Twee partijen die allebei een verwijzing plaatsen levert onvoorspelbaar gedrag op. Kies er één.
- Het is te transparant of te donker. Een wit logo op een transparante achtergrond is onzichtbaar in een licht tabblad. Test uw icoon in beide browserthema’s.
De trucs die tijd besparen
Wilt u zeker weten dat u naar een verse versie kijkt, plak dan een vraagteken met een willekeurig getal achter het adres van het icoon, bijvoorbeeld /favicon.ico?v=3. De browser ziet dat als een nieuw bestand en haalt het opnieuw op. Handig om te controleren, al helpt het uw bezoekers niet, want die vragen het oude adres op.
Verwacht ook niet dat iedereen het meteen ziet. Bezoekers die uw site eerder bezochten, houden het oude icoon soms nog een paar weken. Dat is normaal en corrigeert zichzelf. Belangrijker is dat het bij een nieuwe bezoeker meteen goed staat.
Een advocatenkantoor dat van naam veranderde, ontdekte pas na een maand dat het oude icoon nog in alle bladwijzers van hun relaties stond. Niet op te lossen, wel te beperken: wie bij een rebranding het bestand op /favicon.ico direct meeneemt in plaats van alleen de WordPress-instelling, ruimt het grootste deel meteen op.
Wanneer het geen faviconprobleem meer is
Blijft niet alleen het icoon oud, maar ook teksten, prijzen of afbeeldingen, dan is het icoon slechts het symptoom en zit er iets structureel scheef in de manier waarop uw site wordt bewaard. Kijk dan naar de opzet van uw cache; in de vergelijking van cacheplugins staat wat de verschillende pakketten in de praktijk doen.
Blijft het na al deze stappen mislopen, dan zit er meestal een conflict tussen thema en plugin dat u van buitenaf niet ziet. Voor dat soort hardnekkige weergavefouten die zich niet laten wegklikken loont het om iemand met toegang tot de code te laten kijken; bij WebMaintor is dit doorgaans een kwestie van een kwartier.
Volgende stap voor vandaag: open uw domein met /favicon.ico erachter in een privévenster. Wat u daar ziet, is wat een nieuwe bezoeker ziet, en dat is de enige weergave die telt.
