Samenvatting (TL;DR)
- Validatie is belangrijk: Een kapotte favicon is niet alleen een ontbrekend icoon; het veroorzaakt 404-fouten in serverlogs en schaadt de merkuitstraling.
- Uitgebreide analyse: Deze tool crawlt uw site als een browser om
favicon.ico, PNG-iconen, Apple Touch Icons en Web Manifests te verifiëren. - Actiegerichte feedback: Krijg specifieke rapporten over bestandstoegankelijkheid, dimensie-mismatches en formaatvaliditeit.
Waarom favicons valideren?
Een favicon implementeren lijkt eenvoudig, maar is gevoelig voor stille fouten. Moderne browserecosystemen (Desktop, Android, iOS) hebben verschillende vereisten.
- Browser Caching: Lokale browsers cachen favicons agressief, waardoor problemen vaak verborgen blijven.
- Gefragmenteerde standaarden: U hebt meer nodig dan alleen
favicon.ico. Apple-apparaten zoeken naarapple-touch-icon. Android en PWA’s zoeken naarsite.webmanifest. - Serverconfiguratie: Correcte paden in HTML zijn zinloos als uw server een 403 of het verkeerde MIME-type retourneert.
Wat wordt gecontroleerd
Onze analyser voert een audit in meerdere stappen uit:
- HTML Parsing: We scannen de
<head>op alle gedeclareerde icoonlinks. - Manifest Validatie: We controleren of gedeclareerde groottes in het Web Manifest overeenkomen met de werkelijke bestanden.
- Toegankelijkheid: We proberen elk icoon te downloaden om te verifiëren dat het
200 OKretourneert. - Formaat & Dimensies: We inspecteren binaire data om te garanderen dat het bestand een geldige afbeelding is en de afmetingen kloppen.
- Impliciete detectie: We controleren standaardpaden zoals
/favicon.ico.
Veelvoorkomende implementatiefouten
1. Het “Spook” Icoon
U hebt een <link> tag, maar het bestand retourneert een 404. Oplossing: Controleer het bestandspad ten opzichte van uw domein-root.
2. Formaat Mismatch
U declareert type="image/png" maar serveert een JPEG of ICO. Oplossing: Zorg dat de Content-Type header van de server overeenkomt met het echte formaat.
3. Dimensie Leugen
HTML zegt sizes="32x32", maar de echte afbeelding is 16x16. Oplossing: Gebruik de Favicon Generator voor exacte maten.
4. Ontbrekend Apple Touch Icon
Zonder apple-touch-icon zien iOS-gebruikers een algemeen screenshot. Oplossing: Voeg altijd een 180x180 PNG toe voor Apple.
Beste Praktijken
- Root Fallback: Heb altijd een
favicon.icoin de root (/favicon.ico). - SVG voor modern: Gebruik SVG favicon voor resolutie-onafhankelijkheid.
- Manifest: Definieer aparte iconen in
manifest.json. - Cache Busting: Gebruik query strings (bijv.
?v=2) bij updates.
FAQ
Waarom zegt de checker “Ontbrekend” als ik het kan zien?
Uw browser heeft waarschijnlijk een oude versie gecacht. De checker ziet wat een nieuwe bezoeker ziet.
Heb ik echt al deze bestanden nodig?
favicon.ico is het minimum. Maar voor een professionele uitstraling is de volledige set de standaard.
Kan ik een CDN gebruiken?
Ja. Zorg er alleen voor dat de <link> tags naar de absolute URL op de CDN wijzen.