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 icoon 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.
Favicon is ook zichtbaar in de zoekresultaten
Heb je al gezien dat er soms een icoon voor de website URL in de zoekresultaten te zien is? In de mobiele zoekresultaten is het al een tijd zichtbaar en het ziet er als volgt uit.
Sinds januari 2020 is het ook uitgerold voor de desktop zoekresultaten. Je hebt dus geen excuus meer om geen favicon te gebruiken op je website. Laten we er snel voor zorgen dat jij weet hoe je een favicon kunt instellen op je WordPress-website.
Video uitleg: Favicon instellen op je website
In onderstaande video kun je bekijken hoe je een favicon aan je WordPress website kunt toevoegen.
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 icoon 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 (jpg, png, etc.). Alleen de hele oude Internet Explorer versies, die mag ik hopen 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 icoon toevoegen via het WordPress beheerdersgedeelte.
Je kunt dit doen door naar Weergave → Customizer te gaan. Klik vervolgens op het tabblad Site-identiteit.
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.
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 iconen 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.
Veelgestelde vragen over favicons in WordPress
Het kan weleens voorkomen dat je een favicon hebt ingesteld op je WordPress-website, maar dat het niet getoond wordt. Je hebt dan te maken met een conflict. Vermoedelijk staat er een code in de head sectie van je website die dit probleem veroorzaakt. Dit kan in je thema zitten of door een plugin erin gekomen zijn. Je zou dus kunnen testen door plugins uit te schakelen of het dan wel zichtbaar wordt.
Een favicon en site icoon zorgen er allebei voor dat je in de browserbalk een website eenvoudig kan herkennen. Het voordeel van een site icoon in WordPress is echter dat deze een stuk groter is (512×512 pixels). Dit kan daarom ook perfect gebruikt worden als een bezoeker van je website je site toevoegt op een smartphone. Het originele favicon formaat van 16×16 pixels is hier te klein voor.
In theorie wel als je een favicon in de code toevoegt per pagina. Het is echter niet aan te raden. Je wil juist met een favicon zorgen voor herkenning. Het schiet dus niet op om op diverse pagina’s een andere favicon te gebruiken, want dan is het voor je bezoekers alleen maar onduidelijk.
30 reacties
Hi Maikel,
Heldere uitleg, maar helaas niet precies wat ik zoek. Ik heb mijn favicon zonder probleem zelf kunnen instellen, alleen zie ik deze niet terug in Google. Mijn site http://www.moodzly.com is nog maar net nieuw. Ik weet niet of het daaraan ligt.
Ik denk dat de site nu zo’n twee weken online staat. Ook de foto’s bij mijn blog en mijn rich snippets (reviews) worden niet op Google getoond. Ik weet dat Google zelf een beetje kiest welke gegevens er getoond worden en welke niet. Maar is het nu echt zo moeilijk om een foto van je blogpost of je favicon te laten weergeven in Google of doe ik iets verkeerd? Een beetje jammer, want mijn CTR percentage is hierdoor erg laag.
In ieder geval, bedankt voor het goede artikel. Ik ben er zeker van dat vele mensen hier heel veel aan hebben!
Hoi,
Ik heb al super veel aan je videos gehad en daardoor mijn eigen website kunnen bouwen. Nu vroeg ik me af, hoe kan het dat de favicon niet zichtbaar is, wanneer ik mijn website op google opzoek, er staat dan alleen aan wereldbolletjes links. Terwijl erbij andere sites wel een facivon staat. Kan ik dit oplossen?
Groet Cinthia
Het is maar net wanneer je het hebt toegevoegd. Zo te zien is op Google de 5 maart versie in de cache, dus wanneer je het daarna hebt toegevoegd, dan zal het de volgende keer als Google je website afstruint het er vanzelf bij komen te staan.
Hi,
Heb jij ook een idee hoe je de ‘website uitleg’ achter de Favicon kan aanpassen?
Welke uitleg? Ik snap niet echt wat je bedoeling is.
helaas hiermee lukt het niet. wordpress versie 6.3.1
ik kan niet op site identiteit komen . Ook het customizer ziet er anders uit
en in de ftp versie bij header zie ik dit bij header:
en weet ik niet wat ik ermee moet.
Het werkt wel gewoon nog in WordPress 6.3.1 en het ziet er nog steeds precies hetzelfde uit. Wellicht dat jouw thema invloed uitoefent dat de optie er niet bijstaat. Je zal dan bij de thema instellingen moeten kijken. Wat in je header.php staat is uit de reactie gefilterd door WordPress zelf. PHP code komt namelijk niet naar boven in de reacties.
Dank, Maikel! Helder en goed uitgelegd. Binnen 5 minuten gefikst! Het geeft zo’n andere uitstraling. Ik ontdek voor de kunstenaars onder ons een leuk extraatje met een favicon van je eigen werk. Mocht iemand je website op de bladwijzer opslaan, dan heeft diegene meteen een prachtig kunstwerk van je te pakken, in mijn geval een detail van de Witte Tara. Hoe het qua copywright zit, weet ik dan weer niet zo goed. Ik ga uit van creative commons licenties en vertrouw op de integriteit van mijn publiek.
Creatieve groet, Annette
Ps. Mijn Wordpress-versie noemt niet de naam Favicon maar ‘Site-pictogram’.
Fijn dat je er wat aan hebt gehad. Het heet ondertussen inderdaad site-pictogram, WordPress blijft veel dingen vaak hernoemen waardoor ik altijd weer artikelen kan blijven updaten ;-).
Dank voor de goede uitleg maar ik blijf met 1 (voor mij) onverklaarbaar iets zitten. De favicon wordt op de homepagina juist getoond maar niet op alle vervolgpagina’s. Heb je enig idee hoe dit (eenvoudig) kan worden opgelost?
Vr groet
Klaas
Ik zie op alle pagina’s een favicon. Wellicht de cache van je eigen browser.
Bedankt voor de duidelijke video! Ik heb Wordpress 5.7.2 maar heb onder Customizer geen ‘site identiteit’. Heb je een tip? Dank!
Het heet nog steeds zo in versie 5.7.2. Wellicht dat het thema waar je gebruik van maakt dit heeft aangepast, dat is eigenlijk de enige mogelijkheid, dus je kunt kijken bij je thema instellingen.
Top artikel Maikel!
Ik heb mijn favicon een tijdje geleden geupload. Deze wordt wel in het tabblad weergegeven, maar niet in de mobiele zoekresultaten (Android). Heb jij enig idee hoe dit valt op te lossen?
Met vriendelijke groet,
Melle van de Ven
Dat kan ik vanaf hier zo niet zeggen. Het hoort normaliter te werken als je de stappen uit dit artikel volgt.
Hoi Maikel,
Bedankt voor je uitleg. Ik had in Wordpress dacht ik al een nieuwe Favicon geplaatst onder Instellingen bij “All in one Favicon” en onder Weergave bij Theme Options en dan logo settings tig keer maar blijkbaar nog niet de juiste plek om het bovenaan de menubalk te krijgen. Met jouw handige uitleg heb ik het weer voor elkaar gekregen. Mijn dank is groot!
Vraag ik me alleen af waar die andere locaties voor zijn dus “All in one Favicon” en logo settings bij “Theme Options”?
groetjes,
Birgitta
Hoort eigenlijk ook voor hetzelfde te zijn lijkt mij. Wellicht dat het voor conflicten met elkaar zorgt. Het is tegenwoordig sowieso altijd het best om dit gewoon via WordPress zelf te doen (vroeger kon het alleen via het thema of plugins). Dan blijft dit hoe dan ook goed staan.
Hoi, ik heb een oude website omgezet naar een nieuwe, ivm met ander bedrijf. Nu blijft de favicon van mijn vorige bedrijf verschijnen, wanneer ik deze als bladwijzer wil vasthouden in Safari. Alles geprobeerd, gaat maar niet weg. Nieuwe favicon staat uiteraard goed ingesteld, geschiedenis, cookies etc verwijderd, maar niks helpt. Ik ben onderhand wanhopig geworden…. weet jij de oplossing?
Heeft vermoedelijk toch echt met je browser te maken en niet met de website. Er moet een goede refresh gedaan worden voor je favicon, zie: https://discussions.apple.com/thread/250501971
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.
Dank voor dit artikel, binnen een paar minuten aan de hand van jouw beschreven stappen de favicon toegevoegd. Super.
Geen dank, fijn om te horen dat het je gelukt is.
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..
Bij de WordPress.com versie is het inderdaad helaas niet mogelijk om plugins toe te voegen aan je website. Bij de WordPress.org heb je wel de mogelijkheid om plugins toe te voegen. Zie ook: het verschil tussen WordPress.com en WordPress.org.
Om een favicon op je WordPress.com website te krijgen moet je op een andere manier te werk gaan. Onderstaand artikel kan je hierbij verder helpen:
http://en.support.wordpress.com/avatars/blavatars/
Succes
Dank je, het werkt nu bij mij.
Geen fakepath op firefox, wel op chrome en ie.
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.
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