WordPress Favicon instellen op je website

Een favicon is een kleine afbeelding naast de website titel in een browser.

Het helpt bezoekers je website eenvoudig te herkennen wanneer er bijvoorbeeld meerdere tabbladen open staan.

Dit is ook de reden dat alle grote websites tegenwoordig een favicon hebben. Het is goed voor herkenning en de website usability.

Daarnaast wordt een favicon tegenwoordig ook gebruikt als site icon op smartphones, wanneer iemand je website als sneltoets op zijn of haar startscherm wilt hebben staan.

Een van de meest gemaakte WordPress fout is naar mijn mening het niet toevoegen van een favicon. In dit artikel laat ik je daarom zien hoe je een favicon aan je WordPress website kunt toevoegen.

Video uitleg: Favicon instellen op je website

In onderstaande video kun je bekijken hoe je een favicon aan je WordPress website kunt toevoegen.

Abonneer je op mijn YouTube kanaal

Lees hieronder verder indien je meer informatie wilt hebben of liever de uitleg in tekst leest.

Hoe maak je een Favicon?

Een favicon kun je maken met een programma als Adobe Photoshop, maar ook iets simpels als Microsoft Paint.

Vaak is een favicon het logo van de website of iets anders waarmee een website eenvoudig te herkennen is. Bekijk dus bij je eigen website of je het logo als favicon wilt gebruiken of iets anders, zolang het maar herkenbaar is dat het om jouw website gaat.

Het aanbevolen formaat van een favicon is tegenwoordig 512×512 pixels. Dit komt omdat het ook als site icon gebruikt wordt op smartphones. Let hier dus goed op bij het maken van je eigen favicon.

Wanneer je eenmaal je favicon hebt gemaakt kun je het opslaan in png, jpg of gif formaat.

Vroeger ging het toch anders?
Klopt, oorspronkelijk waren favicons altijd 16×16 pixels en werd het opgeslagen als een .ico bestand.

Ondertussen ondersteunen alle browsers favicons met een andere extensie. Alleen de hele oude Internet Explorer versies, die bijna niet meer gebruikt worden, herkennen deze nieuwe favicons niet.

Favicon instellen op je WordPress website

Sinds WordPress 4.3 kun je een favicon of site icon toevoegen via het WordPress beheerdersgedeelte.

Je kunt dit doen door naar “Weergave -> Customizer” te gaan. Klik vervolgens op het tabblad “Site-identiteit”.

WordPress site-identiteit favicon

Je komt nu bij het gedeelte in WordPress waar je de mogelijkheid hebt om een favicon te uploaden. Klik op “Afbeelding selecteren” om de favicon die je wilt gebruiken te uploaden.

Indien je afbeelding het juiste formaat bevat zal er niks gebeuren en kun je het gewoon opslaan. Wanneer je afbeelding te groot is zal je het kunnen bijsnijden.

In de preview zie je als het goed is nu al meteen de favicon verschijnen bovenaan in het tabblad van je browser.

WordPress favicon preview

Zoals je ziet maak ik gebruik van een favicon met een transparante achtergrond. WordPress zelf gaat hier niet altijd goed mee om, maar alle browsers en site icons op smartphones geven het wel goed weer.

Het enige wat je nu nog hoeft te doen is op “Opslaan & publiceren” te klikken.

WordPress favicon instellen via FTP

Een andere methode die je kunt gebruiken is om handmatig de favicon aan je website toe te voegen.

Upload je favicon in de rootfolder van je website met behulp van FTP. Nadat je dit gedaan hebt moet je de onderstaande code tussen <head> en </head> plaatsen in het header.php bestand van je WordPress thema. Let op, je moet natuurlijk wel webtalis.nl vervangen voor je eigen domeinnaam en het bestandsnaam goed noemen

<link title="Favicon" href="https://webtalis.nl/favicon.png" rel="shortcut icon" />

Gefeliciteerd, je website kan nu ook eenvoudig herkend worden in de tabbladen van je bezoekers dankzij je favicon.

11 reacties Voeg ook een reactie toe

  1. Ha Maikel,
    Dank voor je uitleg, alleen lijkt de eenvoudige optie via de plugin niet meer te doen. Ik krijg de melding dat deze al 2 jaar niet is bijgewerkt en dat het onverstandig is ´m te installeren. Is er nog een andere plugin voor dit soort acties of wordt het dan toch in de code klooien?

    • De plugin is ondertussen inderdaad helaas al een tijd niet geüpdatet, waardoor deze melding sinds afgelopen maand verschijnt. Hoewel de plugin al een tijd niet is bijgewerkt werkt het echter nog wel prima en wordt het op dit moment nog op meer dan 200.000 websites gebruikt (zie active installs op pluginpagina).

      Wanneer je liever toch een plugin hebt die minder lang niet bijgewerkt is kun je een plugin als Custom Favicon uitproberen.

      Een andere optie is inderdaad om de favicon in de code plaatsen.

  2. ziet er handig uit, helaas is er geen plug-in sectie meer op wordpress.
    Is er nog steeds een mogelijkheid om je favicon te wijzgen? Ik kan het nergens vinden..

  3. Maikel,

    Dank hiervoor! Dit had me zonder jouw filmpje veel tijd gekost.

    Nog een vraagje: heb jij geen ‘zoeken’ knop op je site? Die gebruik ik vaak op onbekende sites waar ik de weg niet zo goed ken. Maar… als je moet zoeken naar de zoeken-knop verdwaal je alsnog! 🙂
    Misschien komt het omdat ik op een Ipad kijk?

    Groeten,
    Nicky

    • Er is wel een zoekfunctie waar je gebruik van kunt maken. Op een laptop/desktop zal je de zoekfunctie direct rechtsboven in de sidebar zien staan.

      Omdat de website een responsive design heeft verplaatst de sidebar zich op tablets en smartphones naar de onderkant. De sidebar zal dan pas zichtbaar zijn na het artikel en de zoekfunctie dus ook.

  4. Het enige wat je dan nog hoeft te doen is bij “instellingen -> All in one Favicon” je favicon.ico bestand te uploaden bij de Frontend instellingen en vervolgens op wijzigingen opslaan te klikken.
    Hij wil hem niet openen. Er staat ‘fakepath’ en kom dan opnieuw in openen-scherm terecht. Heb hem wel als ico opgeslagen bij favicon.

    De andere optie in de header plaatsen is wat lastig voor een leek. Upload je favicon in de rootfolder van je website met behulp van FTP.
    Wat is een rootfolder van je website?

    Hopelijk lukt het hierna.

    Vriendelijke groet,

    Esther

    • Ik heb even gezocht op fakepath in Google en het lijkt erop dat sommige browsers (met name IE) een beveiligingsfunctie heeft dat ervoor zorgt dat de volledige locatie verborgen wordt gehouden voor javascript. Hierdoor wordt waarschijnlijk de fakepath veroorzaakt.

      Een optie is om het via een andere browser te proberen om te kijken of het dan wel lukt om je favicon te uploaden en het werkend te krijgen.

      De rootfolder van je website is de hoofdmap van je website waarin WordPress geïnstalleerd staat.

      Succes

Geef een reactie