Favicon Generator: Complete gids voor browsericonen

Maak favicons die overal werken — browsertabbladen, bladwijzers, startschermen en PWA-launchers.

5 min leestijd Afbeelding · HTML · PWA 6 secties + FAQ

Het favicon is het eerste merkelement dat gebruikers zien in een browsertabblad. Een ontbrekend of wazig favicon duidt op een onafgewerkte site — maar favicons goed doen in 2025 betekent meerdere formaten en formaten genereren.

Moderne favicon-implementatie gaat verder dan een enkel 16×16 ICO-bestand. Je hebt PNG nodig voor standaardbrowsers, SVG voor schaalbare weergave, en Apple touch icons voor iOS.

Wat is een favicon

Een favicon (afkorting van "favorites icon") is een klein pictogram dat browsers weergeven in tabbladen, bladwijzers en geschiedenislijsten. De naam komt van de "Favorieten"-functie van Internet Explorer in 1999. Tegenwoordig verschijnen favicons in veel contexten: browsertabbladen, adresbalken, bladwijzers en als startschermiconen op mobiele apparaten.

Gratis Tool Favicon Generator Genereer favicons in alle vereiste formaten vanuit elke afbeelding

Vereiste formaten in 2025

De moderne faviconset omvat: 16×16 en 32×32 PNG voor browsertabbladen; 48×48 PNG voor de Windows-taakbalk; 180×180 PNG voor Apple touch icon (iOS-startscherm); 192×192 en 512×512 PNG voor Android/PWA; een SVG-favicon voor moderne browsers; en een ICO-bestand voor compatibiliteit met oudere browsers.

ICO vs PNG vs SVG favicon

Het ICO-formaat is een container die meerdere afbeeldingsformaten in één bestand kan bevatten — historisch de standaard, maar steeds meer vervangen door PNG. PNG-favicons worden breed ondersteund en bieden transparantie. SVG-favicons worden ondersteund door moderne Chrome, Firefox en Edge — ze schalen perfect en kunnen zich aanpassen aan donkere/lichte modus via CSS media queries.

Gratis Tool SVG naar PNG Converter Converteer SVG-bestanden naar PNG in elke resolutie

HTML link-tags voor favicon

Plaats favicon link-tags in de head van je HTML. De minimale moderne opzet: een rel="icon"-tag die naar je SVG of PNG wijst, een rel="apple-touch-icon"-tag voor iOS, en een rel="manifest"-tag voor PWA. Het ICO-bestand in de root (/favicon.ico) wordt automatisch opgepikt door browsers.

Apple touch icon en PWA-iconen

Wanneer gebruikers je site toevoegen aan hun iOS-startscherm, gebruikt Safari het apple-touch-icon. Het aanbevolen formaat is 180×180 pixels. Voor Android en Progressive Web Apps specificeer je iconen in je manifest.json-bestand met minimaal 192×192 en 512×512 PNG-versies.

Ontwerptips voor kleine iconen

Favicons moeten leesbaar zijn op 16×16 pixels — vermijd complexe illustraties. Gebruik een enkele vette letter of eenvoudige geometrische vorm. Zorg voor hoog contrast tussen het icoon en de browserchrome. Vermijd dunne strepen die verdwijnen bij kleine formaten.

Gratis Tool Afbeelding naar Base64 Encoder Bed afbeeldingen in als Base64-strings in HTML en CSS

Veelgestelde Vragen

Wat is het minimale faviconformaat? +
Het minimum is 16×16 pixels. Moderne opzetten vereisen echter meerdere formaten: 32×32 voor hogere DPI-schermen, 180×180 voor iOS en 192×192 voor PWA.
Kan ik slechts één faviconbestand gebruiken? +
Je kunt een enkel SVG-favicon gebruiken voor moderne browsers, maar voor volledige compatibiliteit heb je een ICO-bestand en PNG-bestanden voor Apple-apparaten nodig.
Heeft het favicon invloed op SEO? +
Direct niet — Google gebruikt favicons niet als rankingfactor. Indirect verbetert een professioneel favicon de merkherkenning en klikpercentages.
Hoe implementeer ik ondersteuning voor donkere modus in mijn favicon? +
SVG-favicons ondersteunen donkere modus via CSS media queries binnen het SVG-bestand. Gebruik een prefers-color-scheme media query om te wisselen tussen lichte en donkere icoonvarianten.
Waarom wordt mijn favicon niet bijgewerkt na deployment? +
Favicons worden agressief gecached door browsers. Om een update te forceren, hernoem het faviconbestand en werk de HTML link-tag bij, of voeg een cache-busting querystring toe zoals ?v=2.
Wat is een web-app-manifesticoon? +
Web-app-manifesticonen worden gedefinieerd in het manifest.json-bestand van je site en worden gebruikt wanneer gebruikers je PWA op hun startscherm installeren.
Moet mijn favicon een transparante achtergrond hebben? +
Dat hangt af van het browserthema. Transparante favicons zien er goed uit in donkere browsers, maar kunnen onzichtbaar zijn op lichte achtergronden. Een effen kleurachtergrond is over het algemeen veiliger.