Favicon wordt niet weergegeven - Gids voor probleemoplossing
Je hebt een favicon geüpload, maar op het tabblad staat nog steeds een algemene wereldbol of een oud logo. In deze handleiding worden de meest voorkomende oorzaken besproken (caching, verkeerde paden, ontbrekende bestanden en conflicterende <link>-tags) in de volgorde waarin u ze moet controleren.
Browsers cachen favicons agressiever dan vrijwel elk ander item. Een harde vernieuwing (Ctrl+Shift+R of Cmd+Shift+R) verhelpt veel valse alarmen. Als dat niet lukt, voegt u één keer een versiequerytekenreeks toe: /favicon.ico?v=2.
Bevestig dat het bestand bestaat op de URL die de browser vraagt. Open /favicon.ico rechtstreeks in een nieuw tabblad. Een 404 betekent dat het bestand niet is geïmplementeerd waar u denkt dat het is - gebruikelijk bij SPA-builds die alleen index.html bedienen.
Controleer uw <link rel="icon"> href-paden. Absolute paden (/favicon.ico) werken op elke pagina; relatieve paden (favicon.ico) breken af op geneste routes zoals /blog/post.
Als u een CDN gebruikt, verwijdert u de favicon-paden na de implementatie. Sommige CDN's cachen 404-antwoorden voor /favicon.ico wanneer het bestand ontbrak tijdens het eerste verzoek.
Meerdere <link rel="icon">-tags kunnen oudere browsers in verwarring brengen. Plaats favicon.ico eerst, daarna PNG/SVG-varianten met expliciete type- en maatkenmerken.
WordPress, Shopify en statische hosts injecteren elk hun eigen tags. Bekijk de paginabron en zoek naar rel="icon"; dubbele of overschreven tags zijn een veelvoorkomende oorzaak.
HTTPS-waarschuwingen met gemengde inhoud blokkeren HTTP-favicon-URL's op beveiligde pagina's. Serveer elk pictogram via HTTPS.
Voor lokale ontwikkeling weigeren sommige browsers favicons bij te werken totdat u de sitegegevens voor localhost wist.
Hoe het werkt
- 1
Controleer de bestands-URL
Open /favicon.ico in een nieuw tabblad – verwacht 200, niet 404.
- 2
Inspecteer <head>-tags
Bekijk bron; bevestig één canonieke favicon.ico-link en geen typefouten.
- 3
Buste cache een keer
Voeg ?v=2 toe aan de href, implementeer, ververs hard en verwijder de query indien gewenst.
Probeer het nu
Test je live favicon
Live favicon-testerVeelgestelde vragen
Waarom werkt mijn favicon lokaal, maar niet in productie?+
Productiebuilds worden vaak uitgevoerd naar een submap of CDN-voorvoegsel. Controleer of het geïmplementeerde pad overeenkomt met uw <link> href en of het bestand is opgenomen in de build-uitvoer.
Hoe lang duurt het voordat Google mijn favicon bijwerkt in de zoekresultaten?+
Het kan dagen tot weken duren voordat Google opnieuw crawlt. Zorg ervoor dat het pictogram minimaal 48×48 groot is, vierkant en openbaar toegankelijk is met een stabiele URL.
Verbergt adblock of privacymodus favicons?+
Zelden voor first-party iconen. Favicon-proxy's van derden kunnen worden geblokkeerd; Dit heeft geen invloed op zelfgehoste pictogrammen op uw domein.
Moet ik de favicon-cache van de browser verwijderen?+
Wis sitegegevens voor uw domein in de browserinstellingen of test in een privévenster met cache uitgeschakeld.