Favicon komt van "favorite icon" — het icoontje dat browsers samen met een bladwijzer opsloegen. Inmiddels is het veel meer dan dat: je favicon staat in browsertabs, in de adresbalk, in snelkoppelingen op het bureaublad, op het startscherm van iOS- en Android-telefoons, in Google-resultaten en als icoon van Progressive Web Apps (PWA's). Elk van die plekken vraagt om een ander formaat.
De meest gemaakte fout: één favicon.ico van 16×16 pixels maken en het daarbij laten. Op een Retina-scherm of een iPhone ziet dat icoon er wazig uit. De oplossing is een complete set formaten genereren — dat klinkt bewerkelijk, maar met de juiste tool is het in seconden gebeurd.
Wat is een .ico-bestand en wanneer gebruik je het
Het .ico-formaat is het oorspronkelijke faviconformaat, in de jaren 90 bedacht door Microsoft. Het heeft één bijzondere eigenschap: er passen meerdere formaten in één bestand — bijvoorbeeld 16×16 en 32×32 tegelijk. De browser kiest per situatie het passende formaat.
In 2026 heb je favicon.ico nog steeds nodig, om één specifieke reden: oude browsers en sommige zoekrobots vragen automatisch /favicon.ico op in de root van je site. Staat het bestand er niet, dan levert dat overbodige 404's op in je serverlogs. Ook als je verder alles met moderne PNG's doet, is een favicon.ico in de root dus aan te raden.
Alle faviconformaten op een rij
Dit zijn alle formaten die een complete favicon in 2026 zou moeten dekken:
| Formaat | Bestandstype | Waar het gebruikt wordt |
|---|---|---|
| 16 × 16 px | .ico / PNG | Browsertab (standaard) |
| 32 × 32 px | .ico / PNG | Snelkoppeling op het bureaublad (Windows), tabs op HiDPI-schermen |
| 48 × 48 px | .ico / PNG | Snelkoppeling in Windows Verkenner |
| 57 × 57 px | PNG | iPhone (iOS 1–6, niet-Retina) |
| 60 × 60 px | PNG | iPhone (iOS 7+, niet-Retina) |
| 72 × 72 px | PNG | iPad (iOS 1–6, niet-Retina) |
| 76 × 76 px | PNG | iPad (iOS 7+, niet-Retina) |
| 96 × 96 px | PNG | Snelkoppeling in Chrome (Android) |
| 114 × 114 px | PNG | iPhone Retina (iOS 1–6) |
| 120 × 120 px | PNG | iPhone Retina (iOS 7+) |
| 144 × 144 px | PNG | iPad Retina (iOS 1–6), Windows 8 tile |
| 152 × 152 px | PNG | iPad Retina (iOS 7+) |
| 167 × 167 px | PNG | iPad Pro (iOS 9+) |
| 180 × 180 px | PNG | iPhone 6 Plus en nieuwer |
| 192 × 192 px | PNG | Android Chrome, PWA (manifest.json) |
| 512 × 512 px | PNG | Splashscreen Android Chrome, PWA in hoge resolutie |
💡 Goed nieuws: je hoeft geen enkel formaat met de hand te maken. De Favicon Generator van ImageTools maakt al deze bestanden automatisch uit één afbeelding — inclusief het .ico met meerdere formaten en een ZIP met alle PNG's.
Welke afbeelding je als basis gebruikt
Je bronafbeelding moet minstens 512×512 pixels zijn — dat is het grootste formaat dat je nodig hebt, en vanaf een groot bestand worden de kleinere formaten netjes gegenereerd. Begin je klein, dan worden de grote iconen wazig.
Bestandstypen die je kunt uploaden
- PNG met transparante achtergrond — ideaal. Het icoon oogt strak op elke tabkleur en op elk startscherm.
- PNG met effen achtergrond — prima, zolang die kleur past bij het ontwerp van je site.
- JPG — kan, maar zonder transparantie.
- SVG — het beste startpunt als je het hebt. Vectorieel, dus elk formaat zonder kwaliteitsverlies.
Ontwerptips voor favicons
Een favicon is een piepklein vlak — de versie van 16×16 bestaat uit slechts 256 pixels. Dat legt ontwerpbeperkingen op die veel mensen negeren:
- Gebruik het eenvoudigste element van je merk. Een volledig logo werkt zelden op 16px. Neem liever alleen de beginletter, één symbool of een uitgeklede versie van het icoon.
- Vermijd dunne tekst. Onder de 32px is tekst simpelweg niet meer leesbaar.
- Zorg voor veel contrast. Je favicon concurreert met tientallen open tabs — een icoon met weinig contrast valt gewoon weg.
- Een effen achtergrond werkt vaak beter dan transparant. Zo blijft het icoon zichtbaar in zowel lichte als donkere tabs.
- Test het resultaat op 16px voordat je het af noemt. Een ontwerp dat op 512px prachtig is, kan op 16px onherkenbaar zijn.
Maak nu je favicon — alle formaten in één keer
Upload je afbeelding en download een ZIP met het .ico en alle PNG's die browsers, iPhone, Android en PWA nodig hebben. Gratis, zonder account.
Gratis favicon makenDe favicon op je site zetten
Zodra de bestanden er zijn, verwijs je ernaar in de <head> van je HTML. Dit is de aanbevolen code voor 2026:
<!-- Basisfavicon voor browsers -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon (iPhone en iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android en PWA -->
<link rel="manifest" href="/site.webmanifest">Het bestand favicon.ico hoort in de root van je site te staan (dezelfde map als index.html). De PNG's mogen in de root of in een submap staan, zolang de paden in je HTML kloppen.
Het bestand site.webmanifest
Voor PWA's, en om Android Chrome je icoon goed te laten herkennen, heb je een site.webmanifest in de root nodig. De basisinhoud ziet er zo uit:
{
"name": "Naam van je website",
"short_name": "Site",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}📦 De ZIP van de Favicon Generator bevat al een kant-en-klare site.webmanifest met de juiste paden — uitpakken en de bestanden naar de root van je site uploaden is genoeg.
Installeren per platform
WordPress
In WordPress heet de favicon "sitepictogram". Je stelt hem in via Weergave → Aanpassen → Site-identiteit en klikt op "Sitepictogram selecteren". WordPress genereert de benodigde formaten automatisch uit de afbeelding die je uploadt — gebruik een vierkant bestand van minstens 512×512 pixels.
Shopify
Ga naar Onlinewinkel → Voorkeuren, scroll naar "Favicon van de winkel" en upload een vierkante afbeelding van minstens 512×512 pixels in PNG of JPG.
Wix
Ga naar Instellingen → Merkidentiteit → Favicon. Gebruik een vierkante afbeelding in PNG of JPG.
Squarespace
Ga naar Design → Browserstijl, onderdeel "Favicon". Aanbevolen: een vierkante PNG van 100×100 pixels (Squarespace regelt de rest).
Kale HTML/CSS of een framework
Zet alle gegenereerde bestanden in de root van je project en plaats de <link>-tags hierboven in de <head> van elke pagina — of in je basislayout, als je met Next.js, Nuxt of iets vergelijkbaars werkt.
Controleren of je favicon werkt
Open na het installeren je site in een browsertab en kijk of het icoon verschijnt. Zo niet, probeer dan dit:
- Leeg de cache van je browser (Ctrl+Shift+R op Windows, Cmd+Shift+R op Mac).
- Open de site in een incognitovenster — dat gebruikt geen cache.
- Wacht een paar minuten: browsers bewaren favicons vaak wisselend lang in de cache.
- Controleer of het pad in de HTML klopt en of het bestand echt op de server staat.