Wat is een favicon?
Een favicon (kort voor “favorites icon”) is de kleine vierkante afbeelding die een browser naast je paginatitel toont in tabbladen, bladwijzers en geschiedenis. Hetzelfde icoon wordt gebruikt als iemand je site op het beginscherm van zijn telefoon zet, en Google Zoeken toont het naast je sitenaam in mobiele resultaten.
Een duidelijke favicon maakt je tabblad makkelijk te vinden tussen twintig andere en laat een kleine site er af uitzien. Zonder favicon zie je een algemeen wereldbol- of leeg-pagina-icoon, en browsers loggen elke keer een 404-fout als ze naar /favicon.ico zoeken.
Een favicongenerator neemt één ontwerp en exporteert elk formaat en bestand dat browsers, iOS en Android verwachten, zodat je niet met de hand hoeft te schalen.
Stap voor stap een favicon maken
- Kies een bron met de tabbladen:
- Tekst: typ 1 of 2 letters, kies een van de 11 lettertypes (Inter, System UI, Arial, Helvetica, Verdana, Trebuchet MS, Georgia, Times New Roman, Courier New, Impact, Brush Script MT), een dikte (Vet, Halfvet, Normaal), een tekstkleur en een lettergrootte van 30% tot 95%.
- Emoji: plak een emoji of tik op een van de snelkeuzes en stel de emoji-grootte in van 40% tot 100%.
- Afbeelding: upload een PNG, JPG, SVG of WebP. Kies Passend om het hele logo te tonen of Vullen om het tot de randen bij te snijden, en voeg 0% tot 30% padding toe.
- Stel de achtergrondkleur en de vorm in (Afgerond, Vierkant of Cirkel), of vink Transparante achtergrond aan.
- Typ je sitenaam. Die verschijnt in het tabbladvoorbeeld en in het webmanifest.
- Bekijk het voorbeeld op 16, 32, 48 en 180 px, en in de nagebootste lichte en donkere browsertabbladen.
- Klik op Alle bestanden downloaden (sta meerdere downloads toe als je browser erom vraagt) of download losse bestanden op naam.
- Kopieer de HTML uit het vak en plak hem in de
<head>van je pagina's. Upload alle bestanden naar de hoofdmap van je site.
Formaten en bestanden van een favicon uitgelegd
| Bestand | Formaat | Gebruikt door |
|---|---|---|
| favicon.ico | 16, 32 en 48 px in één bestand | Alle browsers, Windows, tools die direct om /favicon.ico vragen |
| favicon-16x16.png | 16 x 16 | Browsertabbladen op standaardschermen |
| favicon-32x32.png | 32 x 32 | Tabbladen op schermen met hoge resolutie, snelkoppelingen in de taakbalk |
| apple-touch-icon.png | 180 x 180, ondoorzichtig vierkant | Beginscherm van iPhone en iPad en Safari |
| android-chrome-192x192.png | 192 x 192 | Snelkoppeling op het Android-beginscherm |
| android-chrome-512x512.png | 512 x 512 | Android-opstartscherm, geïnstalleerde webapps |
| site.webmanifest | JSON | Android en installeerbare webapps: naam, iconen, themakleur |
Het HTML-fragment linkt elk bestand en voegt een metatag theme-color toe met je achtergrondkleur, die sommige mobiele browsers gebruiken om de adresbalk te kleuren. Google Zoeken vraagt op het moment van schrijven om een vierkante favicon van minstens 48 x 48 px (een veelvoud van 48 is het best); de afbeelding van 48 px in de .ico en de grotere PNG's dekken dat.
De apple-touch-icon wordt altijd als volledig vierkant met je achtergrondkleur geëxporteerd, ook als je een cirkel of transparantie koos, omdat iOS zelf afgeronde hoeken toevoegt en transparante delen zwart vult.
Zo ontwerp je een favicon die leesbaar is op 16 pixels
- Eén krachtige vorm. Op 16 px heb je in totaal 256 pixels. Een volledig logo met woordmerk wordt een vlek; gebruik het symbool of de eerste letter.
- Hooguit twee letters. Eén letter is duidelijker. Gebruik de dikte Vet; Normaal en schrijfletters worden dun en wazig.
- Veel contrast. Wit op een sterke kleur, of een donkere kleur op wit, leest het best. Check zowel het lichte als het donkere tabbladvoorbeeld.
- Let op transparantie in de donkere modus. Een zwart logo op een transparante achtergrond verdwijnt op een donkere tabbladbalk. Ziet het donkere voorbeeld er leeg uit, zet transparantie dan uit of kies een lichtere kleur.
- Gebruik padding voor logo's. Met Passend voorkomt 6% tot 12% padding dat het logo de randen raakt, wat krap oogt.
- Emoji verschillen per apparaat. Een emoji-favicon wordt getekend met het emoji-lettertype van je apparaat, dus de bestanden die je downloadt, komen overeen met wat je ziet; een emoji die je op een Mac maakt, ziet er op elk apparaat uit als de Apple-versie.
Zo voeg je een favicon toe aan je website
Gewone HTML-site: upload alle zeven bestanden naar de hoofdmap (dezelfde map als je homepage) en plak de gemaakte HTML in de <head> van elke pagina of je gedeelde headertemplate.
WordPress: WordPress heeft een ingebouwde instelling Site-icoon onder Weergave, Customizer, Site-identiteit. Upload daar de PNG van 512 px en WordPress maakt zelf de formaten. Je kunt ook favicon.ico naar de hoofdmap van de site uploaden voor oudere tools.
Shopify, Wix, Squarespace en vergelijkbare bouwers: zoek naar “Favicon” of “Site-icoon” in de thema- of site-instellingen en upload de PNG van 512 px of 192 px.
Favicon niet zichtbaar? Browsers bewaren favicons lang in hun cache. Controleer of het bestand opent op yoursite.com/favicon.ico en probeer daarna een privévenster. Google Zoeken kan dagen tot weken nodig hebben om een nieuwe favicon op te pikken nadat je homepage opnieuw is gecrawld.
Favicongenerator versus er een maken in Canva of Photoshop
Je kunt een favicon ontwerpen in Canva, Figma of Photoshop, en voor een gedetailleerd merkteken is dat een goed begin. Die tools exporteren wel één PNG tegelijk, en de meeste kunnen geen .ico-bestand met meerdere formaten of het webmanifest schrijven. Een gangbare werkwijze is het symbool ontwerpen in je ontwerptool, een vierkante PNG of SVG exporteren en die in het tabblad Afbeelding hier slepen om in één keer alle formaten en de HTML te krijgen.
Sommige sites gebruiken ook een SVG-favicon, die met CSS van kleur kan wisselen voor de donkere modus. Deze tool exporteert geen SVG-favicons; de set PNG's en .ico die hij maakt, is de breedst ondersteunde optie.
Is de favicongenerator privé?
Ja. Je logo wordt in je browser gelezen en geschaald, en het .ico-bestand wordt daar ook samengesteld. Er wordt niets naar Biolinko geüpload, en je hebt geen account nodig.
Favicons en je link in bio-pagina
Is je belangrijkste plek op het web een link in bio-pagina in plaats van een volledige website, dan hoef je geen favicon te installeren: Biolinko-pagina's gebruiken je profielfoto als tabbladicoon en voegen de tags voor sociaal delen voor je toe. Een krachtig vierkant icoon dat je hier ontwerpt (download de PNG van 512 px) kan dus ook dienen als profielfoto, en werkt ook als highlight-cover of als logo op een deelafbeelding. Maak een gratis pagina om het te gebruiken.
Bijgewerkt op 8 oktober 2026