Hoe voeg je een favicon toe aan je WordPress-site

Een favicon toevoegen aan WordPress duurt ongeveer 30 seconden: ga naar Weergave → Customizer → Site-identiteit → Site-icoon, upload een 512x512 PNG en klik op Publiceren. Klaar.

Maar als dat niet werkt — of je meer controle wilt — lees dan verder. Er zijn een paar valkuilen die de moeite waard zijn om te kennen.

De snelle manier: WordPress Customizer

Dit werkt op elke WordPress-site met versie 4.3 of later (uitgebracht in 2015). Als je een enigszins recente versie gebruikt, heb je deze optie.

Stap 1: Open de Customizer

• Ga naar Weergave → Customizer in je WordPress-beheerder
• Of klik op "Customizer" in de adminbalk terwijl je je site bekijkt

Stap 2: Zoek Site-identiteit

• Klik op Site-identiteit in de Customizer-zijbalk
• Scroll naar beneden naar Site-icoon

Stap 3: Upload je afbeelding

• Klik op Selecteer site-icoon
• Upload een PNG-afbeelding van minimaal 512 x 512 pixels
• WordPress genereert automatisch alle kleinere formaten die het nodig heeft (waaronder 32x32, 180x180, enz.)
• Snijd bij als daarom wordt gevraagd en klik op Publiceren

Dat is alles. WordPress regelt de rest — het maakt de <link>-tags voor browserfavicons, Apple touch icons en zelfs de Windows-tegelafbeelding.

De codemanier: Favicon handmatig toevoegen

Soms is de Customizer-aanpak niet toereikend. Misschien bouw je een aangepast thema, of je thema overschrijft het standaardgedrag. Zo voeg je het toe met code.

Optie A: Bestanden in je thema plaatsen

Upload je faviconbestanden naar de rootmap van je thema en voeg dit toe aan het functions.php-bestand van je thema:

function custom_favicon() {
    $favicon_url = get_stylesheet_directory_uri();
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $favicon_url; ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $favicon_url; ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $favicon_url; ?>/apple-touch-icon.png">
    <?php
}
add_action('wp_head', 'custom_favicon');

Optie B: Een SVG-favicon gebruiken

SVG-favicons schalen perfect en ondersteunen donkere modus. Voeg dit toe aan functions.php:

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

De PNG-fallback is er voor Safari, dat SVG-favicons nog steeds niet volledig ondersteunt.

Een plugin gebruiken (als je dat liever hebt)

Verschillende plugins handelen favicons af, maar eerlijk gezegd? De ingebouwde Customizer werkt prima voor de meeste sites. Plugins zijn zinvol als je het volgende nodig hebt:

• Verschillende favicons per pagina of bericht
• A/B-testen met verschillende iconen
• Multisite met per-site favicons

Populaire opties zijn onder andere All in One Favicon en Flavor (voorheen flavicon). Maar nogmaals — probeer eerst de Customizer.

WordPress-blokthema's (Full Site Editing)

Als je een blokthema gebruikt zoals Twenty Twenty-Four of Twenty Twenty-Five, is het proces iets anders:

1. Ga naar Weergave → Editor
2. Klik op Stijlen (het halve cirkel-icoon)
3. Navigeer naar de globale stijlen van je site
4. De Site-icoon-instelling staat nog steeds onder Weergave → Customizer → Site-identiteit

Blokthema's gebruiken nog steeds dezelfde Customizer voor de favicon. WordPress heeft dit nog niet naar de Site Editor verplaatst.

Aanbevolen faviconbestanden

Voor volledige dekking bereid je deze bestanden voor:

De WordPress Customizer handelt de meeste hiervan automatisch af wanneer je een 512x512 afbeelding uploadt. De SVG- en ICO-bestanden moeten handmatig worden toegevoegd als je ze wilt.

Probleemoplossing: Favicon wordt niet weergegeven

Alles wissen

WordPress favicon-problemen zijn bijna altijd gerelateerd aan caching:

1. Browsercache: Forceer verversing met Ctrl+Shift+R (Windows) of Cmd+Shift+R (Mac)
2. WordPress-cache: Als je WP Super Cache, W3 Total Cache of LiteSpeed Cache gebruikt — wis deze
3. CDN-cache: Cloudflare, Fastly of wat je ook gebruikt — wis de favicon-URL's
4. Probeer incognito: Opent een schone sessie zonder gecachte bestanden

Controleer op pluginconflicten

Sommige SEO-plugins en thema-frameworks injecteren hun eigen favicon-tags. Als je dubbele <link rel="icon">-tags ziet in je paginabron:

1. Bekijk de paginabron (Ctrl+U)
2. Zoek naar "icon" of "favicon"
3. Als er duplicaten zijn, controleer welke plugin ze toevoegt
4. Schakel de favicon-functie van de plugin uit, of verwijder je handmatige code

Thema-overschrijvingsproblemen

Sommige thema's (vooral premium-thema's) hebben hun eigen favicon-instellingen die de Customizer overschrijven. Controleer:

• Thema-opties paneel voor een favicon-instelling
• Het header.php-bestand van het thema voor hardgecodeerde <link rel="icon">-tags
• Thema-documentatie voor favicon-instructies

Probleemoplossing: Google toont een verkeerde favicon

Google kan dagen tot weken nodig hebben om favicons bij te werken in zoekresultaten. Zo kun je het versnellen:

Google's favicon-vereisten

Google heeft specifieke regels voor het tonen van favicons in zoekresultaten:

• Moet een veelvoud van 48px zijn (48x48, 96x96, 144x144)
• Moet vierkant zijn
• Mag geen ongepaste of NSFW-content bevatten
• Moet de website vertegenwoordigen (niet een generiek icoon)

De update versnellen

1. Zorg ervoor dat je favicon live en bereikbaar is
2. Open Google Search Console
3. Gebruik URL-inspectie op je homepage
4. Klik op Indexering aanvragen
5. Wacht — het duurt doorgaans 1-2 weken

Probleemoplossing: Favicon verschijnt op desktop maar niet op mobiel

Mobiele browsers zijn kieskeuriger over favicon-formaten:

• iOS Safari: Heeft apple-touch-icon (180x180) nodig — de gewone favicon verschijnt niet op het startscherm
• Android Chrome: Zoekt naar manifest.json met icoonverwijzingen voor het startscherm
• PWA: Heeft zowel 192x192 als 512x512 iconen nodig gedefinieerd in het web app manifest

Als je WordPress-site een web app manifest heeft (sommige thema's en plugins voegen er een toe), zorg er dan voor dat de icoonpaden erin correct zijn.

Multisite-overwegingen

Draai je WordPress Multisite? Elke site heeft zijn eigen favicon nodig.

• De Customizer is per site, dus elke subsite kan zijn eigen icoon hebben
• Netwerkniveau-instellingen bevatten geen standaardfavicon
• Als je een netwerkbreed standaardpictogram wilt, voeg het toe via functions.php in een must-use plugin (wp-content/mu-plugins/)

Best practices

• Begin groot: Upload minimaal 512x512 — WordPress schaalt omlaag, nooit omhoog
• Gebruik PNG: Transparante achtergronden werken beter dan JPEG
• Houd het simpel: Je favicon is klein — complexe logo's zijn niet leesbaar op 16x16
• Test in meerdere browsers: Gebruik Favicon.im om je setup te controleren
• Versie je favicon: Voeg ?v=2 toe aan de URL bij het bijwerken om caches te omzeilen

Veelgestelde vragen

Hoe voeg ik een favicon toe in WordPress?

Ga naar Weergave → Customizer → Site-identiteit → Site-icoon, upload een 512x512 PNG-afbeelding en klik op Publiceren. WordPress genereert automatisch alle vereiste formaten.

Welke maat moet een WordPress-favicon zijn?

Upload minimaal 512 x 512 pixels. WordPress maakt automatisch 32x32, 180x180 en andere formaten aan. Voor Google-zoekresultaten gebruik je veelvouden van 48px.

Waarom wordt mijn WordPress-favicon niet weergegeven?

Meestal een cachingprobleem. Wis je browsercache, WordPress-cacheplugin en CDN-cache. Probeer een incognitovenster. Controleer ook op pluginconflicten die dubbele favicon-tags veroorzaken.

Kan ik een SVG-favicon gebruiken in WordPress?

WordPress ondersteunt standaard geen SVG-uploads om veiligheidsredenen. Je kunt SVG-favicon-ondersteuning handmatig toevoegen via functions.php-code, of een plugin gebruiken die SVG-uploads mogelijk maakt.

Hoe voeg ik verschillende favicons toe voor lichte en donkere modus in WordPress?

Gebruik een SVG-favicon met ingesloten CSS media queries voor prefers-color-scheme. Voeg het SVG-bestand handmatig toe via functions.php aangezien de Customizer alleen PNG/ICO-formaten ondersteunt.

Referenties

1. Site Icon - WordPress Developer Resources - Officiële WordPress-documentatie
2. Define a favicon to show in search results - Google Search Central
3. Favicon.im - Favicon test- en validatietool