Favicon & Open Graph SEO: toevoegen en optimaliseren

Een favicon toevoegen of herstellen en Open Graph optimaliseren voor SEO

Verschijnt er een standaardpictogram in het tabblad van uw browser? Of wordt bij het delen van uw website op social media de verkeerde afbeelding weergegeven?

Twee kleine onderdelen van een website worden bij SEO-optimalisatie regelmatig over het hoofd gezien: de favicon en de Open Graph-afbeelding.

Hoewel geen van beide op zichzelf een magische SEO-rankingfactor is, spelen ze wel een belangrijke rol in de technische configuratie, herkenbaarheid van uw merk en de manier waarop uw website online wordt weergegeven.

In deze uitgebreide handleiding leert u hoe u een favicon toevoegt, hoe u een favicon die niet wordt weergegeven kunt herstellen, hoe u vanuit één afbeelding verschillende favicon-formaten kunt maken en hoe u og:image correct instelt zodat uw pagina's goed worden weergegeven wanneer ze worden gedeeld via social media en berichtenapps.

Inhoudsopgave

Wat is een favicon?
Heeft een favicon invloed op SEO?
Hoe maakt u een favicon van een afbeelding?
Hoe maakt u verschillende favicon-formaten?
Hoe voegt u een favicon toe aan een HTML-website?
Hoe voegt u een favicon toe aan WordPress?
Hoe voegt u een favicon toe aan Shopify?
Waarom wordt mijn favicon niet weergegeven?
Wat is een Open Graph-afbeelding?
Hoe voegt u een og:image toe?
Wat is het juiste formaat voor een Open Graph-afbeelding?
Voorbeeld van volledige Open Graph-metatags
Waarom wordt de verkeerde afbeelding op social media weergegeven?
Favicon versus Open Graph-afbeelding
SEO-checklist
Veelgestelde vragen

Wat is een favicon?

Een favicon is het kleine pictogram dat bij een website hoort. U ziet het bijvoorbeeld in een browsertabblad, bij bladwijzers, in de browsergeschiedenis en bij bepaalde snelkoppelingen.

Google kan een favicon onder bepaalde omstandigheden ook naast een website in de zoekresultaten tonen.

De meeste bedrijven gebruiken een vereenvoudigde versie van hun logo, een merksymbool of een herkenbare letter als website favicon.

Omdat een favicon erg klein wordt weergegeven, is een eenvoudig en duidelijk ontwerp meestal beter dan een logo met veel kleine details of tekst.

Belangrijk: Google kan een favicon in de zoekresultaten tonen, maar zelfs wanneer u aan alle technische voorwaarden voldoet, is de weergave niet gegarandeerd.

Heeft een favicon invloed op SEO?

Hier is een belangrijk onderscheid nodig. Een favicon moet niet worden beschouwd als een directe Google-rankingfactor, zoals relevante content, kwalitatieve backlinks, technische toegankelijkheid of websiteprestaties.

Een favicon draagt echter wel bij aan de herkenbaarheid en professionele presentatie van uw website.

Vanuit het oogpunt van technische SEO en website-optimalisatie kunt u een favicon daarom het beste zien als onderdeel van de technische en visuele basis van uw website.

Vorm Vierkant, verhouding 1:1 Minimale grootte voor Google 8 × 8 pixels Aanbevolen grootte Groter dan 48 × 48 pixels URL Stabiel en openbaar toegankelijk Crawlbaarheid Toegankelijk voor zoekmachines Ontwerp Eenvoudig, herkenbaar en passend bij het merk

Hoe maakt u een favicon van een afbeelding?

Hebt u al een logo? Dan hoeft u meestal geen nieuw ontwerp te maken. U kunt bijvoorbeeld een bestaande PNG-afbeelding of een geschikt logo gebruiken en dit omzetten naar de verschillende favicon-formaten.

Gebruik bij voorkeur een vierkante afbeelding

Een vierkante afbeelding werkt het beste omdat favicons in kleine vierkante ruimtes worden weergegeven.

Een horizontaal bedrijfslogo kan er op uw website uitstekend uitzien, maar vrijwel onleesbaar worden wanneer het wordt verkleind naar bijvoorbeeld 16 × 16 pixels.

Goed favicon-ontwerp

Gebruik een eenvoudig logo-element, symbool, letter of herkenbaar onderdeel van uw huisstijl.

Minder geschikt

Vermijd kleine tekst, ingewikkelde illustraties en lange bedrijfsnamen die op klein formaat niet meer leesbaar zijn.

Is uw hoofdlogo erg breed? Maak dan bij voorkeur een vereenvoudigde favicon-versie van uw logo in plaats van het volledige logo simpelweg te verkleinen.

Hoe maakt u verschillende favicon-formaten?

U hoeft uw logo niet handmatig naar alle mogelijke favicon-formaten om te zetten. Een online favicon generator of favicon-converter kan dit proces grotendeels automatiseren.

Een praktische optie is favicon.io .

Met de favicon converter van favicon.io kunt u een bestaande afbeelding uploaden en verschillende bestanden laten genereren voor websites, browsers en apparaten.

Stap 1: bereid uw logo voor

Kies uw logo of merksymbool.
Gebruik indien mogelijk een vierkante afbeelding.
Begin met een afbeelding met voldoende resolutie.
Verwijder kleine tekst die op klein formaat onleesbaar wordt.
Controleer of het symbool herkenbaar blijft wanneer het wordt verkleind.

Stap 2: upload uw afbeelding

Open de favicon-converter en upload uw logo. De tool verwerkt de bronafbeelding en genereert de benodigde favicon-bestanden.

Stap 3: download de gegenereerde bestanden

Download vervolgens het gegenereerde pakket. Afhankelijk van de gekozen opties kunnen hierin verschillende PNG-formaten, een ICO-bestand, Apple-iconen, Android-iconen en een webmanifest aanwezig zijn.

favicon.ico Klassieke browserfavicon favicon-16x16.png Klein browserpictogram favicon-32x32.png Browsertabbladen en schermen met hoge pixeldichtheid apple-touch-icon.png Snelkoppelingen op Apple-apparaten android-chrome-192x192.png Android en webapplicaties android-chrome-512x512.png Grotere Android- en PWA-weergave site.webmanifest Metadata voor webapplicaties

U hebt niet noodzakelijk elk gegenereerd bestand nodig. De juiste configuratie hangt af van het type website dat u beheert en of u bijvoorbeeld een gewone website, webshop of Progressive Web App bouwt.

Hoe voegt u een favicon toe aan een HTML-website?

Bij een traditionele HTML-website worden favicon-verwijzingen normaal gesproken in de <head> van de HTML-pagina geplaatst.

<head> <meta charset="UTF-8"> <title>Mijn website</title> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> </head>

Gebruikt u een traditioneel ICO-bestand, dan kan een eenvoudige implementatie er bijvoorbeeld als volgt uitzien:

Controleer altijd of het pad naar het bestand overeenkomt met de werkelijke locatie van uw favicon op de server.

Hoe voegt u een favicon toe aan WordPress?

Gebruikt u WordPress, dan hoeft u normaal gesproken niet rechtstreeks de HTML-code van uw thema aan te passen om een favicon toe te voegen.

WordPress beschikt over ingebouwde mogelijkheden om het sitepictogram of de website-identiteit te configureren. De exacte locatie kan verschillen afhankelijk van uw WordPress-versie en thema.

Ook een block theme, custom theme of page builder kan invloed hebben op waar deze instelling beschikbaar is.

SEO-tip: Installeer niet meerdere plugins of systemen die allemaal hun eigen rel="icon"-tags toevoegen. Controleer eerst de broncode van uw pagina voordat u extra favicon-code toevoegt.

Hoe voegt u een favicon toe aan Shopify?

Bij Shopify wordt de favicon meestal ingesteld via de instellingen van uw thema.

Open de thema-editor en zoek naar instellingen voor uw favicon, sitepictogram of merkidentiteit.

Wilt u de Shopify-thema-code rechtstreeks aanpassen, houd er dan rekening mee dat thema-updates en het wisselen van thema invloed kunnen hebben op aangepaste wijzigingen.

Test uw webshop daarom altijd na een technische wijziging en controleer in de gegenereerde HTML of de favicon daadwerkelijk aanwezig is.

Waarom wordt mijn favicon niet weergegeven?

Een favicon kan correct zijn aangemaakt en toch niet verschijnen. Dit is een veelvoorkomend probleem bij favicon troubleshooting.

1. Controleer het bestandspad

Controleer of de URL in uw HTML naar de juiste locatie van het favicon-bestand verwijst.

Bevindt het bestand zich in werkelijkheid op /favicon.ico, dan is bovenstaande verwijzing onjuist.

2. Test de favicon-URL rechtstreeks

Kopieer de URL van uw favicon en open deze rechtstreeks in uw browser.

https://www.example.com/favicon.ico

Geeft de server een 404-fout, een verkeerde redirect of een andere foutmelding? Los dit probleem dan eerst op.

3. Wis de browsercache

Favicons kunnen sterk worden gecachet door browsers. Wanneer u onlangs een favicon hebt vervangen, test dan bijvoorbeeld in een privévenster of wis de browsercache.

4. Google heeft de favicon nog niet bijgewerkt

De favicon in uw browser en de favicon die Google Search eventueel toont, worden niet noodzakelijk op hetzelfde moment bijgewerkt.

Google moet de relevante pagina's opnieuw crawlen en de nieuwe informatie verwerken. Daarom kan het even duren voordat een gewijzigde favicon in Google zichtbaar wordt.

5. Controleer de crawlbaarheid

Zoekmachines moeten toegang hebben tot de relevante bestanden. Controleer daarom uw robots.txt, serverinstellingen en eventuele beveiligingsregels wanneer zoekmachines de favicon niet kunnen ophalen.

6. Controleer op dubbele favicon-verwijzingen

Zoek in de broncode naar:

rel="icon"

Als meerdere plugins, thema's of scripts verschillende favicons injecteren, bepaal dan welke configuratie moet worden gebruikt en verwijder onnodige duplicaten.

Wat is een Open Graph-afbeelding?

Open Graph is een protocol voor metadata waarmee u informatie kunt meegeven over hoe een webpagina moet worden weergegeven wanneer de URL wordt gedeeld.

Voorbeelden van Open Graph-metatags zijn:

og:title
og:description
og:url
og:image
og:type

Het doel is eenvoudig: u geeft compatibele platforms informatie over de titel, beschrijving en afbeelding die bij de gedeelde URL horen.

Zonder Open Graph: een platform kan zelf een afbeelding uit uw pagina kiezen die u niet als hoofdafbeelding bedoeld had.

Met Open Graph: u kunt expliciet aangeven welke titel, beschrijving en afbeelding bij de gedeelde pagina horen.

Hoe voegt u een og:image toe aan uw website?

Open Graph-metadata wordt in de <head> van uw HTML-pagina geplaatst.

Een eenvoudige configuratie ziet er als volgt uit:

Let vooral op de og:image URL. De afbeelding moet openbaar toegankelijk zijn zodat het platform dat de linkpreview maakt de afbeelding kan ophalen.

Een absolute URL is daarom een veilige keuze:

https://www.example.com/images/og-image.jpg

In plaats van alleen een relatief pad:

/images/og-image.jpg

Wat is het juiste formaat voor een Open Graph-afbeelding?

Een veelgebruikt formaat voor een Open Graph-afbeelding is 1200 × 630 pixels.

Dit geeft een verhouding van ongeveer 1,91:1 en werkt goed voor veel situaties waarin een URL op social media wordt gedeeld.

Afbeeldingsformaat 1200 × 630 px Beeldverhouding Ongeveer 1,91:1 Bestandsformaat JPG of PNG afhankelijk van het ontwerp URL Openbare HTTPS-URL Tekst Groot genoeg om op mobiele apparaten leesbaar te blijven

Houd er rekening mee dat verschillende socialmediaplatforms hun eigen weergave- en uitsnijdingsregels kunnen gebruiken. Plaats belangrijke tekst en logo's daarom niet direct tegen de rand van de afbeelding.

Voorbeeld van volledige Open Graph-metatags

Voor een uitgebreidere configuratie kunt u aanvullende Open Graph-eigenschappen gebruiken:

Waarom wordt de verkeerde afbeelding op social media weergegeven?

U hebt og:image toegevoegd, maar Facebook, LinkedIn of een berichtenapp toont nog steeds een oude of verkeerde afbeelding? Dit is een veelvoorkomend probleem bij Open Graph-optimalisatie.

Socialmediacache

Socialmediaplatforms kunnen metadata en afbeeldingen tijdelijk opslaan. Wanneer u uw website wijzigt, betekent dit dus niet dat ieder platform onmiddellijk de nieuwe afbeelding ophaalt.

De afbeelding is niet openbaar toegankelijk

Uw Open Graph-afbeelding moet publiek toegankelijk zijn. Authenticatie, serverbeperkingen of bepaalde beveiligingsregels kunnen voorkomen dat een platform de afbeelding kan ophalen.

De afbeelding-URL is verkeerd

Controleer de exacte waarde van:

Kopieer de URL en open deze rechtstreeks in uw browser. Als de afbeelding daar niet werkt, kan het socialmediaplatform deze waarschijnlijk ook niet ophalen.

De afbeelding wordt bijgesneden

Verschillende platforms kunnen linkpreviews op een andere manier weergeven. Zorg daarom voor voldoende ruimte rond belangrijke onderdelen van uw social media afbeelding.

Ontwerptip: Plaats uw logo en belangrijkste tekst binnen een veilige centrale zone. Zo blijft de afbeelding herkenbaar wanneer een platform de preview bijsnijdt.

Favicon versus Open Graph-afbeelding: wat is het verschil?

Deze twee elementen worden soms met elkaar verward omdat ze allebei met afbeeldingen te maken hebben. Hun functie is echter volledig verschillend.

Klein websitepictogram Grote preview-afbeelding Identificeert de website Vertegenwoordigt een specifieke pagina Browsertabbladen Socialmediapreviews Bladwijzers Berichtenapps en gedeelde links Kan in Google Search worden weergegeven Wordt gebruikt door compatibele platforms

Favicon en Open Graph SEO-checklist

Controleer de volgende punten voordat u de technische configuratie van uw favicon en social sharing als afgerond beschouwt:

✓ Uw favicon is vierkant.
✓ Uw favicon is duidelijk herkenbaar.
✓ De favicon is openbaar toegankelijk.
✓ De favicon-URL is stabiel.
✓ Zoekmachines kunnen de favicon crawlen.
✓ Uw HTML bevat een correcte rel="icon"-verwijzing.
✓ Onnodige dubbele favicon-verwijzingen zijn verwijderd.
✓ De favicon werkt in moderne browsers.
✓ Een Apple Touch Icon is beschikbaar indien nodig.
✓ Uw website beschikt over een Open Graph-afbeelding.
✓ og:title is correct ingesteld.
✓ og:description is correct ingesteld.
✓ og:url verwijst naar de juiste pagina.
✓ og:image gebruikt een openbare URL.
✓ De Open Graph-afbeelding heeft voldoende resolutie.
✓ Belangrijke tekst staat niet tegen de rand van de afbeelding.
✓ og:image:alt beschrijft de afbeelding correct.
✓ Socialmediapreviews zijn na wijzigingen gecontroleerd.

Veelgestelde vragen over favicon en Open Graph

Wat is de beste grootte voor een favicon?

Google vereist momenteel minimaal 8 × 8 pixels en beveelt voor weergave in Google Search een favicon van meer dan 48 × 48 pixels aan. Voor een moderne website is het verstandig om geschikte formaten voor verschillende browsers en apparaten te voorzien.

Wat is het aanbevolen formaat voor een Open Graph-afbeelding?

1200 × 630 pixels is een veelgebruikt praktisch formaat voor Open Graph- en socialmediapreviews. Houd daarnaast rekening met de specifieke richtlijnen van het platform waarop u de URL deelt.

Helpt een favicon om hoger te scoren in Google?

Een favicon moet niet worden beschouwd als een directe Google-rankingfactor. De belangrijkste functie is visuele herkenbaarheid en branding. Google kan de favicon echter wel naast uw website in de zoekresultaten tonen wanneer aan de technische voorwaarden wordt voldaan.

Waarom werkt mijn favicon wel in Chrome maar niet in Google?

Uw browser en Google Search verwerken favicons op verschillende manieren. Google moet uw website en favicon opnieuw crawlen en verwerken voordat de gewijzigde favicon eventueel in de zoekresultaten verschijnt.

Moet mijn favicon dezelfde afbeelding zijn als mijn og:image?

Nee. Een favicon is een kleine identificatie-afbeelding voor uw website. Een Open Graph-afbeelding is veel groter en bedoeld om een specifieke pagina visueel te vertegenwoordigen wanneer de URL wordt gedeeld.

Waarom zie ik nog steeds mijn oude Open Graph-afbeelding?

De meest voorkomende oorzaak is caching. Socialmediaplatforms kunnen eerder opgehaalde metadata en afbeeldingen tijdelijk bewaren. Controleer daarom uw og:image-URL en gebruik indien nodig de beschikbare tools van het betreffende platform om de preview opnieuw op te halen.

Kan ik een JPG gebruiken als favicon?

De ondersteuning hangt af van de browser en de implementatie. PNG en ICO zijn veelgebruikte keuzes voor websitefavicons. Hebt u een JPG-logo, dan is het meestal beter om dit eerst om te zetten naar geschikte favicon-formaten.

Kan een website meerdere favicons hebben?

U kunt verschillende favicon-verwijzingen gebruiken voor verschillende toepassingen en apparaten. Vermijd echter onnodige of tegenstrijdige configuraties. Voor Google Search wordt de favicon gekoppeld aan de hostname van de website.

Conclusie: kleine technische details maken een verschil

Technische SEO draait niet alleen om zoekwoorden, H1-koppen, backlinks en kwalitatieve content. Een professioneel geoptimaliseerde website heeft ook een correcte technische basis.

Een goed ingestelde favicon helpt bezoekers uw website en merk sneller herkennen. Een correcte Open Graph-afbeelding geeft u bovendien meer controle over de manier waarop uw pagina's worden weergegeven wanneer iemand een URL deelt.

Geen van beide moet worden gezien als een truc om automatisch hoger te scoren in Google. Ze maken deel uit van een bredere SEO-optimalisatiestrategie waarin ook technische toegankelijkheid, gestructureerde gegevens, metadata, contentkwaliteit, interne links, snelheid en gebruikerservaring belangrijk zijn.

Staat uw website al een tijdje online? Controleer dan vandaag nog uw favicon en Open Graph-configuratie. Een verkeerd bestandspad, ontbrekende metatag of verouderde afbeelding kan soms met slechts enkele technische aanpassingen worden opgelost.