Favicon voor WordPress

WordPress verwerkt favicon-injectie standaard via de Site Icon-functie, geïntroduceerd in WordPress 4.3. Wanneer u een afbeelding uploadt in de Customizer, snijdt WordPress deze automatisch bij, genereert kleinere varianten en injecteert de juiste `<link rel='icon'>` en `<link rel='apple-touch-icon'>` tags op elke pagina. Voor de overgrote meerderheid van de sites is geen plug-in of codewijziging nodig.

Om toegang te krijgen tot de sitepictograminstelling logt u in op uw WordPress-beheerdersdashboard en navigeert u naar Weergave > Aanpassen. Klik in de linkerzijbalk op Site-identiteit. U ziet het uploadveld Sitepictogram onder aan het paneel. Klik op Afbeelding selecteren, upload uw pictogram, snijd het bij als daarom wordt gevraagd en klik op Publiceren. Uw favicon gaat onmiddellijk live bij het laden van de volgende pagina.

WordPress vereist een minimale afbeeldingsgrootte van 512×512 pixels voor het sitepictogram. Upload een vierkante PNG met die resolutie of groter. WordPress genereert automatisch kleinere varianten (16×16, 32×32, 180×180) vanuit de bron. Upload nooit een kleine afbeelding en verwacht niet dat WordPress deze zal opschalen; het resultaat is een wazig pictogram in browsertabbladen.

PNG is het aanbevolen formaat voor WordPress favicon-uploads. Het platform ondersteunt ook JPEG en GIF, maar JPEG ondersteunt geen transparantie en GIF biedt slechte compressie voor fotografische logo's. Een transparante achtergrond PNG zorgt ervoor dat uw pictogram er strak uitziet in elk browserthema, inclusief tabbladbalken in de donkere modus.

Als uw thema de Gutenberg-site-editor (volledige sitebewerking) gebruikt, kan het pad naar het sitepictogram enigszins afwijken. Kijk onder Uiterlijk > Editor > Stijlen of gebruik de blokinstellingen voor het sitelogo. Sommige blokthema's tonen ook een faviconveld in het paneel Algemene instellingen. De onderliggende WordPress-functie is hetzelfde: alleen het pad van de beheerdersinterface verandert.

Voor geavanceerde controle (bijvoorbeeld het weergeven van een andere favicon in de submap van de winkel dan op de blog) kunt u de URL van het sitepictogram programmatisch overschrijven. Voeg dit toe aan functions.php van uw thema of aan een sitespecifieke plug-in: `add_filter('get_site_icon_url', function($url, $size, $blog_id) { return 'https://example.com/custom-favicon.png'; }, 10, 3);`. Hiermee wordt de Customizer volledig omzeild en kunt u elk pictogram vanaf elke URL bedienen.

Sommige plug-ins voor paginabuilder (Elementor, Divi, Beaver Builder) voegen hun eigen favicon-instellingen toe die kunnen conflicteren met de WordPress Customizer. Controleer het site-instellingenpaneel van uw paginabouwer en verwijder eventuele faviconoverschrijvingen daar, en stel deze vervolgens opnieuw in via de native WordPress Customizer. Het hebben van twee concurrerende favicon-tags op dezelfde pagina kan inconsistente resultaten in browsers opleveren.

Voor WordPress-installaties op meerdere locaties moet elke subsite een eigen locatiepictogram hebben. Netwerkbeheerdersinstellingen worden niet trapsgewijs doorgegeven aan subsites. Als je een gedeelde favicon over het hele netwerk wilt, gebruik dan de programmatische filterbenadering en haak in op de sitepictogram-URL op netwerkniveau met behulp van een plug-in die je moet gebruiken (mu-plugins).

Caching-plug-ins zoals WP Rocket, W3 Total Cache of LiteSpeed Cache kunnen favicon-updates vertragen. Nadat u uw sitepictogram hebt gewijzigd, wist u alle cachelagen: de WordPress-objectcache, de paginacache, uw CDN-cache en uw browsercache. Als het oude pictogram blijft bestaan, voeg dan `?v=2` handmatig toe aan de favicon-link in de HTML of wacht tot de cache-TTL is verlopen.

Om te controleren of WordPress de juiste favicon-tags uitvoert, klikt u met de rechtermuisknop op uw site in een browser, kiest u Paginabron bekijken en zoekt u naar `rel='icon'`. U zou zowel een favicon.ico-vermelding als een apple-touch-icon-vermelding moeten zien die naar uw geüploade afbeelding verwijst. Als een van beide ontbreekt, overschrijft je thema mogelijk `wp_head()`. Zorg ervoor dat `<?php wp_head(); ?>` wordt aangeroepen in de header.php van je thema.

WordPress SEO-plug-ins van derden, zoals Yoast SEO en Rank Math, bevatten hun eigen sociale en schema-metagegevens, maar interfereren niet met het sitepictogram. Als u echter jaren geleden een favicon-specifieke plug-in hebt geïnstalleerd voordat WordPress native ondersteuning toevoegde, kan die plug-in nu conflicteren. Deactiveer eventuele oudere favicon-plug-ins voordat u de ingebouwde Customizer-optie gebruikt.

Voor door WordPress.com gehoste sites (in tegenstelling tot zelf-gehoste WordPress.org) bevindt het faviconpad zich in Mijn sites > Instellingen > Algemeen > Sitepictogram. De stappen zijn vrijwel identiek aan de zelf-gehoste Customizer-stroom, maar het bewerken van thema's en plug-ins zijn beperkt, afhankelijk van uw abonnement. Upload een PNG van 512×512 en sla op – WordPress.com regelt alle formaatwijzigingen en tag-injectie.

Nadat u uw favicon heeft ingesteld, controleert u of deze correct werkt met behulp van de favicon tester door de URL van uw site in te voeren. Dit bevestigt dat het pictogram openbaar toegankelijk is en op het verwachte pad verschijnt. Controleer ook best favicon size om te begrijpen welke resoluties WordPress genereert en of u deze handmatig moet toevoegen voor PWA-ondersteuning.