Startpagina / Design / Favicon- en app-icongenerator
Iconen en branding

Favicon- en app-icongenerator

Upload een logo, bekijk iconen in meerdere formaten, download PNG's en kopieer het HTML-fragment voor je site of PWA.

Geen bestand gekozen
Gebruik een vierkante PNG of SVG met voldoende resolutie (min. 512×512 aanbevolen).
Gebruikt als vulling en als theme-color in het voorgestelde HTML-fragment.
Selecteer welke groottes je wilt genereren. Klik op een icoon of label om die PNG te downloaden.

Icoonvoorvertoning

Klik op een icoon of label om die grootte als PNG te downloaden. Sla de bestanden op in je project (bijv. /assets/icons).

Deze generator draait volledig in je browser. Vergeet niet de gedownloade PNG's te uploaden en de paden in het fragment aan te passen aan je project.

Elk serieus project heeft een duidelijk favicon in het browsertabblad, een Apple touch-icoon voor iOS en app-iconen voor Android en PWA. Dit hulpmiddel helpt ze uit één afbeelding te genereren: upload een vierkant logo, kies groottes, download de PNG's en kopieer de HTML-snippet naar je site.

Waarom favicon en app-iconen ertoe doen

  • Favicon — het kleine icoon in het tabblad en in bladwijzers. Zonder oogt het tabblad generiek en is je merk minder herkenbaar.
  • Apple touch-icoon — gebruikt wanneer gebruikers je site aan het startscherm toevoegen op iPhone en iPad. Het juiste formaat (bijv. 180×180) zorgt voor een scherp icoon.
  • PWA-/Android-iconen — nodig voor "Toevoegen aan startscherm" en installatie. Typische groottes: 192×192 en 512×512.

Eén vierkante bronafbeelding kan dit allemaal leveren. De generator draait volledig in je browser: je logo verlaat je apparaat niet.

Aanbevolen bronafbeelding

Gebruik een vierkante afbeelding (PNG of SVG) van minstens 512×512 pixels. Hogere resolutie kan; het hulpmiddel schaalt naar beneden. Vermijd te kleine of uitgerekte afbeeldingen zodat de iconen scherp blijven op high-DPI-schermen.

Snel aan de slag

  1. Uploaden — Klik op "Bestand kiezen" en selecteer je logo (PNG of SVG, vierkant, 512×512 of groter).
  2. Achtergrond — Kies een achtergrondkleur als je logo transparantie heeft; die wordt ook als theme-color in de snippet gebruikt.
  3. Groottes — Vink de gewenste groottes aan (favicon 16/32, Apple 180, PWA 192/512, enz.).
  4. Downloaden — Klik op een voorvertoning om die grootte als PNG te downloaden, of "Alles als ZIP downloaden" om alles in één keer te krijgen.
  5. Snippet — Kopieer het HTML-blok en plak het in de <head> van je site. Upload de PNG's naar je server (bijv. /assets/icons/) en pas de paden in de snippet aan indien nodig.

Waar de bestanden neerzetten

Een veelgebruikte opzet:

  • Zet de favicon- en icon-PNG's in een map zoals /assets/icons/ of in de root.
  • Werk de snippet bij zodat de href-waarden naar die paden wijzen (bijv. /assets/icons/favicon-32x32.png).
  • Voeg voor PWA een site.webmanifest toe met dezelfde paden naar de 192×192- en 512×512-iconen.

Samenvatting

De favicon- en app-icongenerator laat je van één logo naar alle benodigde groottes en een kant-en-klare snippet voor de <head> gaan. Gebruik een vierkante afbeelding in goede resolutie, download de PNG's en voeg de snippet in je project in.

  1. Upload een vierkante afbeelding (PNG of SVG, min. 512×512 aanbevolen).
  2. Kies achtergrondkleur en welke icoongroottes je wilt genereren (favicon, Apple touch, PWA).
  3. Klik op een voorvertoning om elke PNG te downloaden en kopieer het HTML-fragment in de <head> van je site.

Veelgestelde vragen

Gebruik minstens 512×512 pixels voor de beste kwaliteit. Vierkante afbeeldingen werken het best; de tool schaalt en centreert je logo.

Standaard favicons: 16×16 en 32×32. Apple: 180×180. PWA: 192×192 en 512×512. Ons gegenereerde fragment bevat deze.

Nee. Alles draait in je browser. Je logo verlaat je apparaat niet.

Gerelateerde tools

JSON Formatter en Validator Online audiotrimmer PDF comprimeren Stijlvolle QR-codegenerator

Deze tool wordt uitsluitend aangeboden voor persoonlijk en educatief gebruik. Wij hosten of slaan geen gebruikersinhoud of mediabestanden op onze servers op. Alle verwerking vindt lokaal plaats in uw browser. Wij zijn niet verbonden met of goedgekeurd door enig genoemd sociaal netwerk, platform of bedrijf. Gebruik deze service naar eigen inzicht en in overeenstemming met de gebruiksvoorwaarden van het betreffende platform.