Favicon ontwerpen: kleine iconen die nog steeds als jij ogen

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 aanbeveelt voor manifesten en het huidige browsergedrag voor de rest.

Google Zoeken toont ook favicons naast resultaten. De faviconrichtlijnen 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

<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">

{
  "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 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.

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.

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.

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.

<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>

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 legt uit waarom het vectorbestand het bestand is dat je bewaart.

Een snelle favicon-checklist

1. 1

   Begin bij het eenvoudigste deel van je logo

   Een monogram, de eerste letter of alleen het symbool. Logovarianten behandelt hoe je bewust een kleine versie bouwt.

2. 2

   Teken hem eerst op 32×32

   Ontwerp op het kleine raster en schaal op, niet andersom. Dikke lijnen, ruime tussenruimtes.

3. 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. 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 en je profielfoto's op social media als de kleine, constante signalen van een merk. Houd ze consistent, en zie logoformaten voor de complete set.