Favicon Generator
Maak favicons in alle formaten voor je website. Upload een afbeelding of maak er een met een letter en kleur.
| Bestand | Formaat | Gebruik |
|---|---|---|
favicon-16x16.png |
16 x 16 | Browsertab (klassiek) |
favicon-32x32.png |
32 x 32 | Browsertab (retina) |
favicon-48x48.png |
48 x 48 | Windows tegel |
apple-touch-icon.png |
180 x 180 | Apple apparaten (iPhone, iPad) |
android-chrome-192x192.png |
192 x 192 | Android / PWA icoon |
android-chrome-512x512.png |
512 x 512 | Android / PWA splashscreen |
favicon.ico |
Multi-size | Fallback voor oudere browsers |
site.webmanifest |
JSON | PWA configuratie |
browserconfig.xml |
XML | Windows tegels configuratie |
Wat is een favicon?
Een favicon is het kleine icoontje dat je ziet in je browsertabblad, naast de titel van een website. Je komt ze ook tegen in je bladwijzers, in je browsergeschiedenis en soms in de zoekresultaten van Google. Het is een klein detail, maar het maakt je website herkenbaar tussen tientallen open tabbladen.
Zonder favicon toont je browser een generiek icoon. Dat ziet er niet professioneel uit en maakt het lastig om je site terug te vinden. Een eigen favicon kost twee minuten werk en maakt direct verschil.
Welke formaten heb je nodig?
Browsers en apparaten gebruiken verschillende formaten. Deze generator maakt ze allemaal in een keer aan:
- 16×16 en 32×32 pixels — de standaardformaten voor browsertabs. De 32×32 versie is voor schermen met hoge resolutie (retina).
- 180×180 pixels (Apple Touch Icon) — dit icoon verschijnt wanneer iemand je website opslaat op het startscherm van een iPhone of iPad.
- 192×192 en 512×512 pixels — voor Android-apparaten en Progressive Web Apps (PWA). De grote variant wordt gebruikt als splashscreen.
- favicon.ico — het klassieke formaat dat ook oudere browsers ondersteunen. Bevat meerdere formaten in een bestand.
In de ZIP die je downloadt zitten ook een site.webmanifest en browserconfig.xml. Die vertellen browsers waar ze de juiste iconen kunnen vinden.
Hoe voeg je een favicon toe aan je website?
In WordPress is het makkelijk: ga naar Weergave → Customizer → Site-identiteit en upload daar je afbeelding (gebruik de 512×512 versie). WordPress genereert dan automatisch de andere formaten.
Wil je het handmatig doen, of gebruik je geen WordPress? Plaats de bestanden in de hoofdmap van je website en voeg de volgende regels toe aan de <head> van je HTML:
<link rel="icon" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest">
Klik na het genereren op “Hoe gebruik ik deze bestanden?” voor de volledige code die je kunt kopieren.