Favicon toevoegen in WordPress
WordPress noemt het een Site Icon en kan elk formaat uit één upload genereren. Deze walkthrough behandelt de Customizer, thema-overschrijvingen, edge-cases voor meerdere sites, voorbeelden, veelgestelde vragen en de cacheproblemen waardoor pictogrammen na het opstarten vast blijven zitten.
Hoe WordPress omgaat met favicon's
Sinds WordPress 4.3 levert core een Site Icon-functie die de juiste <link>-tags voor u bijsnijdt, vergroot of verkleint en injecteert. Voor standaardsites is geen plug-in vereist. Gebruik onze favicon generator, PNG naar ICO converter, SVG naar ICO converter en live favicon tester om uw icon set te bouwen en te verifiëren, en lees de companion guide voor een beknopte walkthrough.
Geüploade iconen worden opgeslagen in de Mediabibliotheek en er wordt verwezen via wp_site_icon() aan de voorkant. WordPress genereert server-side meerdere formaten wanneer u publiceert.
De functie vervangt handmatige favicon.ico-uploads voor de meeste bloggers, bureaus en WooCommerce-winkels.
Via de Customizer (aanbevolen)
Ga in wp-admin naar Weergave → Aanpassen → Site-identiteit → Site Icon.
Klik op Selecteer Site Icon en upload een vierkante PNG van minimaal 512×512 pixels. WordPress toont een live cropper: centreer uw logomerk binnen het vierkante veilige gebied.
Klik op Publiceren. Core geeft het Apple-Touch-pictogram, verschillende PNG-formaten en metatags weer bij de volgende laadbeurt van de front-endpagina.
Via jouw thema of code
Voor pictogrammen per sectie of submapmerken filtert u get_site_icon_url() in uw kindthema functions.php.
Voorbeeld van een gebruiksscenario: een netwerk met meerdere locaties waarbij elke subsite een duidelijk kenmerk nodig heeft, maar één thema deelt. Retourneer verschillende URL's op basis van blog_id.
Geavanceerde teams kunnen de standaard site-icoon-meta uit de wachtrij verwijderen en aangepaste <link>-tags afdrukken in header.php, maar dat dupliceert de werkkern doet het al goed.
Voorbeelden
Eén blog: upload 512×512 PNG via Customizer. Klaar — geen FTP, geen .ico-bewerking.
WooCommerce winkel: dezelfde stroom; verifieer het pictogram op de betaal- en accountpagina's, niet alleen op de startpagina. Caching-plug-ins vertragen soms CSS, maar blokkeren zelden pictogramtags.
Headless WordPress: Site Icon-tags verschijnen alleen op PHP-gerenderde pagina's. Uw Next.js-frontend moet zijn eigen <link>-tags in die architectuur declareren.
Staging → productie: upload of migreer de media-ID opnieuw. Hardcode absolute pictogram-URL's alleen als u de ongeldigheid van de CDN-cache begrijpt.
Plug-ins en wanneer u ze kunt overslaan
Populaire SEO-plug-ins kunnen ook een favicon-instelling weergeven. Vermijd het verschillend configureren van zowel de SEO-plug-in als Site Icon; kies één bron van waarheid.
Caching-plug-ins (WP Rocket, W3 Total Cache) mogen geen pictogrambestanden blokkeren, maar ze kunnen HTML zonder nieuwe tags in de cache opslaan totdat ze worden leeggemaakt.
Favicon-plug-ins waren zinvol vóór WordPress 4.3. In 2026 zijn ze overbodig, tenzij je geanimeerde of geplande pictogramwissels nodig hebt.
Veelgestelde vragen
Welk bestandstype moet ik uploaden? PNG is het veiligst. WordPress accepteert JPG, maar u verliest de transparantie.
Minimale maat? 512×512 officieel; grotere bronnen verkleinen prima.
Creëert WordPress favicon.ico? Het zendt PNG-formaten en metatags uit. Browsers hebben er nog steeds baat bij om een echte .ico in de webroot te plaatsen via hosting of een child-thema.
Multisite: elke site heeft zijn eigen Site Icon in zijn eigen Customizer. Netwerkbeheerders stellen dit per site in, tenzij een thema URL's globaal filtert.
Waarom wordt mijn favicon niet bijgewerkt?
Browsers cachen favicons afzonderlijk van HTML. Na publicatie in WordPress kunt u hard vernieuwen of testen in een privévenster.
Voeg ?ver=2 alleen toe aan pictogram-URL's als u tags met de hand rolt. Site Icon-URL's bevatten query-args die veranderen wanneer u opnieuw uploadt.
Wis de objectcache van WordPress en eventuele CDN (Cloudflare, Jetpack Boost) als de HTML nog steeds verwijst naar een oude bijlage-URL.
Als u domeinen heeft gemigreerd, doorzoek dan de database naar oude pictogram-URL's in geserialiseerde opties; sommige importeurs missen siteicon_id.
Problemen oplossen
Wazig pictogram na uploaden: bronafbeelding was kleiner dan 512×512 of niet vierkant. Regenereer vanuit een grotere master.
Geen pictogram in Google-resultaten: Google gebruikt zijn eigen cache; verzoek om herindexering in Search Console na het updaten van Site Icon.
Pictogram op desktop maar niet op iPhone: iOS heeft een Apple-touch-pictogram nodig; bevestig dat Site Icon wordt gepubliceerd en niet alleen als concept wordt opgeslagen in Customizer.
Wit vak rond logo: JPG geüpload met witte achtergrond in plaats van transparant PNG.
Hosting- en CDN-overwegingen
Beheerde WordPress-hosts (WP Engine, Kinsta, SiteGround) cachen HTML aan de rand. Na het wijzigen van Site Icon leegt u alle caches van het hostdashboard.
Cloudflare orange-cloud proxy's kunnen HTML in de cache opslaan zonder /wp-content/uploads/ iconen in de cache op te slaan - meestal prima, maar worden opgeschoond als de URL's van pictogrambijlagen veranderen.
Meertalige plug-ins (WPML, Polylang) dupliceren Site Icon standaard niet per taal. Eén pictogram bedient alle landinstellingen, tenzij u URL's filtert.
Bij basis- of headless-opstellingen kunnen uploads worden verplaatst. Bevestig media-URL's in het front-end HTML-punt waar uw CDN ze verwacht.
Als u statische export aanbiedt (Simply Static, WP2Static), genereer de export dan opnieuw nadat het pictogram is gewijzigd, zodat offline HTML nieuwe bijlage-ID's ophaalt.
Machtigingen en rollen
Alleen gebruikers met aanpassingsmogelijkheden (meestal beheerders en editors bij standaardinstallaties) kunnen Site Icon wijzigen. Auteurs kunnen het merkteken niet ruilen zonder verhoogde rechten.
Op multisite kunnen superbeheerders netwerkbrede thema's uploaden, maar Site Icon blijft per site tenzij aangepaste code één bijlage-URL deelt.
Controleer beheerthema's van derden die Uiterlijk → Aanpassen verbergen. Mogelijk moet u de Customizer opnieuw inschakelen of de Customizer deep link ?autofocus[section]=title_tagline gebruiken.
Wanneer u een site aan een klant overhandigt, documenteer dan dat favicon live verandert in Aanpassen, en niet alleen in de Mediabibliotheek. Als u PNG daar uploadt zonder Site Icon toe te wijzen, gebeurt er niets.
WooCommerce en lidmaatschapssites
WooCommerce-afrekenen gebruikt hetzelfde themahoofd als de rest van de winkel. Site Icon verschijnt automatisch op winkelwagen- en bedankpagina's.
Lidmaatschapsplug-ins die front-end-sjablonen vervangen, moeten nog steeds wp_head() aanroepen, dus Site Icon meta-uitvoer.
White-label klantportals verwijderen soms branding hooks - controleer of de aanpassingsmogelijkheid niet is uitgeschakeld voor abonneerollen als klanten hun eigen pictogram uploaden.
E-mailsjablonen gebruiken Site Icon niet. Het WooCommerce e-maillogo is een aparte instelling onder Uiterlijk → Aanpassen → WooCommerce.
Migreren vanuit handleiding favicon.ico
Als u favicon.ico eerder via FTP naar de webroot heeft geüpload, verwijdert Site Icon deze niet. Browsers kunnen op onvoorspelbare wijze de voorkeur geven aan de ene bron boven de andere.
Kies één aanpak: vertrouw op de Site Icon PNG-uitgangen of houd een handgemaakte ICO aan de basis met bijpassend ontwerp. Verwijder duplicaten na QA.
Klassieke thema's met hardgecodeerde link rel=icon in header.php kunnen kern Site Icon bestrijden. Verwijder handmatige tags bij het inschakelen van Site Icon.
Na de migratie leegt u de caches en test u in privé browsen om te zien welk pictogram wint.
Documenteer de gekozen aanpak in uw runbook, zodat de volgende ontwikkelaar geen tweede conflicterende favicon-plug-in toevoegt.