Favicon van je logo: formaten voor browser en Google
Een favicon is het kleine symbool van je website. Gebruik het logoteken in plaats van een verkleinde volledige naam. Browsertabs, Google en geïnstalleerde webapps stellen verschillende eisen; test de echte bestemming.

Welk bestand hoort waar?
| Bestemming | Bestand | Afmeting / controle |
|---|---|---|
| Browsertab | SVG / ICO / PNG | 16, 32 px |
| Google Search | PNG / ICO | >48×48 px; PNG96 |
| Apple-beginscherm | apple-touch-icon.png | 180×180 px |
| Geïnstalleerde PWA | PNG + site.webmanifest | 192×192, 512×512 px |
Gebruik voor Google een ondersteund formaat zoals PNG of ICO: SVG staat niet in de huidige lijst. Het vierkante pictogram moet minstens 8×8 px zijn; Google adviseert meer dan 48×48, dus 96×96 is nuttig, niet verouderd. Link vanaf de homepage, houd de URL stabiel en laat Googlebot de pagina en Googlebot-Image het beeld ophalen. Voldoen aan de richtlijnen garandeert geen weergave.
Het pictogram maken en publiceren
- Begin met een herkenbaar teken; verwijder slogan en fijne details.
- Bekijk de vorm op 16 en 32 px tegen lichte en donkere achtergronden.
- Exporteer vanuit de vector. Kies één faviconmap uit het LogoSaga-pakket en behoud de manifestpaden.
- Voeg onderstaande links alleen toe voor bestanden op de server. De PNG96 is een extra export voor zoeken.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="/site.webmanifest" />
Een SVG kan prefers-color-scheme gebruiken, maar test de ondersteunde browsers en versies. Een teken dat op beide achtergronden leesbaar is, vormt een betrouwbare terugvaloptie. Apple-touch- en manifestpictogrammen zijn aparte bestanden, geen automatische varianten van de browser-SVG.
Waarom ontbreekt het?
Open de URL rechtstreeks: die moet een afbeelding geven, geen fout of inlogpagina. Controleer homepagelinks en crawltoegang. Herlaad in de browser of wis de lokale pictogramcache. Houd voor Google de URL stabiel en vraag homepage-indexering aan in Search Console; verwerking kan dagen of weken duren. Steeds hernoemen lost zoekproblemen niet op.
Aanvullende praktische gidsen: Logo testen: 10 controles vóór publicatie · Logo voor Google Bedrijfsprofiel: formaat en upload
Maak een logo met een bijpassende faviconVeelgestelde vragen
Welke grootte moet een favicon hebben?
Gebruik voor Google een ondersteund formaat zoals PNG of ICO: SVG staat niet in de huidige lijst. Het vierkante pictogram moet minstens 8×8 px zijn; Google adviseert meer dan 48×48, dus 96×96 is nuttig, niet verouderd. Link vanaf de homepage, houd de URL stabiel en laat Googlebot de pagina en Googlebot-Image het beeld ophalen. Voldoen aan de richtlijnen garandeert geen weergave.
Welk formaat moet een favicon hebben — SVG, PNG, of ICO?
Een favicon is het kleine symbool van je website. Gebruik het logoteken in plaats van een verkleinde volledige naam. Browsertabs, Google en geïnstalleerde webapps stellen verschillende eisen; test de echte bestemming.
Kan een favicon veranderen in donkere modus?
Een SVG kan prefers-color-scheme gebruiken, maar test de ondersteunde browsers en versies. Een teken dat op beide achtergronden leesbaar is, vormt een betrouwbare terugvaloptie. Apple-touch- en manifestpictogrammen zijn aparte bestanden, geen automatische varianten van de browser-SVG.
Waarom verschijnt of vernieuwt mijn favicon niet?
Open de URL rechtstreeks: die moet een afbeelding geven, geen fout of inlogpagina. Controleer homepagelinks en crawltoegang. Herlaad in de browser of wis de lokale pictogramcache. Houd voor Google de URL stabiel en vraag homepage-indexering aan in Search Console; verwerking kan dagen of weken duren. Steeds hernoemen lost zoekproblemen niet op.
Bronnen
- Define a favicon to show in search results — Google Search Central
- Web app manifest: icons — MDN Web Docs
- Configuring Web Applications — Apple Developer