Hoe maak je een favicon
Met de juiste tool is het maken van een favicon een klusje van twee minuten. Begin met een vierkante bronafbeelding – minimaal 512×512 pixels – voer deze door de favicon generator en verkrijg een compleet pakket: multi-size .ico, SVG, apple-touch-icon en manifest PNGs. In deze handleiding wordt elke stap beschreven, van bronvoorbereiding tot browserverificatie. Voor een deep-dive referentie zie ook de full tutorial.
Een favicon is het kleine pictogram dat een browser weergeeft in de tabbladbalk, adresbalk en bladwijzerlijst. Op mobiel wordt dit het startschermpictogram wanneer een gebruiker uw site opslaat. Op Windows verschijnt het op taakbalkpinnen en snelkoppelingen op het bureaublad. Het is een kleine moeite om de favicon goed te krijgen met een grote merkimpact: elke paginaweergave begint met uw pictogram op het gebruikerstabblad.
De moderne favicon-installatie bestaat niet uit één enkel bestand, maar uit een gecoördineerde set. Een .ico van meerdere formaten verwerkt de universele browser-fallback. Een SVG levert scherpe, schaalbare weergave in moderne browsers, inclusief ondersteuning voor de donkere modus. Een 180×180 PNG (apple-touch-icon) is wat iOS gebruikt voor installaties op het startscherm. Een 192×192 en een 512×512 PNG voeden de Android PWA installatieprompt. Eén goed voorbereid bronbeeld genereert deze allemaal tegelijk.
Het voorbereiden van bronafbeeldingen is de meest over het hoofd geziene stap. Uw logo moet vierkant zijn; een asymmetrische uitsnijding levert altijd een uitgerekt resultaat op. Ontwerp een vereenvoudigde versie van uw merkteken die duidelijk leesbaar is op klein formaat: verminder fijne lijntjes, verwijder kleine tekst en verhoog het contrast. Wat er elegant uitziet bij 512×512 kan een onleesbare klodder worden bij 16×16 als je deze vereenvoudigingspas overslaat.
SVG is het ideale bronformaat omdat het resolutie-onafhankelijk is. Een vectorafbeelding wordt gerasterd tot elke pixeldichtheid zonder kwaliteitsverlies. Als je alleen een raster PNG of JPG hebt, zorg er dan voor dat deze ten minste 512×512 is voordat je het genereert. Schalen vanaf iets kleiners introduceert vervaging die bij elke stap voor het wijzigen van het formaat toeneemt en resulteert in een vaag tabbladpictogram.
Het .ico-formaat is een container, geen enkele afbeelding. Het bevat meerdere rasterframes — doorgaans 16×16, 32×32, 48×48 en 64×64 — in één bestand. De browser ontleedt de map ICO en geeft alleen het frame weer dat het meest overeenkomt met de weergavedichtheid die het nodig heeft. Deze aanpak met één bestand betekent dat u geen afzonderlijke linktags voor elke resolutie nodig heeft; één tag dekt alle tabbladformaten.
Upload uw bronafbeelding naar de favicon generator. De tool verwerkt alles lokaal in uw browser: uw afbeelding verlaat nooit uw apparaat. Binnen enkele seconden produceert het een downloadpakket met favicon.ico, favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png en site.webmanifest, plus plakklare HTML-linktags.
Het plaatsen van de bestanden is eenvoudig. Zet alle gegenereerde bestanden neer in de openbare hoofdmap van uw site – dezelfde map die uw index.html bedient. Voor Vite- en Create React App-projecten is dit de map /public. Voor Next.js App Router-projecten plaatst u favicon.ico in /app en de PNG-bestanden in /public. Voor statische sites plaatst u alles naast uw HTML-bestanden.
De HTML-linktags vertellen browsers welk bestand ze voor elke context moeten gebruiken. Het minimum is één regel: `<link rel='icon' href='/favicon.ico'>`. De volledige aanbevolen set voegt nog drie regels toe: één voor de SVG-variant, één voor de apple-touch-icon en één voor het webmanifest. Plak het gegenereerde fragment in uw `<head>`-element. De tagvolgorde doet er niet toe, zolang ze maar voorafgaan aan `</head>`.
Browsercaching is de belangrijkste oorzaak van verwarring wanneer een favicon niet lijkt te worden bijgewerkt. Browsers cachen /favicon.ico per origin en respecteren mogelijk niet de standaard cache-control headers zoals ze dat voor andere assets doen. Als uw oude pictogram blijft bestaan, opent u een nieuw incognitovenster of voegt u een cache-buster-queryreeks zoals `?v=2` toe aan de href in uw linktag om browsers te dwingen het bijgewerkte bestand op te halen.
Veelgemaakte fouten zijn onder meer het uploaden van een niet-vierkante afbeelding (produceert uitgerekte pictogrammen), het gebruik van een bron van minder dan 256×256 pixels (vervaagt bij grotere weergaveformaten) en het weglaten van de apple-touch-icon (bij installaties op het startscherm van iOS wordt in plaats daarvan een pagina-screenshot weergegeven). Alle drie kunnen worden opgelost door te beginnen met een vierkante 512×512 PNG- of SVG-bron en de generator elk uitvoerformaat te laten verwerken.
Ondersteuning in de donkere modus is de moeite waard om vanaf het begin in te bouwen. Veel browsers geven de tabbladbalk in donker chroom weer als het systeem van de gebruiker zich in de donkere modus bevindt. Als uw pictogram een donkere markering op een transparante achtergrond is, kan het in een donker tabblad verdwijnen. Verzend een SVG favicon met een ingesloten `@media (prefers-color-scheme: dark)`-stijlblok dat de vulkleur verandert. Er zijn geen extra HTML-tags vereist, alleen een bijgewerkt SVG-bestand.
Verifieer uw favicon na implementatie met de live favicon tester. De tester simuleert de contexten van browsertabbladen, bladwijzers en installatieprompts en laat zien hoe uw pictogram wordt weergegeven met 16, 32, 48, 128 en 512 pixels naast elkaar. Controleer ook handmatig een vastgezet tabblad in Chrome en Safari, en gebruik 'Toevoegen aan startscherm' op iOS om de apple-touch-icon te bevestigen.
Voor platformspecifieke uitleg raadpleegt u favicon for WordPress, favicon for Shopify, favicon for React en favicon for Next.js. De gegenereerde bestandenset is identiek op alle platforms. Wat varieert is waar u de bestanden uploadt en hoe het platform de HTML-linktags injecteert of overschrijft.
Bezoek uw favicon opnieuw wanneer u uw merk verandert. In het cachegeheugen opgeslagen favicons blijven bestaan in bladwijzers en mobiele startschermen, lang nadat een nieuw ontwerp van de site live is gegaan. Het bijwerken van de versiereeks in uw linktag href dwingt browsers om het nieuwe bestand op te halen bij het volgende bezoek, waarbij geleidelijk het oude pictogram wordt vervangen op alle in de cache opgeslagen locaties. Zie de best favicon format-gids voor een uitsplitsing per formaat van de afwegingen tussen bestandsgrootte en compatibiliteit.
Hoe het werkt
- 1
Bereid een vierkante bronafbeelding voor
Exporteer uw logo of pictogram als een 512×512 PNG met een transparante achtergrond, of als een SVG met een vierkant viewBox (bijvoorbeeld `viewBox='0 0 512 512'`). Vereenvoudig fijne details die onzichtbaar zijn bij 16×16.
- 2
Genereer uw faviconpakket
Upload de bron naar de [favicon generator](tool:favicon-generator). De tool produceert favicon.ico (multi-size 16/32/48/64), favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png en site.webmanifest – alles in één keer.
- 3
Kopieer alle bestanden naar de hoofdmap van uw site
Plaats elk bestand uit de download-zip in de openbare root van uw project – de map die index.html bedient. Voor Next.js App Router past favicon.ico in /app; de PNG's passen in /public.
- 4
Plak de HTML-linktags in <head>
Kopieer het gegenereerde HTML-fragment en voeg het toe aan uw `<head>`-element. De volledige set omvat de .ico fallback, SVG-variant, apple-touch-icon en manifestlink – in totaal zes regels.
- 5
Verifieer via browsers en apparaten
Open uw site in Chrome, Safari, Firefox en Edge. Inspecteer het tabblad, de bladwijzerbalk en de adresbalk. Op iOS tikt u op het deelblad en op 'Toevoegen aan startscherm' om de apple-touch-icon te testen. Gebruik de [favicon tester](utility:favicon-tester) voor een snelle simulatie.
- 6
Cache-bust bij het updaten van een bestaande favicon
Als u een live favicon vervangt, verhoogt u de versietekenreeks in uw linktag href (`?v=2`, `?v=3`, enz.). Dit dwingt alle browsers om het bijgewerkte bestand op te halen bij het laden van de volgende pagina in plaats van de in de cache opgeslagen versie weer te geven.
Probeer het nu
Maak nu uw favicon
Favicon-generatorVeelgestelde vragen
Wat is de gemakkelijkste manier om een favicon te maken?+
Upload een 512×512 vierkante PNG of SVG naar de FetchFavicon-generator. Het produceert alle vereiste bestanden – .ico, SVG, apple-touch-icon, manifest PNGs – plus plakklare HTML in minder dan een seconde, zonder aanmelding en zonder serverupload.
Welk formaat moet mijn bronafbeelding hebben?+
Minimaal 512×512 pixels, idealiter als SVG. Als u kleiner gaat, riskeert u zichtbare onscherpte bij het formaat 256×256 dat wordt gebruikt door Windows en bij het formaat 512×512 dat vereist is voor de installatieprompts van PWA. Het opschalen van een kleine afbeelding leidt tot kwaliteitsverlies bij elke stap van het wijzigen van het formaat.
Heb ik een apple-touch-icon nodig?+
Ja, als bezoekers een iPhone of iPad gebruiken. Zonder dit tonen iOS-installaties op het startscherm een screenshot-miniatuur van lage kwaliteit van uw pagina in plaats van uw merkteken. Een 180×180 PNG gekoppeld met `<link rel='apple-touch-icon'sizes='180x180' href='/apple-touch-icon.png'>` is alles wat je nodig hebt.
Waarom wordt mijn favicon niet weergegeven op het browsertabblad?+
Meestal is het een cacheprobleem. Open een privé-/incognitovenster en navigeer naar uw site. Als het nog steeds niet verschijnt, controleer dan of favicon.ico wordt aangeboden in de hoofdmap van uw domein en of het href-pad van de linktag correct wordt omgezet. Controleer op typefouten en ontbrekende schuine strepen.
Heb ik zowel .ico als SVG nodig?+
Ja, voor volledige dekking. De .ico verwerkt oudere browsers, Windows-snelkoppelingen en tools van derden die /favicon.ico rechtstreeks ophalen. De SVG zorgt voor scherpe weergave op Chrome, Firefox, Edge en Safari 15+ en ondersteunt kleurwisseling in de donkere modus. De gecombineerde bestandsgrootte is doorgaans minder dan 30 KB.
Hoe lang duurt het voordat een faviconwijziging wordt doorgevoerd?+
Van enkele seconden tot enkele dagen, afhankelijk van hoe agressief de browser het origineel in de cache heeft opgeslagen. De snelste oplossing is om een nieuwe queryreeks (`?v=2`) toe te voegen aan uw favicon href. Hierdoor behandelen browsers deze als een nieuwe URL en halen ze onmiddellijk een nieuwe kopie op.
Kan ik een JPEG gebruiken als mijn favicon-bron?+
U kunt een JPEG naar de generator uploaden, maar JPEG's ondersteunen geen transparantie. Als uw pictogram een transparante achtergrond nodig heeft (die er het beste uitziet in browsertabbladen), begin dan met een PNG-32 of SVG. De generator converteert correct naar .ico en PNG.