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.

Op deze pagina
  1. Welk bestand hoort waar?
  2. Het pictogram maken en publiceren
  3. Waarom ontbreekt het?
Hetzelfde beeldmerk getoond op faviconformaten, inclusief een versie op browsertabgrootte.
Een favicon is het beeldmerk van je logo, vereenvoudigd om helder te blijven op minuscule formaten.

Welk bestand hoort waar?

BestemmingBestandAfmeting / controle
BrowsertabSVG / ICO / PNG16, 32 px
Google SearchPNG / ICO>48×48 px; PNG96
Apple-beginschermapple-touch-icon.png180×180 px
Geïnstalleerde PWAPNG + site.webmanifest192×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

  1. Begin met een herkenbaar teken; verwijder slogan en fijne details.
  2. Bekijk de vorm op 16 en 32 px tegen lichte en donkere achtergronden.
  3. Exporteer vanuit de vector. Kies één faviconmap uit het LogoSaga-pakket en behoud de manifestpaden.
  4. Voeg onderstaande links alleen toe voor bestanden op de server. De PNG96 is een extra export voor zoeken.
De exportstap van de LogoSaga-editor met favicon.svg opgenomen bij de logobestanden.
Exporteren vanuit de vectormaster geeft je een favicon die exact overeenkomt met het logo.
<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 favicon

Veelgestelde 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