Gratis favicon-generator

Bron

Dikte

Stijl

Vorm

Voorbeeld

16 px
32 px
48 px
180 px
192 px
512 px

Bevat favicon.ico (16, 32 en 48 px), PNG's van 16, 32, 180 (Apple), 192 en 512 (Android) en site.webmanifest.

Code om in de <head> van je site te plakken

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Zet de bestanden uit de ZIP in de hoofdmap van je site en plak daarna deze code.

Alles wordt in je browser gemaakt: je logo wordt nooit geüpload.

Hoe gebruik je deze rekenhulp?

1. Kies een bron: een of twee letters (of een emoji), of je logo
2. Pas de vorm, kleuren en marge aan en bekijk direct het voorbeeld
3. Download het ZIP-pakket met alle formaten
4. Zet de bestanden in de hoofdmap van je site en plak de HTML-code in de <head>

Snel antwoord

Welke faviconformaten heb je nodig?

Zorg voor een favicon.ico met 16, 32 en 48 px voor browsers, een Apple touch icon van 180 × 180 px voor iPhone en iPad, en PNG's van 192 en 512 px voor Android en installeerbare apps. Voorbeeld: zet het pakket in de hoofdmap (jouwsite.nl/favicon.ico) en plak de 5 regels code in de <head>.

BestandFormaatGebruikt door
favicon.ico16, 32, 48 pxTabbladen, bladwijzers, Google
favicon-32x32.png32 pxRecente browsers
apple-touch-icon.png180 pxiPhone, iPad
android-chrome-192x192.png (Android)192 pxAndroid
android-chrome-512x512.png (PWA)512 pxOpstartscherm, PWA

Over de Favicon-generator

Wat is het?

De favicongenerator maakt het kleine icoon dat in browsertabbladen, bladwijzers en op beginschermen van telefoons verschijnt. Begin met een initiaal, een afkorting, een emoji of je logo, pas vorm en kleuren aan en download een pakket dat klaar is om te installeren.

Waarom gebruiken?

Een site zonder favicon toont een standaardicoon: dat oogt minder professioneel en is lastig terug te vinden tussen tientallen tabbladen. Google toont de favicon ook naast je site in de mobiele zoekresultaten, wat opvalt en vertrouwen wekt.

Hoe werkt het?

Elk formaat wordt direct op zijn eigen resolutie getekend (16, 32, 48, 180, 192 en 512 px) zodat het scherp blijft, in plaats van verkleind uit één grote afbeelding. Het bestand favicon.ico bundelt de formaten 16, 32 en 48 px als PNG-afbeeldingen, een formaat dat elke browser herkent. Het Apple-icoon is altijd een ondoorzichtig vierkant, omdat iOS de hoeken zelf afrondt. Alles wordt in je browser berekend.

Tips

  • Houd het simpel: op 16 px leest een of twee vette letters veel beter dan een gedetailleerd logo
  • Kies een sterk contrast tussen tekst en achtergrond zodat het icoon zichtbaar blijft in lichte en donkere modus
  • Begin bij een logo met een vierkante versie of alleen het symbool, zonder merknaam
  • Leeg de cache of test in een privévenster als de oude favicon na livegang nog te zien is
  • Google vraagt om een vierkante favicon van minstens 48 px, bereikbaar op het adres uit de HTML-code
Zet deze tool op je websiteGratisKopieer deze code in je website of blog: de tool verschijnt direct op je pagina, gratis en zonder registratie.Alle insluitbare tools

Gerelateerde tools