Ctrl K

Favicon maken

Een favicon is het kleine icoon in het browsertabblad, de bladwijzers en de zoekresultaten. Voor een moderne site heb je drie bestanden nodig: een ICO-bestand met 16, 32 en 48 pixels, een SVG-icoon en een PNG van 180 pixels voor de iPhone. Alle omzetters op deze pagina werken in je browser, dus er wordt niets geüpload.

De bestanden die je nodig hebt

Bestand Formaat Gebruikt door
favicon.ico 16, 32 en 48 px in één bestand elke browser als vangnet, bladwijzers, zoekmachines, Windows
icon.svg willekeurig, getekend als vierkant huidige Chrome, Edge en Firefox, scherp op elk scherm
apple-touch-icon.png 180 × 180 px beginscherm van iPhone en iPad
icon-192.png, icon-512.png 192 × 192 en 512 × 512 px Android en geïnstalleerde web-apps, via het webmanifest

De tientallen formaten die oudere handleidingen en generatoren noemen heb je niet nodig. Browsers kiezen het dichtstbijzijnde formaat dat ze vinden en schalen het.

De HTML

Zet de bestanden in de hoofdmap van je site en voeg dit toe aan de <head> van elke pagina:

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

De sizes="32x32" bij het ICO-bestand doet ertoe: daardoor kiest Chrome niet het ICO-bestand boven je SVG. Het manifest heeft alleen een lijst met de PNG's van 192 en 512 pixels onder icons nodig.

Stap voor stap

  1. Begin met één vierkante afbeelding, bij voorkeur een vector (SVG) of een PNG van 512 × 512 pixels met wat ruimte rondom. Een eenvoudige vorm of één letter werkt het best, want op 16 pixels is er plek voor zo'n 256 puntjes.
  2. Maak het ICO-bestand. Vanuit een SVG gebruik je SVG naar ICO. Vanuit een PNG met transparante achtergrond PNG naar ICO. Vanuit een JPG JPG naar ICO, met de kanttekening dat een JPG een effen achtergrond heeft.
  3. Maak de PNG voor de iPhone. SVG naar PNG maakt een PNG uit een vector, en afbeelding kleiner maken schaalt een PNG van 512 pixels terug naar 35%, ongeveer 180 pixels. Gebruik een effen achtergrondkleur: iOS vult transparante vlakken met zwart.
  4. Zet de bestanden in de hoofdmap van je site en voeg de HTML hierboven toe.

Is je afbeelding niet vierkant of staat er veel lege ruimte omheen? Los dat eerst op met afbeelding bijsnijden in de verhouding 1:1. Zit er een achtergrond in die je niet wilt? Achtergrond verwijderen maakt hem transparant.

Fouten waardoor een favicon er slecht uitziet

  • Te veel detail. Tekst en dunne lijnen verdwijnen op 16 pixels.
  • Een transparant logo dat alleen donker is. In een donker browserthema verdwijnt het. Test op een licht en een donker tabblad, of geef het icoon een effen vorm achter het logo.
  • Maar één formaat. Eén afbeelding van 16 pixels ziet er op schermen met hoge dichtheid zacht uit. Zet minimaal 16, 32 en 48 in het ICO-bestand.
  • Helemaal geen ICO-bestand. Zoekmachines en oudere software vragen nog steeds om /favicon.ico en krijgen een 404.
  • Verouderde cache. Een gewijzigd icoon kan een tijd duren voor het verschijnt. Hernoem het bestand of voeg een versie toe, zoals /favicon.ico?v=2, om een update af te dwingen.

Veelgestelde vragen

Heb ik nog een favicon.ico-bestand nodig?

Ja. Browsers die SVG begrijpen hebben het niet nodig, maar zoekmachines, bladwijzers, feedlezers en oudere browsers vragen zelf om /favicon.ico. Een ontbrekend bestand vult bovendien je serverlog met 404-fouten.

Wat is de kleinste set bestanden?

Drie: favicon.ico (16, 32 en 48 pixels in één bestand), icon.svg voor moderne browsers en apple-touch-icon.png van 180 × 180 pixels. Kan je site als app worden geïnstalleerd, voeg dan PNG's van 192 en 512 pixels toe in het webmanifest.

Kan ik een foto als favicon gebruiken?

Het kan, maar op 16 pixels wordt een foto een veeg. Snijd bij tot het gezicht of het hoofdonderwerp, kies een vierkant en bekijk het resultaat op ware grootte voordat je het publiceert.

Waarom verschijnt mijn nieuwe favicon niet?

Browsers bewaren favicons heel lang in de cache. Ververs de pagina geforceerd, wis de sitegegevens of open de site in een privévenster. Zoekmachines werken hun eigen kopie van het icoon op hun eigen tempo bij, wat dagen of weken kan duren.