{"id":1517,"date":"2024-12-17T10:54:20","date_gmt":"2024-12-17T10:54:20","guid":{"rendered":"\/tutorials\/?p=1517"},"modified":"2026-02-02T10:44:38","modified_gmt":"2026-02-02T10:44:38","slug":"wordpress-favicon","status":"publish","type":"post","link":"\/nl\/tutorials\/wordpress-favicon\/","title":{"rendered":"Wat is een WordPress favicon en hoe voeg je er een toe: 4 snelle methodes"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Een favicon is een kleine afbeelding die in het tabblad van de webbrowser wordt weergegeven wanneer een gebruiker je WordPress website opent. Deze favicon helpt gebruikers om je site snel te herkennen als er meerdere tabbladen geopend zijn, in het bijzonder als de titel van je site niet zichtbaar is.<\/p><p class=\"wp-block-paragraph\">Deze tutorial legt uit wat een WordPress favicon is, wat het belang ervan is en hoe je er een kunt maken. We onderzoeken ook verschillende manieren om er een aan je website toe te voegen, zodat je er een kunt kiezen op basis van je voorkeuren.<\/p><p>\n\n\n\n\n\n<div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   Wat is een favicon?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Een favicon is een afbeelding, meestal een logo, die je WordPress site specificeert. Het heeft meestal een rechthoekige beeldverhouding, een lage resolutie en bevat de visuele identiteit van je website, zoals het kleurenpalet. Een favicon kun je maken met grafische software zoals Photoshop, webtools of de ingebouwde functie van WordPress.<\/p><\/div>\n\n\n\n<\/p><p class=\"wp-block-paragraph\">Een favicon helpt gebruikers om meerdere tabbladen te beheren en verhoogt de zichtbaarheid van je website op de resultatenpagina&rsquo;s van zoekmachines (SERP&rsquo;s). Dit pictogram hoort bij de URL van je site, zodat gebruikers de webpagina snel kunnen herkennen.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab07a7a69d48\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab07a7a69d48\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"634\" height=\"164\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-38.png\/public\" alt=\"Wat is een WordPress favicon precies\" class=\"wp-image-1522\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-38.png\/w=634,fit=scale-down 634w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-38.png\/w=300,fit=scale-down 300w\" sizes=\"(max-width: 634px) 100vw, 634px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Deze afbeelding verschijnt ook op het beginscherm van de telefoon als app-pictogram wanneer gebruikers een bladwijzer naar je webpagina maken op hun apparaat. Een duidelijk favicon zorgt er niet alleen voor dat je site er professioneler uitziet, maar helpt ook bij <strong>het opbouwen van naamsbekendheid.<\/strong><\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-hoe-maak-je-een-favicon-afbeelding\"><strong>Hoe maak je een favicon afbeelding<\/strong><\/h2><p class=\"wp-block-paragraph\">Om een WordPress favicon te maken kun je een grafisch ontwerp programma gebruiken of een online tool zoals <a href=\"https:\/\/realfavicongenerator.net\/\" target=\"_blank\" rel=\"noopener\">Real Favicon Generator<\/a>. Je keuze hangt af van je ervaringsniveau met visuele ontwerpconcepten en je vermogen om door deze tools te navigeren.<\/p><p class=\"wp-block-paragraph\">Overweeg dus het volgende:<\/p><ul class=\"wp-block-list\">\n<li><strong>Resolutie<\/strong>. Aangezien je pictogram alleen op SERP&rsquo;s en browsertabbladen verschijnt, is een afbeelding met een te hoge resolutie misschien niet nodig. De ideale WordPress favicon grootte is<strong> <\/strong><a href=\"https:\/\/mailchimp.com\/resources\/favicon-size\/\" target=\"_blank\" rel=\"noopener\"><strong>512 x 512 pixels<\/strong><\/a>.<\/li>\n\n\n\n<li><strong>Beeldverhouding<\/strong>. De favicon op je WordPress site moet goed worden weergegeven in een <strong>1:1 <\/strong>beeldverhouding. Anders kan de afbeelding worden bijgesneden of vervormd, waardoor het uiterlijk van de webpagina wordt aangetast.<\/li>\n\n\n\n<li><strong>Kleurenpalet<\/strong>. Als je een transparante achtergrond gebruikt, zal je favicon meer opvallen, vooral als je witte elementen of pictogrammen gebruikt. Vergeet niet om hetzelfde kleurenpalet als je merk te gebruiken om een consistente site-identiteit te behouden.<\/li>\n\n\n\n<li><strong>Bestandsformaat<\/strong>. PNG-formaat is nodig als het favicon bestand van je WordPress site een transparante achtergrond bevat. Anders kun je extensies zoals ICO, JPEG of GIF gebruiken die WordPress ondersteunt.<\/li>\n\n\n\n<li><strong>Vereisten voor zoekmachines<\/strong>. Het favicon van je WordPress website moet voldoen aan <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/favicon-in-search\" target=\"_blank\" rel=\"noopener\"><strong>de favicon richtlijnen van Google<\/strong><\/a> om correct te worden weergegeven op SERP&rsquo;s.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">De stappen om WordPress favicons te maken vari&euml;ren sterk afhankelijk van je grafische software en de gewenste afbeelding. Als je een eenvoudigere oplossing wilt, gebruik dan<a href=\"\/nl\/logo-maken\"> <strong>Hostinger AI Logo Generator<\/strong><\/a> om de afbeelding gratis te genereren!<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Pro tip                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> We raden aan om je WordPress favicon niet te vaak te veranderen, omdat het een belangrijk onderdeel is van de identiteit van je site. Veelvuldige wijzigingen kunnen verhinderen dat bezoekers een sterke merkassociatie vormen.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-manieren-om-een-favicon-aan-wordpress-toe-te-voegen\"><strong>Manieren om een favicon aan WordPress toe te voegen<\/strong><\/h2><p class=\"wp-block-paragraph\">In dit hoofdstuk leer je vier veelgebruikte manieren om een eigen favicon aan je WordPress website toe te voegen. Omdat ze hetzelfde resultaat hebben, kun je er een kiezen op basis van je voorkeuren en behoeften.<\/p><h3 class=\"wp-block-heading h-t-title-3\" id=\"h-1-gebruik-de-gutenberg-blok-editor\"><strong>1. Gebruik de Gutenberg blok editor<\/strong><\/h3><p class=\"wp-block-paragraph\">De eenvoudigste manier om een favicon aan je WordPress site toe te voegen is door de <strong>Gutenberg editor<\/strong> te gebruiken. Merk op dat deze functie alleen beschikbaar is voor<strong> blokthema&rsquo;s<\/strong> en <strong>WordPress 5.9 <\/strong>of recente releases.<\/p><p class=\"wp-block-paragraph\">Hier lees je hoe je het moet doen:<\/p><ul class=\"wp-block-list\">\n<li>Log in op je <strong>WordPress dashboard<\/strong> &rarr; <strong>Uiterlijk<\/strong> &rarr; <strong>Editor<\/strong>.<\/li>\n\n\n\n<li>Beweeg de muis over het gebied waar je het pictogram wilt plaatsen en klik op het <strong>plus<\/strong> (<strong>+<\/strong>) pictogram. Je kunt het overal plaatsen, maar wij raden een van de hoeken van de header aan.<\/li>\n\n\n\n<li>Zoek en selecteer het blok <strong>Site Logo <\/strong>.<\/li>\n\n\n\n<li>Beweeg de muis over het blok en klik op het pictogram<strong> Uploaden.<\/strong><\/li>\n\n\n\n<li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab07a7a6ae60\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab07a7a6ae60\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"262\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-39.png\/public\" alt=\"Gebruik je mediabibliotheek voor de WordPress favicon\n\" class=\"wp-image-1524\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-39.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-39.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-39.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li>Upload je favicon-bestand of selecteer er een uit je WordPress <strong>Mediabibliotheek<\/strong>. Klik op <strong>Selecteren <\/strong>om te bevestigen.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab07a7a6b647\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab07a7a6b647\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"474\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-40.png\/public\" alt=\"WordPress favicon uploaden op je website\n\" class=\"wp-image-1526\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-40.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-40.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-40.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li>Klik op het favicon en navigeer naar de sectie <strong>blokinstellingen<\/strong> in de rechter zijbalk. Als je de optie niet ziet, klik dan op de knop <strong>Instellingen<\/strong> rechtsboven in je scherm.<\/li>\n\n\n\n<li>Schakel in de zijbalk de functie<strong> Als sitepictogram gebruiken<\/strong> in.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab07a7a6bdb2\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab07a7a6bdb2\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"418\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-41.png\/public\" alt=\"Hoe een site icon instellen op WordPress\n\" class=\"wp-image-1527\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-41.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-41.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-41.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li>Klik rechtsboven op <strong>Opslaan <\/strong>om de wijzigingen toe te passen.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Wanneer je je website bezoekt, zou je het nieuwe favicon moeten zien in plaats van het standaard WordPress logo.<\/p><h3 class=\"wp-block-heading h-t-title-3\" id=\"h-2-toegang-en-configuratie-via-de-wordpress-customizer\"><strong>2. Toegang en configuratie via de WordPress Customizer<\/strong><\/h3><p class=\"wp-block-paragraph\">Gebruikers van klassieke thema&rsquo;s kunnen een favicon toevoegen met de functie WordPress <strong>Customizer<\/strong>. Deze methode is alleen mogelijk als je<strong> WordPress 4.3<\/strong> of hoger gebruikt. Zo doe je dit::<\/p><ul class=\"wp-block-list\">\n<li>Ga vanuit je WordPress dashboard naar <strong>Uiterlijk <\/strong>&rarr; <strong>Customizer.<\/strong> Als je de optie niet ziet, voeg dan <strong>wp-admin\/customize.php<\/strong> toe aan je website-URL om het handmatig te openen.<\/li>\n\n\n\n<li>Navigeer naar de <strong>linker zijbalk<\/strong> &rarr; <strong>Site-identiteit<\/strong>. Klik op de knop <strong>Selecteer<\/strong> <strong>site-icoon <\/strong>.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab07a7a6c5ca\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab07a7a6c5ca\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"415\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-42.png\/public\" alt=\"Afbeelding uploaden en bijsnijden op WordPress site\n\" class=\"wp-image-1528\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-42.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-42.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-42.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li>Upload je afbeelding of kies een afbeelding uit de <strong>mediabibliotheek<\/strong>. Druk op <strong>Selecteren<\/strong> om te bevestigen.<\/li>\n\n\n\n<li>Pas de grootte van de favicon aan aan je wensen en klik op <strong>Afbeelding bijsnijden<\/strong>. Als je de standaardinstellingen wilt gebruiken, selecteer je <strong>Bijsnijden overslaan<\/strong>.<\/li>\n\n\n\n<li>Nu zou je een voorbeeld van je website favicon moeten zien in de sectie <strong>Site Icon <\/strong>van de zijbalk. Klik op <strong>Publiceren<\/strong> om de wijzigingen op te slaan.<\/li>\n<\/ul><h3 class=\"wp-block-heading h-t-title-3\" id=\"h-3-realfavicongenerator-plugin-gebruiken\"><strong>3. RealFaviconGenerator-plugin gebruiken<\/strong><\/h3><p class=\"wp-block-paragraph\">Als je meer aanpassingsmogelijkheden en previews wilt, gebruik dan een plugin van derden om een favicon in WordPress in te stellen. Er zijn verschillende opties, maar wij raden <a href=\"https:\/\/wordpress.org\/plugins\/favicon-by-realfavicongenerator\/\" target=\"_blank\" rel=\"noopener\">Favicon by RealFaviconGenerator<\/a> aan omdat dit de meest gebruikte optie is.<\/p><p class=\"wp-block-paragraph\">Na het installeren en activeren van de plugin, volg je deze stappen om een nieuwe favicon te maken en toe te voegen:<\/p><ul class=\"wp-block-list\">\n<li>Navigeer vanuit je WordPress admin dashboard naar <strong>Uiterlijk<\/strong> &rarr; <strong>Favicon<\/strong>.<\/li>\n\n\n\n<li>Klik<strong> <\/strong>op<strong> Selecteren in de Mediabibliotheek <\/strong>en upload een nieuwe afbeelding of selecteer een bestaande afbeelding in je WordPress-bibliotheek.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab07a7a6d02c\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab07a7a6d02c\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"310\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-43.png\/public\" alt=\"Favicon generen voor WordPress\n\" class=\"wp-image-1529\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-43.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-43.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-43.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li>Klik op <strong>Generate favicon<\/strong>, en de plugin zal je doorverwijzen naar een aparte pagina.<\/li>\n\n\n\n<li>Als je de standaardafbeelding wilt behouden, selecteer dan de optie<strong> De originele afbeelding gebruiken <\/strong>zoals hij is. Pas anders instellingen aan zoals de achtergrondkleur, straal en afbeeldingsgrootte.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab07a7a6d871\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab07a7a6d871\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"141\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-44.png\/public\" alt=\"Kleuren van een favicon genereren aanpassen met Hostinger\n\" class=\"wp-image-1530\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-44.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-44.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-44.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li>Scroll naar beneden naar de <strong>Favicon Generator Opties<\/strong> en klik op <strong>Genereer je Favicons en HTML-code<\/strong> om te bevestigen.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Dat was het! Je wordt teruggeleid naar het <strong>Favicon-menu<\/strong> in het WordPress-dashboard. Klik op de knop<strong> Controleer je favicon<\/strong> om te controleren of het pictogram van je site goed werkt. Om de huidige te vervangen, herhaal je gewoon de bovenstaande stappen.<\/p><p class=\"wp-block-paragraph\">Onthoud dat deze plugin actief moet blijven om de favicon weer te geven. Als je de plugin deactiveert of verwijdert, wordt je websitepictogram niet meer weergegeven.<\/p><p class=\"wp-block-paragraph\">Update de plugin regelmatig om veiligheidsrisico&rsquo;s en bugs te vermijden. Om deze taak te vereenvoudigen, kunnen<a href=\"\/nl\/wordpress-hosting\"> <strong>Hostinger managed WordPress hosting<\/strong><\/a> gebruikers de auto-update functie in <strong>hPanel<\/strong> inschakelen.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/nl\/wordpress-hosting\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-160\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h3 class=\"wp-block-heading h-t-title-3\" id=\"h-4-thema-bestanden-handmatig-bewerken\"><strong>4. Thema bestanden handmatig bewerken<\/strong><\/h3><p class=\"wp-block-paragraph\">Je kunt een favicon toevoegen door de afbeelding handmatig te uploaden naar de WordPress hoofdmap en je themabestand te bewerken. Omdat deze methode een beetje ingewikkeld kan zijn, raden we het aan voor ontwikkelaars of mensen met ervaring met coderen.<\/p><p>\n\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>Belangrijk!<\/strong> Idealiter zou je code snippets moeten controleren in een WordPress staging omgeving voordat je ze toevoegt aan de live site. Deze stap zorgt ervoor dat de nieuwe toevoegingen geen potenti&euml;le ernstige fouten veroorzaken.\n            <\/p><\/div>\n\n\n\n<\/p><p class=\"wp-block-paragraph\">Voordat je dit doet, moet je <strong>een child theme maken en activeren<\/strong> om ervoor te zorgen dat je favicon code intact blijft na een update. Volg dan deze stappen:<\/p><ul class=\"wp-block-list\">\n<li>Open de <strong>Real Favicon Generator<\/strong> website, klik op <strong>Select your Favicon image<\/strong>, en upload het favicon-bestand van je computer.<\/li>\n\n\n\n<li>Scroll naar het gedeelte<strong> Options for the favicongenerator <\/strong>en klik op het tabblad <strong>Path<\/strong>. Kies waar je de favicon-afbeelding wilt plaatsen. In het ideale geval kies je de <strong>root <\/strong>directory.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab07a7a6efe2\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab07a7a6efe2\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"281\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-45.png\/public\" alt=\"WordPress favicon opties op Hostinger\n\" class=\"wp-image-1533\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-45.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-45.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-45.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li>Klik op <strong>Generate your Favicons and HTML-code<\/strong>.<\/li>\n\n\n\n<li>Je wordt doorgestuurd naar de pagina met de installatiehandleiding. Klik op de knop <strong>Favicon-package<\/strong> om de favicon-bestanden te downloaden.<\/li>\n\n\n\n<li>Kopieer het codefragment en bewaar het veilig, bijvoorbeeld in een TXT-bestand. Of houd dit tabblad open omdat we het later nodig hebben.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab07a7a6f94e\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab07a7a6f94e\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"387\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-46.png\/public\" alt=\"Een favicon package installeren met HTML-code\n\" class=\"wp-image-1534\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-46.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-46.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-46.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Nu de bestanden en code klaar zijn, kun je ze toevoegen aan je WordPress site. Zo doe je dat:<\/p><ul class=\"wp-block-list\">\n<li>Ga naar de <strong>public_html <\/strong>hoofdmap van je WordPress website met een <strong>File Transfer Protocol<\/strong> (FTP) client zoals<strong> FileZilla <\/strong>of de <strong>bestandsbeheerder<\/strong> van je hostingprovider.<\/li>\n\n\n\n<li>Upload en pak het gedownloade archief uit in de<strong> public_html<\/strong> directory. Onthoud dat <strong>public_html<\/strong> alleen de favicon-bestanden moet bevatten, niet de map.<\/li>\n\n\n\n<li>Voer de volgende URL in je webbrowser in om te bevestigen dat WordPress je favicon kan lezen. Vervang <strong>domain.tld<\/strong> door je echte domeinnaam:<\/li>\n<\/ul><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">domain.tld\/favicon.ico<\/pre><ul class=\"wp-block-list\">\n<li>Open je WordPress dashboard en navigeer naar <strong>Extra <\/strong>&rarr; <strong>Theme File<\/strong> <strong>Editor<\/strong>.<\/li>\n\n\n\n<li>Selecteer <strong>header.php<\/strong> in het menu <strong>Themabestanden<\/strong> aan de rechterkant. Als je thema dat niet heeft, bewerk dan het bestand <strong>functions.php<\/strong>.<\/li>\n\n\n\n<li>Voeg de HTML-code van Real Favicon Generator toe onderaan je bestand na de tag ?&gt;. In ons geval ziet het fragment er zo uit:<\/li>\n<\/ul><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\/nl\/apple-touch-icon.png\"&gt;\n\n&lt;link rel=\"icon\" type=\"image\/png\" sizes=\"32x32\" href=\"\/nl\/favicon-32x32.png\"&gt;\n\n&lt;link rel=\"icon\" type=\"image\/png\" sizes=\"16x16\" href=\"\/nl\/favicon-16x16.png\"&gt;\n\n&lt;link rel=\"manifest\" href=\"\/nl\/site.webmanifest\"&gt;\n\n&lt;link rel=\"mask-icon\" href=\"\/nl\/safari-pinned-tab.svg\" color=\"#5bbad5\"&gt;\n\n&lt;meta name=\"msapplication-TileColor\" content=\"#da532c\"&gt;\n\n&lt;meta name=\"theme-color\" content=\"#ffffff\"&gt;<\/pre><ul class=\"wp-block-list\">\n<li>Klik op <strong>Bestand bijwerken<\/strong> om de wijzigingen op te slaan.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Om de aangepaste favicon te verwijderen, verwijder je de code uit je themabestand en verwijder je de afbeeldingsbestanden uit de WordPress hoofdmap.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-conclusie\"><strong>Conclusie<\/strong><\/h2><p class=\"wp-block-paragraph\">Een WordPress favicon is een kleine afbeelding die op het browsertabblad van een gebruiker verschijnt wanneer deze je website bezoekt. Het helpt ze onderscheid te maken tussen tabbladen en bouwt merkherkenning op.<\/p><p class=\"wp-block-paragraph\">Je kan een favicon maken met grafische ontwerpsoftware of een webtool zoals<strong> Real Favicon Generator.<\/strong> Onthoud dat de afbeelding vierkant moet zijn, ten minste <strong>512 x 512 pixels<\/strong>, en moet voldoen aan de richtlijnen voor zoekmachines.<\/p><p class=\"wp-block-paragraph\">De gemakkelijkste manier om een favicon aan je website toe te voegen is door het blok<strong> met websitepictogrammen<\/strong> in de Gutenberg-editor te gebruiken. Als je klassieke thema&rsquo;s gebruikt, gebruik dan de <strong>WordPress Customizer<\/strong> functie in het <strong>Appearance <\/strong>menu.<\/p><p class=\"wp-block-paragraph\">Je kunt ook een plugin zoals <strong>Real Favicon Generator<\/strong> gebruiken en de afbeelding uploaden via de <strong>Appearance<\/strong> instelling. Ontwikkelaars kunnen dit ook handmatig doen door het pictogram te uploaden naar de WordPress root directory en HTML-code toe te voegen aan het<strong> PHP-bestand<\/strong> van het thema.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-wordpress-favicon-faq\"><strong>WordPress favicon FAQ<\/strong><\/h2><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-694402295d3ce\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Hoe verwijder je de standaard WordPress favicon?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Hoewel je de standaard WordPress favicon niet kunt verwijderen, kun je deze wel vervangen door een andere afbeelding. Je kunt dit doen met behulp van de ingebouwde site editor, thema customizer, een plugin of het <strong>header.php<\/strong> bestand. Als je het nieuwe pictogram verwijdert, verschijnt het standaard WordPress favicon weer.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694402295d3d2\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Hoe kan ik de favicon transparant maken in WordPress?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Om een transparante WordPress favicon achtergrond te maken, sla je de afbeelding op in een extensie die transparantie ondersteunt, zoals <strong>PNG<\/strong>. Als je icoon in een ander formaat is, moet je de achtergrond verwijderen met grafische ontwerpsoftware en het als een nieuw bestand opslaan.&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694402295d3d3\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Wat is het doel van een favicon?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>WordPress favicon helpt gebruikers onderscheid te maken tussen websites wanneer ze meerdere tabbladen openen in hun webbrowsers. Het verhoogt ook de zichtbaarheid op de resultatenpagina&rsquo;s van zoekmachines en bouwt merkherkenning op.&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694402295d3d4\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Wat is het verschil tussen een favicon en een site icoon in WordPress?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Een favicon is een kleine afbeelding op de browsertabbladen van gebruikers naast de titel van je website. Een site icoon is meestal groter en staat op meerdere plaatsen op je webpagina. Het is een meer gedetailleerde weergave van je merkidentiteit.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Een favicon is een kleine afbeelding die in het tabblad van de webbrowser wordt weergegeven wanneer een gebruiker je WordPress website opent. Deze favicon helpt gebruikers om je site snel te herkennen als er meerdere tabbladen geopend zijn, in het bijzonder als de titel van je site niet zichtbaar is. Deze tutorial legt uit wat [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/nl\/tutorials\/wordpress-favicon\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":441,"featured_media":1518,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"WordPress-favicon toevoegen: 4 eenvoudige methoden","rank_math_description":"Een favicon is een klein pictogram in het browsertabblad naast je sitetitel. Leer hoe je er eenvoudig een toevoegt.","rank_math_focus_keyword":"wordpress favicon","footnotes":""},"categories":[134,116],"tags":[],"class_list":["post-1517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-personalisatie-en-ontwerp","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-favicon","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-adicionar-favicon-no-site\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/favicon-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-favicon-wordpress\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/wordpress-favicon\/","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/favicon-wordpress\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-favicon","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-favicon","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-favicon","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-favicon","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-favicon\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-adicionar-favicon-no-site\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts\/1517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/users\/441"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/comments?post=1517"}],"version-history":[{"count":10,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts\/1517\/revisions"}],"predecessor-version":[{"id":5731,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts\/1517\/revisions\/5731"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/media\/1518"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/media?parent=1517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/categories?post=1517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/tags?post=1517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}