Zo gebruik je het
- Kies Tekst / emoji en typ één tot drie tekens, of kies Afbeelding en upload je logo (SVG of een vierkante PNG van minstens 512 px werkt het best).
- Kies kleuren en een vorm — Vierkant, Afgerond of Cirkel.
- Bekijk het voorbeeld op 16, 32, 64 en 128 px; kleine formaten laten zien of het ontwerp nog leesbaar is.
- Download de ZIP, upload de bestanden naar de hoofdmap van je site en plak de HTML in de head.
Opties uitgelegd
- favicon.ico
- Bevat versies van 16, 32 en 48 px voor browsers, bladwijzers en Windows-snelkoppelingen.
- apple-touch-icon.png
- 180 × 180 px met een effen achtergrond, gebruikt wanneer iemand je site aan het beginscherm van een iPhone of iPad toevoegt.
- icon-192.png / icon-512.png
- Wordt verwezen vanuit site.webmanifest voor Android-beginschermen en installeerbare webapps.
- icon.svg
- Een schaalbaar icoon voor moderne browsers, meegeleverd wanneer de bron tekst of een SVG-bestand is.
De HTML
Voeg dit, nadat je de bestanden naar de hoofdmap van je site hebt geüpload, 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="/site.webmanifest">Veelgestelde vragen
Welke bestanden heb ik echt nodig?
favicon.ico in de hoofdmap van de site dekt elke browser. Voeg apple-touch-icon.png toe voor iOS en het manifest met de 192/512-iconen als je een goed icoon wilt wanneer de site geïnstalleerd of op Android vastgezet wordt.
Waarom is mijn favicon wazig op 16 px?
Fijne details verdwijnen op 16 × 16 pixels. Gebruik een dikke letter of een vereenvoudigd logo-symbool in plaats van het volledige logo met tekst.
Ik heb de favicon bijgewerkt maar zie nog de oude.
Browsers cachen favicons agressief. Herlaad de pagina hard, of voeg een versie toe aan de query, zoals /favicon.ico?v=2, in de link-tags.
Kan ik een emoji als favicon gebruiken?
Ja. Emoji worden getekend met het emoji-lettertype van je systeem, dus het resultaat komt overeen met wat je in het voorbeeld ziet.
Privacy
Deze tool draait volledig in je browser. Je bestanden en tekst worden op je eigen apparaat verwerkt en nooit naar onze servers geüpload.