Een favicon instellen in Webflow, WordPress en Shopify

De favicon is een klein onderdeel met een grote herkenningswaarde. Je ziet hem in browsertabbladen, bladwijzers, op het startscherm van een telefoon en vaak naast je zoekresultaat in Google. Een ontbrekende of onleesbare favicon oogt onaf; een goede maakt je website direct herkenbaar.

Eisen voor een goede favicon

• Vierkant, met het belangrijkste in het midden.
• Eenvoudig: een beeldmerk, symbool of één à twee letters. Een woordmerk met veel tekst is op klein formaat onleesbaar.
• Voldoende contrast, ook op een donker tabblad (donkere modus).
• Formaat: Google noemt een minimum van 8 × 8 pixels, maar raadt een vierkant groter dan 48 × 48 pixels aan. Een bronbestand van 512 × 512 pixels is handig, omdat platforms daar zelf kleinere versies van maken.
• Bestandstype: PNG is breed bruikbaar; ICO en SVG worden ook ondersteund.

Instellen per platform

Webflow

1. Ga naar Site settings → General (onder Icons / Favicon).
2. Upload bij Favicon een vierkante afbeelding (Webflow vraagt 32 × 32 px) en bij Webclip een grotere versie (256 × 256 px) voor apparaten.
3. Publiceer de site om de wijziging zichtbaar te maken.

WordPress

1. Ga naar Weergave → Customizer → Site-identiteit (of in blokthema's: Instellingen → Algemeen → Site-icoon).
2. Upload een vierkante afbeelding van minstens 512 × 512 pixels.
3. Sla op.

Shopify

1. Ga naar Online winkel → Thema's → Aanpassen.
2. Open Thema-instellingen → Logo (of Favicon, afhankelijk van het thema).
3. Upload de afbeelding en sla op.

Favicon in Google

Google toont de favicon naast zoekresultaten, vooral op mobiel. Voorwaarden volgens Google:

• de favicon is via een <link rel="icon"> in de homepage vastgelegd (doen de platforms automatisch);
• het bestand is crawlbaar (niet geblokkeerd in robots.txt);
• het is vierkant en bij voorkeur groter dan 48 × 48 pixels;
• het is een passend beeld voor je merk (geen ongepaste afbeeldingen).

Het kan enkele dagen tot weken duren voordat Google een nieuwe favicon toont.

Zie je de nieuwe favicon niet?

Browsers bewaren favicons hardnekkig in hun cache. Open de website in een privévenster of een andere browser. Na publicatie in Webflow kan het ook even duren; zie Wijziging niet zichtbaar na publiceren.

Een favicon die overal werkt

• vierkant, minimaal 48 × 48 pixels (een veelvoud daarvan) — Waarvoor: browsertabblad en zoekresultaten in Google
• 180 × 180 pixels — Waarvoor: snelkoppeling op het startscherm van een iPhone
• 512 × 512 pixels — Waarvoor: apps en manifest, bijvoorbeeld bij installatie als web-app

Gebruik een vereenvoudigde versie van je logo, zoals het beeldmerk of de eerste letter, met genoeg contrast tegen een lichte én donkere achtergrond. Een volledig logo met tekst is op dit formaat onleesbaar.

Voorbeeld

Stel: een adviesbureau gebruikt zijn volledige logo, een liggende tekst met de bedrijfsnaam, als favicon. In het tabblad is het een onleesbaar streepje. Met alleen de eerste letter van de naam in de huisstijlkleur op een witte achtergrond is het bureau in een rij tabbladen direct herkenbaar.

Veelgestelde vragen

Moet ik een apart icoon laten ontwerpen?

Vaak volstaat een vereenvoudigde versie van je beeldmerk. Heeft je logo geen los symbool, dan kan een letter in de huisstijl werken.

Waarom toont Google een ander icoon?

Google haalt de favicon periodiek op. Controleer of de homepage de juiste favicon-link bevat en of het bestand bereikbaar is.

Heb ik verschillende formaten nodig?

Het is handig om een klein (32 px) en groot (256–512 px) formaat te hebben. De meeste platforms maken de tussenformaten zelf.

Kan een favicon transparant zijn?

Ja, maar controleer hoe het eruitziet op zowel lichte als donkere tabbladen.

Telt de favicon mee voor SEO?

Niet voor posities, wel voor herkenbaarheid in de zoekresultaten en daarmee mogelijk voor klikken.

Hulp nodig?

Wil je een consistente uitstraling van favicon tot huisstijl? Bekijk onze dienst branding en huisstijl.

Een volledig logo met tekst wordt op 16 pixels onleesbaar. Gebruik een herkenbaar beeldmerk of een of twee letters.