Hoe maak je een favicon
Een moderne favicon is meer dan een 16×16 afbeelding. In deze gids worden de bronvoorbereiding, het genereren van meerdere formaten, de installatie van HTML, praktijkvoorbeelden en oplossingen voor de problemen besproken waar de meeste teams over struikelen.
Wat is een favicon?
Een favicon zijn de kleine pictogrambrowsers die worden weergegeven in tabbladen, bladwijzerbalken, geschiedenislijsten en adresbalken. Op telefoons wordt dit het startschermpictogram wanneer iemand uw site opslaat. Op Windows verschijnt het op taakbalkpinnen en snelkoppelingen op het bureaublad. Gebruik onze favicon generator, PNG naar ICO converter, SVG naar ICO converter en live favicon tester om uw icon set te bouwen en te verifiëren, en lees de companion guide voor een beknopte walkthrough.
Het woord komt van het favorietenpictogram, maar de taak is veel verder gegroeid dan een enkele 16×16 GIF. De huidige favicon is een kleine activafamilie: een favicon.ico op rootniveau, optionele varianten SVG en PNG, een Apple-touch-pictogram voor iOS en manifestpictogrammen voor installeerbare PWA's.
Gebruikers geven zelden commentaar op een goede favicon, maar merken meteen dat er een ontbreekt of wazig is. Een helder pictogram duidt op verfijning en maakt uw tabblad herkenbaar tussen twintig geopende pagina's.
Bereid uw bronafbeelding voor
Begin met een vierkante afbeelding van minimaal 512×512 pixels. SVG met een vierkant viewBox is ideaal omdat het netjes wordt geschaald naar elke rastergrootte die u gaat exporteren.
Vermijd dunne lijnen, fijne typografie en ingewikkelde kleurverlopen. Bij 16×16 smelten haarlijndetails samen tot een grijze brij. Vereenvoudig het merkteken: minder vormen, hoger contrast, meer opvulling rond de glyph.
Als uw logo horizontaal is, maakt u een vierkante uitsnede waarin het symbool zonder het woordmerk wordt gecentreerd. Lettervormen met een hoogte van minder dan 8px overleven zelden de schaalverkleining.
Exporteer PNG-32 met transparantie wanneer raster uw enige optie is. Een ingebouwde witte achtergrond ziet er verkeerd uit in donker browserchroom en op getinte mobiele draagraketten.
Genereer een .ico met meerdere formaten
Bundel frames van 16, 32, 48, 64, 128 en 256 pixels in één favicon.ico-bestand. Browsers en Windows lezen de directoryheader en decoderen alleen de grootte die ze nodig hebben.
Plaats favicon.ico in de hoofdmap van uw site (/favicon.ico). Zelfs als je moderne <link>-tags declareert, onderzoeken crawlers en oudere clients dat pad nog steeds volgens afspraak.
Onze favicon-generator rasteriseert elk formaat clientzijde in minder dan een seconde. Uw bronafbeelding verlaat de browser nooit, wat van belang is als het merk een nog niet vrijgegeven productlogo is.
Voeg de HTML-tags toe
Plaats deze tags in <head> voor een complete 2026-installatie:
<link rel="icon" href="/favicon.ico" size="elke">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
De SVG-lijn geeft scherpe tabs op Chromium en Firefox. De .ico-lijn omvat Safari-fallbacks, Windows-snelkoppelingen en RSS-lezers die SVG negeren.
Voorbeelden uit de echte wereld
Statische marketingsite: upload een 512×512 PNG van uw logo, genereer favicon.ico plus een 180×180 Apple-touch-pictogram, voeg vier <link>-regels toe, implementeer deze in /public of de webroot. Totale tijd: minder dan vijf minuten.
React / Vite-app: plaats pictogrammen in /public, verwijs ernaar met root-relatieve paden in index.html. Vite kopieert /public ongewijzigd tijdens de build, zodat /favicon.ico correct wordt omgezet in productie.
WordPress: sla handleiding HTML over – gebruik Uiterlijk → Aanpassen → Site-identiteit → Site Icon. Upload een bron van 512×512; WordPress zendt automatisch de juiste tags uit. Zie onze WordPress-tutorial voor tips voor cachebusting.
Merk in donkere modus: exporteer een SVG waarvan de vulling binnen @media verandert (prefers-color-scheme: donker). Combineer het met een neutrale .ico-fallback voor klanten die de SVG nooit laden.
Verifieer in elke browser
Hard vernieuwen (Ctrl+Shift+R of Cmd+Shift+R) in Chrome, Safari, Firefox en Edge. Bij normaal herladen blijft een favicon in de cache vaak dagenlang bewaard.
Controleer vier oppervlakken: browsertabblad, bladwijzerbalk, Toevoegen aan startscherm op iOS en een vastgezet taakbalkpictogram Windows. Voor elk oppervlak kan een andere resolutie uit uw bundel nodig zijn.
Open DevTools → Netwerk, filter op ico of png, laad opnieuw en bevestig 200 reacties voor elke pictogram-URL die u heeft opgegeven. Een enkele 404 op apple-touch-icon.png is een veel voorkomende misser.
Veelgestelde vragen
Heb ik favicon.ico nog steeds nodig als ik SVG heb? Ja. Behoud .ico als universele fallback. SVG is een verbetering, geen vervanging.
Wat is de minimaal levensvatbare favicon? Een multi-size favicon.ico bij /favicon.ico. Al het andere verbetert de duidelijkheid op schermen met hoge DPI en mobiele homeschermen.
Kan ik een JPG gebruiken? Dat kan, maar je verliest de transparantie. PNG of SVG is bijna altijd beter voor interfacepictogrammen.
Hoe vaak moet ik de favicon updaten? Wanneer uw merk verandert. Voer een keer een ?v=2-query uit op <link>-tags om agressieve browsercaches te verslaan.
Problemen oplossen
Pictogram wordt niet bijgewerkt na implementatie: browsers cachen favicons onafhankelijk van HTML. Hard vernieuwen, sitegegevens wissen of tijdelijk ?v=2 toevoegen aan pictogram-URL's.
Wazig tabbladpictogram: uw bron was te klein of niet-vierkant. Regenereer van 512×512 of SVG; controleer of de .ico daadwerkelijk een frame van 32×32 bevat.
Witte doos rond het logo: de bron had een ondoorzichtige achtergrond. Exporteer opnieuw met transparantie en genereer de .ico opnieuw met PNG-gecomprimeerde vermeldingen.
Werkt lokaal maar niet in productie: bevestig dat bestanden in de openbare webroot staan, niet alleen in src/. Controleer CDN-caches en hoofdlettergevoelige paden op Linux-servers.
Stap voor stap checklist
Exporteer of zoek een vierkant mastermodel van 512×512 of groter. Bevestig transparantie, sRGB-kleurprofiel en geen verborgen achtergrondlaag in uw ontwerpbestand.
Voer de master door een favicon-generator aan de clientzijde. Download favicon.ico, favicon.svg indien van toepassing, apple-touch-icon.png en manifesteer PNG's in één keer.
Upload alle bestanden naar uw openbare webroot. Op statische hosts betekent dit dezelfde map als index.html; op frameworks gebruikt u de directory /public of /static die verwijst naar /.
Plak het aanbevolen <link>-blok in <head> vóór eventuele weergaveblokkerende scripts. Vroege plaatsing helpt browsers pictogrammen in de eerste verf te ontdekken.
Valideer met harde vernieuwing voor Chrome, Safari en Firefox. Maak een tabblad vast, maak een bladwijzer voor de pagina en test Toevoegen aan startscherm op een echte iPhone als iOS-verkeer belangrijk voor u is.
Documenteer de pictogrammenset in uw README- of ontwerpsysteem, zodat de volgende rebranding niet begint met een enkele 32×32 PNG die iemand in de e-mail heeft gevonden.
Veelgemaakte fouten die u moet vermijden
Door een volledig horizontaal logo te gebruiken, geschaald in een sleuf van 16×16, wordt de tekst onleesbare ruis. Bijsnijden tot het symbool.
Verzending van alleen een 16×16 PNG hernoemd naar .ico zonder een goede map met meerdere formaten - Windows en Retina-tabbladen worden opgeschaald en vervagen.
Het Apple-Touch-pictogram vergeten terwijl je geobsedeerd bent door desktoptabbladen: iOS-gebruikers vormen een groot deel van het mobiele internetverkeer.
Wijs <link href> op een CDN-pad dat verschilt tussen staging en productie zonder omgevingsbewuste builds.
Ervan uitgaande dat WordPress, Shopify of Webflow op magische wijze een bronupload met lage resolutie zal repareren. Vuilnis erin, afval eruit, in elk formaat.