Favicon maken en toevoegen: formaat, generator en stappen

Een favicon is het kleine icoontje dat naast de naam van je website in een browsertabblad staat, en ook in de zoekresultaten van Google op mobiel en desktop. Je maakt hem van je logo of een deel daarvan, slaat hem op als vierkant PNG- of ICO-bestand en voegt hem toe via je websitebouwer. Dat is meestal in tien minuten gepiept.

Wat is een favicon?

Het woord komt van “favorite icon”: het icoontje dat browsers vroeger bij je favorieten (bladwijzers) lieten zien. Tegenwoordig zie je het op meer plekken:

• in het tabblad van je browser;
• bij bladwijzers en in de browsergeschiedenis;
• als app-icoon wanneer iemand je site op het beginscherm van zijn telefoon zet;
• naast je URL in de zoekresultaten van Google.

Juist dat laatste maakt het meer dan een detail. Zonder favicon toont Google een standaard wereldbolletje. Met een herkenbaar icoon valt je resultaat beter op tussen de concurrenten, en ziet je site er verzorgd uit.

Welk favicon-formaat heb je nodig?

Er is niet één maat die overal perfect is. Verschillende apparaten gebruiken verschillende formaten. Dit zijn de gangbare:

Formaat	Waar wordt het gebruikt?
16 x 16 en 32 x 32 pixels	Browsertabblad en bladwijzers
48 x 48 pixels of groter	Zoekresultaten van Google
180 x 180 pixels	Apple touch icon: iPhone en iPad als iemand je site op het beginscherm zet
192 x 192 en 512 x 512 pixels	Android en webapps

De makkelijkste aanpak: maak één scherp, vierkant bronbestand van 512 x 512 pixels. Daaruit kun je alle kleinere formaten laten maken, en veel websitebouwers doen dat automatisch.

Wat eist Google van je favicon?

Google heeft eigen richtlijnen voor favicons in de zoekresultaten. De belangrijkste:

• Het icoon moet vierkant zijn (verhouding 1:1) en minimaal 8 x 8 pixels. Google raadt aan groter dan 48 x 48 pixels te gaan, zodat hij overal scherp blijft.
• Het bestand moet een ondersteund formaat hebben, zoals ICO, PNG, GIF of JPEG.
• De favicon moet op je homepage staan en Google moet zowel de pagina als het bestand mogen crawlen.
• Het icoon moet je merk weergeven. Ongepaste afbeeldingen vervangt Google door een standaardicoon.

De volledige eisen staan in de favicon-richtlijnen van Google Search Central. Let op: zelfs als je alles goed doet, garandeert Google niet dat je favicon getoond wordt.

ICO, PNG of SVG?

• ICO is het klassieke formaat. Eén ICO-bestand kan meerdere maten bevatten en werkt in elke browser, ook oude.
• PNG is het makkelijkst om zelf te maken, ondersteunt transparantie en wordt door alle moderne browsers en Google gelezen.
• SVG is een vectorbestand dat op elke maat scherp blijft. Moderne browsers ondersteunen het, maar niet elke plek waar je favicon verschijnt. Gebruik het daarom als aanvulling, niet als enige bestand.

Favicon maken: zo pak je het aan

1. Vereenvoudig je logo. Een volledig logo met tekst is op 16 pixels onleesbaar. Kies het beeldmerk, de eerste letter of een simpel symbool.
2. Werk vierkant. Maak een canvas van 512 x 512 pixels in bijvoorbeeld Canva, Figma of je ontwerpprogramma.
3. Gebruik sterk contrast. Denk aan zowel een lichte als donkere browser: een donker icoon op een transparante achtergrond verdwijnt in donkere modus. Een gekleurd vlak als achtergrond lost dat op.
4. Houd ruimte aan de randen. Laat een klein stukje marge zodat het icoon niet tegen de rand plakt.
5. Exporteer als PNG. Wil je ook een ICO-bestand of alle formaten tegelijk, gebruik dan een favicon generator.
6. Bekijk hem klein. Zoom uit tot hij op tabbladgrootte staat. Herken je hem nog? Dan zit je goed.

Een favicon generator gebruiken

Een favicon generator is een gratis online tool waar je één afbeelding uploadt. De tool maakt daar alle formaten van, plus de code die je in je website zet. Bekende voorbeelden zijn RealFaviconGenerator en Favicon.io. Upload altijd je eigen, scherpe bronbestand, en controleer of de tool geen eigen naam of watermerk toevoegt.

Favicon toevoegen aan je website

WordPress

In WordPress heet de favicon het sitepictogram. Bij de meeste thema’s vind je het onder Weergave, Customizer, Site-identiteit. Bij blokthema’s staat het in de site-editor bij de instellingen van het sitelogo. Upload een vierkante afbeelding van minimaal 512 x 512 pixels en WordPress maakt de kleinere formaten zelf. Werk je met een page builder of bijzonder thema, kijk dan ook in de thema-instellingen. Meer handige basisinstellingen staan in onze handleiding voor een WordPress-website.

Shopify, Wix en andere websitebouwers

• Shopify: Online winkel, Thema’s, Aanpassen, en dan bij de thema-instellingen het onderdeel Favicon.
• Wix: in de instellingen van je site onder Favicon (alleen met een betaald abonnement en eigen domein).
• Andere bouwers: zoek in de site-instellingen naar “favicon”, “sitepictogram” of “site icon”.

Handmatig in de HTML

Bouw je zelf een site, upload dan de bestanden naar de hoofdmap van je website op je server (meer over die server lees je in wat is webhosting) en zet in de head van elke pagina regels die naar die bestanden verwijzen, zoals een link met rel=”icon” voor de browser en rel=”apple-touch-icon” voor Apple-apparaten. Een favicon generator levert deze code kant-en-klaar.

Je favicon verschijnt niet: wat nu?

• Browsercache: browsers onthouden favicons lang. Test in een privévenster of na het legen van de cache.
• Google heeft hem nog niet opgepikt: Google moet je homepage opnieuw crawlen. Dat kan van een paar dagen tot enkele weken duren. Via de URL-inspectie in Google Search Console kun je om een nieuwe crawl vragen. Hoe dat werkt, lees je in je website laten indexeren door Google.
• Bestand niet bereikbaar: open de URL van je favicon direct in je browser. Krijg je een foutmelding, dan klopt het pad niet.
• Geblokkeerd voor Google: controleer of je robots.txt de favicon of de homepage niet blokkeert.
• Na een verhuizing: ben je net naar een andere hostingpartij verhuisd, controleer dan of de bestanden mee zijn gekomen.

Praktijkvoorbeeld: een fietsenmaker met een lang logo

Een fietsenmaker heeft een logo met de volledige bedrijfsnaam en een fietsje erachter. Als favicon is dat een onleesbaar streepje. De oplossing: alleen het fietsje, in wit op een vlak in de huisstijlkleur, op een canvas van 512 x 512 pixels.

Hij uploadt het als sitepictogram in WordPress en checkt het tabblad in een privévenster. Twee weken later staat het fietsje ook naast zijn URL in Google, waardoor zijn resultaat tussen grotere ketens beter herkenbaar is.

Zelf doen of laten doen?

Een favicon toevoegen is bij vrijwel elke websitebouwer goed zelf te doen. Heb je een logo met een duidelijk beeldmerk, dan heb je hem binnen een kwartier staan.

Laat het doen als je logo zich slecht laat verkleinen en er eigenlijk een vereenvoudigde versie ontworpen moet worden, of als je site zo is gebouwd dat je de head-code niet zelf kunt aanpassen. Bij een nieuwe website hoort een favicon in alle formaten gewoon bij de oplevering.

Een goed favicon is klein werk met een zichtbaar effect, in je tabbladen en in Google. Ben je toe aan een nieuwe site waarbij dit soort details meteen goed staan? Bekijk dan onze pagina over een website laten maken.

Veelgestelde vragen