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
- Uploaden — Klik op "Bestand kiezen" en selecteer je logo (PNG of SVG, vierkant, 512×512 of groter).
- Achtergrond — Kies een achtergrondkleur als je logo transparantie heeft; die wordt ook als
theme-colorin de snippet gebruikt. - Groottes — Vink de gewenste groottes aan (favicon 16/32, Apple 180, PWA 192/512, enz.).
- Downloaden — Klik op een voorvertoning om die grootte als PNG te downloaden, of "Alles als ZIP downloaden" om alles in één keer te krijgen.
- 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.webmanifesttoe 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.