Favicon-generator voor initialen en emoji
Maak een eenvoudige, herkenbare favicon zonder eerst een afbeelding te hoeven voorbereiden. Voer één of twee initialen in of kies één emoji en pas daarna de vorm en achtergrondkleur aan. Bij initialen kun je ook de tekenkleur en letterstijl kiezen; emoji behouden de eigen weergave van de browser. De voorvertoning van 512 px wordt in je browser bijgewerkt. De uiteindelijke download bevat kleine browsericonen, mobiele iconen en configuratiebestanden om het ontwerp aan een website toe te voegen. Er wordt niets geüpload en er wordt geen AI gebruikt.
Zo maak je een favicon
-
1
Kies de inhoud van het icoon
Voer één of twee initialen in voor een compact letterbeeld of gebruik één emoji als ontwerp.
-
2
Geef het ontwerp vorm
Kies een vierkant, afgerond vierkant of cirkel en stel de achtergrondkleur in. Voor initialen kun je ook de tekenkleur en letterstijl aanpassen; emoji houden hun eigen browserweergave.
-
3
Controleer de voorvertoning
Bekijk de voorvertoning van 512 px en controleer ook of het ontwerp duidelijk blijft wanneer het wordt verkleind tot 16 px in een browsertabblad.
-
4
Download en installeer
Download het lokaal gemaakte favicon-pakket, voeg de bestanden aan je site toe en plak of bewerk het meegeleverde fragment voor de `<head>`.
Wat er in het favicon-pakket zit
Eén favicon-ontwerp moet op verschillende plekken werken, van een piepklein browsertabblad tot het startscherm van een mobiele telefoon. De generator rendert hetzelfde ontwerp in de praktische maten hieronder en verpakt alle bestanden lokaal.
| Bestand in het pakket | Maat of inhoud | Bedoeld gebruik |
|---|---|---|
favicon.ico |
Afbeeldingen van 16, 32 en 48 px | Browsertabbladen, bladwijzers en software die nog om een ICO-bestand vraagt |
favicon-16x16.png |
16 × 16 px | Kleine favicon voor browsers |
favicon-32x32.png |
32 × 32 px | Standaardfavicon voor browsers |
apple-touch-icon.png |
180 × 180 px | Apple-touchicoon |
android-chrome-192x192.png |
192 × 192 px | Webapp-icoon voor kleinere Android-weergaven |
android-chrome-512x512.png |
512 × 512 px | Groter webapp-icoon |
mstile-150x150.png |
150 × 150 px | Afbeelding voor Microsoft-tegels |
site.webmanifest |
JSON-manifest | Verwijst naar de Android-iconen voor browsers die een webapp-manifest gebruiken |
browserconfig.xml |
XML-configuratie | Verwijst naar de afbeelding en kleur van de Microsoft-tegel |
favicon-head.html |
HTML-fragment | Kant-en-klare verwijzingen naar iconen, manifest en browserconfiguratie |
Maak een favicon die ook bij 16 px werkt
Een favicon is geen miniatuurposter. Fijne details, lange woorden en subtiele kleurverschillen verdwijnen snel op het formaat van een browsertabblad. Eén duidelijke initiaal, een kort teken van twee letters of een eenvoudige emoji is meestal herkenbaarder dan een ingewikkelde compositie.
- Gebruik bij initialen een sterk contrast tussen de tekens en de achtergrond.
- Laat ruimte rond letters en emoji, zodat platformmaskers het ontwerp niet krap maken.
- Vergelijk vierkante, afgerond vierkante en ronde versies voordat je de duidelijkste vorm kiest.
- Beoordeel naast de voorvertoning van 512 px ook de kleine geëxporteerde iconen. Een ontwerp dat op volledig formaat fraai oogt, kan bij 16 px onduidelijk worden.
- Test de geïnstalleerde favicon in meerdere browsers en tegen zowel een lichte als een donkere browserinterface.
Voeg de gegenereerde bestanden aan je site toe
Behoud de gegenereerde bestandsnamen en plaats de bestanden waar het meegeleverde fragment voor de <head> ze verwacht, meestal in de hoofdmap van de site. Plak het fragment in de <head> van elke paginasjabloon. Als je framework statische bestanden vanuit een andere map of via een content delivery network aanbiedt, werk dan vóór publicatie de paden in het fragment, het manifest en de browserconfiguratie bij.
De meegeleverde bestanden bevatten verwijzingen naar de iconen, maar maken een website op zichzelf nog niet installeerbaar als progressive web app. Daarvoor kunnen extra manifestvelden, beveiligde hosting en browserspecifieke voorwaarden nodig zijn.
Veelgestelde vragen
Ja. Voer één of twee initialen in en kies daarna de vorm, achtergrondkleur, voorgrondkleur en letterstijl. De tekst is bewust kort, omdat die op kleine favicon-formaten beter leesbaar blijft.
Ja. De emoji behoudt de eigen weergave van de browser, terwijl je de vorm en achtergrondkleur kunt aanpassen. Controleer de voorvertoning vóór het downloaden, want de weergave verschilt per systeem en browser en complexe emoji zijn niet overal beschikbaar.
Ja. Het pakket bevat één favicon.ico met afbeeldingen van 16, 32 en 48 px, naast afzonderlijke PNG-favicons van 16 en 32 px en grotere iconen voor Apple, Android en Microsoft.
Favicon-generator maakt een nieuw ontwerp van initialen, korte tekst of één emoji. Favicon-converter is de afzonderlijke tool die een bestaande PNG-, JPEG- of WebP-afbeelding omzet in favicon-bestanden.
Nee. De tekst of emoji, het renderen van de voorvertoning en het maken van het pakket blijven in je browser. De tool uploadt het ontwerp niet en haalt geen website op.
Nee. De generator past alleen je keuzes toe en gebruikt geen AI. Hij kan ook niet bepalen of de initialen, een emoji, de kleuren of het voltooide ontwerp strijdig zijn met een merk of de rechten van een andere partij. Controleer die rechten voordat je de favicon commercieel gebruikt.
Browsers bewaren favicons vaak in de cache. Controleer of de gegenereerde bestanden en verwijzingen in de <head> op de verwachte paden zijn gepubliceerd. Wis daarna de browsercache of test in een privévenster. Sommige zoekmachines en platforms vernieuwen iconen volgens hun eigen planning.
Gerelateerde tools
WebP naar PNG
Converteer WebP-afbeeldingen naar PNG met behoud van transparantie en pixelnauwkeurige kwaliteit voor bewerken, afdrukken en oudere ontwerptools.
GIF-maker
Zet een reeks afbeeldingen of een korte video om in een geanimeerde GIF. Stel beeldsnelheid, herhalingen en afmetingen in voor het exporteren.
Barcodegenerator
Maak scanbare 1D-barcodes in Code 128, Code 39, EAN-13, UPC-A, ITF-14 en Codabar. Exporteer als PNG, SVG of PDF voor drukwerk.
Bulk afbeeldingsresizer
Sleep meerdere afbeeldingen naar binnen, pas ze in of rek ze naar een doelgrootte en exporteer JPG, PNG of WebP in één ZIP. De verwerking blijft in je browser.
Foto-editor
Browsergebaseerde foto-editor met bijsnijden, draaien, helderheid, contrast, verzadiging, filters, tekstoverlay en export naar JPG, PNG of WebP.
Comprimeer GIF
Verklein een geanimeerde GIF in je browser door de afmetingen te schalen, minder frames te bewaren en de encodeerkwaliteit aan te passen. Bekijk de lus voor je downloadt.