Hoe Maak Je Een Aangepaste Favicon in WordPress

Of je nu een podcast website maakt of een persoonlijke blog, het is een uitdaging om het memorabel en gebruiksvriendelijk te maken. Terwijl je je website-instellingen configureert, is het essentieel om je merkidentiteit vast te stellen en te beginnen met het opbouwen van een solide reputatie.

Een eenvoudige manier om een professionele online aanwezigheid te creëren is door een aangepast favicon te ontwerpen. Wanneer je jouw logo toevoegt aan browsertabbladen en zoekresultaten, kun je de merkherkenning en Click-Through Rates (CTR) verhogen.

In deze post geven we je een overzicht van favicons en waarom je er een zou moeten toevoegen aan je WordPress-website. Vervolgens laten we zien hoe je een aangepaste favicon kunt maken. Laten we beginnen!

Een Introductie Tot Favicons

Een favicon, of ‘favoriete icoon’, is een 16×16 pixel afbeelding die helpt om de inhoud van je website te merken. Het is gecreëerd in 1999 om te helpen onderscheiden tussen gebladwijzerde webpagina’s.

Momenteel kun je favicons zien bovenaan een browsertabblad, boven de adresbalk. Hier zullen bezoekers een klein merkicoon zien:

Als een website geen aangewezen favicon heeft, zien gebruikers in plaats daarvan een generiek browsericoon. Daarom gebruiken veel website-eigenaren favicons om hun inhoud herkenbaarder te maken.

Je kunt favicons ook zien in bladwijzers, je browsergeschiedenis, of tussen Google-zoekresultaten. Vaak laat dit icoon gebruikers zien dat ze op het punt staan om op een geloofwaardige en bekende bron te klikken.

Geweldig. Je bent helemaal bijgepraat over favicons. Nu laten we je zien hoe je er een kunt maken.

Hoe Maak Je Een Aangepaste WordPress Favicon (4 Methoden)

Om te beginnen met het maken van je eerste favicon, moet je het afbeelding ontwerpen die je gaat gebruiken. Voor dit proces raden we het gebruik van Canva aan:

Canva is een gebruiksvriendelijke beeldbewerkingssoftware die een logo vanaf nul kan maken. Je kunt ook bladeren door de logosjablonen.

Welke optie je ook kiest, zorg ervoor dat je een vierkantige afbeelding ontwerpt. Favicons worden doorgaans weergegeven op 16×16 pixels, maar WordPress vereist een hoogte en breedte van ten minste 512px.

Nadat je jouw logo als een favicon hebt ontworpen, is het tijd om het aan je website toe te voegen! Hier zijn enkele van de beste methoden.

1. Voeg Een Favicon Toe Met De WordPress Customizer 

Sinds WordPress 4.3 kun je de functie Site Icon gebruiken om een aangepaste favicon te maken. Dit is een van de eenvoudigste manieren om een favicon te uploaden, omdat je geen favicon.ico-bestand hoeft te maken of je sjabloonbestand hoeft aan te passen.

Vind de afbeelding die je wilt gebruiken als je favicon. Ga dan naar Appearance > Customize in je WordPress-dashboard:

Dit opent de WordPress Customizer. Navigeer vervolgens naar Instellingen > Site-identiteit:

Hier zie je een sectie met het label Sitepictogram. Klik op Selecteer sitepictogram en upload je favicon-afbeelding:

Snijd de afbeelding bij indien nodig. Aan de rechterkant kun je een voorbeeld van de favicon zien:

Nadat je klaar bent, klik op Publiceren.

Update Voor WordPress 6.5+

Vanaf WordPress 6.5 is er een gloednieuwe (en makkelijker dan ooit) manier om Favicons toe te voegen in WordPress. Navigeer simpelweg naar het WordPress Dashboard, ga met je muis over Instellingen en klik op Algemeen.

Vanaf daar zie je bovenaan een instelling voor Site-icoon. Klik gewoon op het vak Kies een site-icoon om je eigen favicon te uploaden.

Aanbevolen grootte: Vierkante beeldverhouding, minstens 512px x 512px.

2. Voeg Een Favicon Toe Met Een WordPress Page Builder

Veel populaire paginabouwers kunnen op een vergelijkbare manier een aangepaste favicon toevoegen. Bijvoorbeeld, Elementor heeft een Custom Icons-functie in zijn Global Settings.

Allereerst moet je je aanmelden voor Elementor Pro. Hiermee kun je een aangepaste favicon uploaden.

Open vervolgens een bericht of pagina met de Elementor-editor:

Ga naar Site-instellingen > Site-identiteit. Hier zie je de naam en beschrijving van je site. Er zullen ook opties zijn voor het uploaden van een site-logo en site-favicon:

Beweeg over het grijze vak onder Site Favicon en klik op Kies Afbeelding. Upload je favicon en selecteer Media invoegen:

Nadat je jouw favicon hebt geüpload, ga naar de onderkant van het scherm en klik op Update.

3. Installeer Een Favicon Plugin

Een van de eenvoudigste manieren om een favicon aan je website toe te voegen, is met een favicon plugin. Deze optie is mogelijk het beste voor mensen die geen toegang hebben tot de Customizer of een eenvoudigere optie dan coderen willen.

Voor dit proces raden we aan om Favicon Rotator te gebruiken. Deze gratis WordPress plugin stelt je in staat om binnen enkele minuten een favicon afbeelding toe te voegen:

Installeer en activeer de plugin. Navigeer nu naar Appearance > Favicon:

Je zult twee verschillende opties voor het maken van aangepaste pictogrammen opmerken. Browser Icon plaatst de favicon in browsertabbladen. Het Touch Icon zal favicons voor mobiele apparaten aanpassen:

Klik op Voeg Icoon Toe naast Browser Icoon. Upload je favicon afbeelding:

Als je de afbeelding moet bijsnijden, roteren of spiegelen, klik dan op Bewerk Afbeelding. Hier kun je de afmetingen en thumbnail-instellingen naar wens aanpassen:

Wanneer je klaar bent, selecteer Add Browser Icon. Klik daarna op Save Changes.

4. Handmatig Een Favicon Genereren

Als je website een oudere WordPress-versie of thema heeft, moet je mogelijk handmatig een favicon toevoegen met behulp van code. Deze methode kan ook voordelig zijn wanneer je het aantal third-party plugins op je site wilt beperken.

Eerst upload je je afbeeldingsbestand naar een tool zoals Real Favicon Generator. Met deze software kun je de aangepaste code voor je favicon genereren:

Begin door te klikken op Selecteer je Favicon-afbeelding. Nadat je je afbeeldingsbestand hebt geüpload, zal Real Favicon Generator een voorbeeld van je favicon maken:

Op deze pagina kun je het vakje aanvinken dat zegt Gebruik de originele afbeelding zoals deze is als je tevreden bent met hoe het eruitziet. Je kunt echter ook doorgaan met het bewerken van de afbeeldingsgrootte, achtergrondkleur en achtergrondradius naar behoefte.

Nadat je de afbeelding hebt aangepast, scrol je naar de onderkant van de pagina en klik je op Genereer je Favicons en HTML-code:

Dit laat je de code zien voor je favicon. Download het Favicon-pakket en kopieer de HTML:

Voordat je begint met het bewerken van je code, raden we aan om een back-up van je website te maken. Deze stap zorgt ervoor dat je geen belangrijke informatie verliest door programmeerfouten.

Open vervolgens je cPanel-dashboard. Hoewel elke hostingprovider zijn eigen dashboard heeft, moet je de Bestanden Uploaden-knop vinden.

Bij DreamHost bevindt deze knop zich in de linker benedenhoek:

Upload vervolgens je favicon-bestand. In sommige gevallen kunnen browsers hierdoor je favicon bijwerken zonder code toe te voegen. Je moet echter mogelijk je header.php bestand bijwerken.

Om dit te doen, open wp_content en klik op het bestand header.php. Kies vervolgens Bewerken:

Plak de favicon-code van de Favicon Generator. Vervolgens moet je mogelijk de cache van je browser leegmaken of je browser opnieuw starten om de nieuwe favicon op je website te zien.

Elementen Van Een Sterk Merk

Een goed logo kan de sleutel zijn om je bedrijf uniek en herkenbaar te maken. Wanneer je dit logo omzet in een favicon, kun je ervoor zorgen dat online bezoekers je merkgebonden inhoud herkennen.

Ter herinnering, hier zijn de beste methoden om een favicon aan je WordPress website toe te voegen:

1. Voeg een favicon toe met behulp van de WordPress Customizer.
2. Gebruik een pagina-bouwer zoals Elementor.
3. Installeer een favicon-plugin zoals Favicon Rotator.
4. Codeer handmatig een favicon.

Heb je hulp nodig bij het bouwen van je website vanaf nul? Bij DreamHost bieden we Professionele Diensten die maatwerk webdesign omvatten. Onze professionele ontwerpers kunnen je helpen een originele website te creëren, zodat je je geen zorgen hoeft te maken over kleine details zoals favicons!