# Favicon ontwerpen: kleine iconen die nog steeds als jij ogen

[Canonical HTML page](https://gradiently.design/nl/guide/favicon-design)

Je favicon is het meest herhaalde stuk van je merk en het kleinste. Hij moet overleven op 16 pixels, op lichte en donkere tabs, naast vijftig andere sites. Zo maak je hem robuust.

## The short version

- Een favicon is het kleine icoon dat een website vertegenwoordigt in browsertabs, bladwijzers, geschiedenis, beginschermen en zoekresultaten.
- Een moderne minimale set bestaat uit een favicon.ico van 32×32, een SVG-icoon, een Apple touch icon van 180×180 en PNG's van 192×192 en 512×512 in een webapp-manifest.
- Google Zoeken toont de favicon van een site naast resultaten en vraagt om een vierkant icoon, bij voorkeur groter dan 48×48 pixels.
- Favicons werken het best als één gedurfde vorm of letter met sterk contrast, omdat detail op 16 pixels verdwijnt.
- Een SVG-favicon kan van kleur wisselen voor de donkere modus met een mediaquery in het bestand zelf.

Een **favicon** is het kleine vierkante icoon dat je website vertegenwoordigt in browsertabs, bladwijzers, geschiedenis, beginschermen van telefoons en Google-resultaten. Hij wordt vaak op maar 16 of 32 pixels getoond, dus goed favicon-ontwerp is meedogenloos: één gedurfde vorm of letter, hoog contrast, geen fijn detail. Technisch heb je maar een handvol bestanden nodig, een ICO van 32×32, een SVG, een Apple touch icon van 180×180 en twee manifest-PNG's, plus een paar regels HTML.

## Faviconformaten en bestanden die je echt nodig hebt

Oude gidsen noemen twintig formaten. Moderne browsers schalen goed, dus een korte set dekt elke plek waar een favicon verschijnt. Dit volgt de aanpak die [web.dev](https://web.dev/articles/add-manifest) aanbeveelt voor manifesten en het huidige browsergedrag voor de rest.

| Bestand | Formaat | Gebruikt door |
| --- | --- | --- |
| `favicon.ico` | 32×32 | Oudere browsers, en alles wat rechtstreeks `/favicon.ico` opvraagt |
| `icon.svg` | Schaalbaar | Huidige browsers die SVG-favicons ondersteunen; kan zich aanpassen aan de donkere modus |
| `apple-touch-icon.png` | 180×180 | Beginschermen van iPhone en iPad en bladwijzers in Safari |
| `icon-192.png` | 192×192 | Beginscherm van Android, via het webapp-manifest |
| `icon-512.png` | 512×512 | Startschermen en app-installaties op Android, via het manifest |

Vijf bestanden. Zet ze in de root van je site, of waar je maar wilt, zolang de HTML ernaar verwijst.

Google Zoeken toont ook favicons naast resultaten. De [faviconrichtlijnen](https://support.google.com/webmasters/answer/9290858) vragen om een vierkant icoon, raden een icoon groter dan 48×48 pixels aan en zeggen dat het je merk moet vertegenwoordigen. De PNG's van 192 en 512 voldoen daaraan; bekijk die pagina voor de lancering, want Google past hem aan.

## Zo voeg je een favicon toe aan je site

```html
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
```

Komt in de `head` van elke pagina. Browsers die SVG begrijpen, verkiezen die; andere vallen terug op de ICO.

```json
{
  "name": "Studio Nine",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ]
}
```

Een minimale `manifest.webmanifest`. Het maskable-icoon is optioneel en laat Android het in zijn eigen vormen uitsnijden.

> **Maskable-iconen hebben marge nodig** Android kan een maskable-icoon uitsnijden tot een cirkel, squircle of afgeronde vierkant. Houd het belangrijkste deel binnen de middelste cirkel, ongeveer 80% van de breedte, en vul de rest met achtergrondkleur.

## Een favicon ontwerpen die op 16 pixels leesbaar is

Op 16 pixels heb je 256 stippen. Een volledig woordmerk wordt een grijze vlek, dunne lijnen verdwijnen en twee gelijkende kleuren vloeien samen. De favicons die mensen meteen herkennen zijn bijna altijd een van drie dingen: één letter, een eenvoudig symbool of een effen vorm in een onderscheidende kleur.

Een vierkant app-icoon met één vette letter N op een kleurverloopachtergrond

Eén zware letter op een sterke achtergrond. Hij blijft leesbaar als de browser hem tot 16 pixels verkleint.

Een vierkant icoon met een studionaam van drie woorden, te gedetailleerd om als favicon te werken

De volledige naam ziet er prima uit op 512 pixels en wordt onleesbare textuur op 16. Bewaar hem voor de pagina zelf.

### Vermijd

- Het volledige logo met woordmerk
- Haarfijne lijnen en kleine binnenruimtes
- Twee dicht bij elkaar liggende kleuren die vervloeien
- Detail dat tot de randen doorloopt
- Een transparant icoon dat op donkere tabs verdwijnt

### Doe

- Eén letter, monogram of symbool
- Lijnen van minstens 2 pixels dik op 32×32
- Sterk contrast tussen vorm en achtergrond
- Vul het meeste van het vierkant, met een beetje marge
- Test in lichte en donkere browserthema's

## Kleur en kleurverlopen in een piepklein icoon

Kleur doet op dit formaat meer werk dan vorm, want daarop scannen mensen langs een rij tabs. Een herkenbare merkkleur wint van een slim symbool. Kleurverlopen kunnen werken als ze gedurfd en kort zijn: twee stops met een duidelijk verschil in helderheid lezen als een verlicht oppervlak, terwijl een subtiele menging met meerdere stops op 16 pixels gewoon modderig oogt.

- Indigo naar roze: leesbaar: `linear-gradient(135deg, #4338ca 0%, #db2777 100%)`
- Groenblauw naar limoen: leesbaar: `linear-gradient(135deg, #0f766e 0%, #a3e635 100%)`
- Lichtgrijs: verdwijnt: `linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)`

Faviconachtergronden hebben een duidelijk helderheidsverschil en een zelfverzekerde tint nodig. De laatste verdwijnt tegen een lichte tabbalk.

Heeft je merk al een eigen achtergrond, dan kan een uitsnede ervan een onderscheidende favicontegel worden. Gradiently Marks zijn hier handig: dezelfde look die achter je posts loopt, kan op 512×512 achter één letter staan, zodat tab en feed als één merk voelen. Zorg dat de letter sterk contrast houdt met de tegel, zoals beschreven in [logo op een kleurverloopachtergrond](https://gradiently.design/nl/guide/logo-on-gradient-background).

## Favicons voor de donkere modus met SVG

Een zwart icoon verdwijnt op een donkere tabbalk, en een wit op een lichte. Omdat een SVG-favicon een klein document is, kan hij zijn eigen mediaquery meedragen en van kleur wisselen met het thema van de browser.

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1e1b4b; }
    path { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #e0e7ff; }
      path { fill: #1e1b4b; }
    }
  </style>
  <rect width="32" height="32" rx="7"/>
  <path d="M9 24V8h3l8 10V8h3v16h-3l-8-10v10z"/>
</svg>
```

Sla op als `icon.svg`. Een afgeronde tegel met een letter N die in de donkere modus zijn kleuren omkeert.

Een effen tegel achter het symbool is de eenvoudigste verzekering: hij leest op elke achtergrond, licht of donker, zonder op de mediaquery te vertrouwen. [SVG of PNG](https://gradiently.design/nl/guide/svg-vs-png) legt uit waarom het vectorbestand het bestand is dat je bewaart.

## Een snelle favicon-checklist

1. **Begin bij het eenvoudigste deel van je logo** Een monogram, de eerste letter of alleen het symbool. [Logovarianten](https://gradiently.design/nl/guide/logo-variations) behandelt hoe je bewust een kleine versie bouwt.
2. **Teken hem eerst op 32×32** Ontwerp op het kleine raster en schaal op, niet andersom. Dikke lijnen, ruime tussenruimtes.
3. **Exporteer de vijf bestanden** ICO op 32×32, SVG, Apple touch icon van 180×180, en de manifest-PNG's van 192 en 512.
4. **Test in echte tabs** Open je site naast tien andere, in lichte en donkere thema's. Vind je je tab niet binnen een seconde, vereenvoudig dan.

De favicon staat naast je [Open Graph-afbeelding](https://gradiently.design/nl/guide/open-graph-image-size) en je profielfoto's op social media als de kleine, constante signalen van een merk. Houd ze consistent, en zie [logoformaten](https://gradiently.design/nl/guide/logo-sizes) voor de complete set.

## FAQ

### Welk formaat moet een favicon hebben?

Lever een favicon.ico van 32×32, een SVG, een Apple touch icon van 180×180 en PNG's van 192×192 en 512×512 in een manifest. Browsers kiezen en schalen daaruit.

### Hoe voeg ik een favicon toe aan mijn website?

Upload de iconbestanden en voeg `link rel="icon"`- en `link rel="apple-touch-icon"`-tags toe aan de `head` van elke pagina, plus een manifestlink voor Android.

### Waarom zie ik mijn favicon niet in Google?

Google heeft een vierkante favicon nodig, bij voorkeur groter dan 48×48 pixels, gekoppeld vanaf je homepage en doorzoekbaar. Na een wijziging kan het even duren voor hij wordt bijgewerkt.

### Kan een favicon een SVG zijn?

Ja, huidige browsers die SVG-favicons ondersteunen gebruiken hem, en hij blijft op elk formaat scherp. Houd een favicon.ico als terugval.

### Moet mijn favicon mijn volledige logo zijn?

Meestal niet. Gebruik één letter, een monogram of het symbool van het logo, want een volledig woordmerk is op 16 pixels onleesbaar.