Favicon-generator
Drop een logo, krijg een compleet favicon-pakket — ICO, PNG's, Apple touch, PWA en een OG-afbeelding, klaar om te shippen.
Wat doet deze tool
Neemt één bronafbeelding — meestal een vierkant logo als SVG of PNG — en produceert elke favicon-variant die een moderne site nodig heeft, verpakt als één ZIP. De output omvat een multi-resolutie favicon.ico (16, 32 en 48 pixels) voor oudere browsers en de onvermijdelijke /favicon.ico-aanvraag, losstaande PNG's op 16, 32, 192 en 512, een Apple touch icon op 180 voor installaties op het iOS-startscherm en een Open Graph-afbeelding van 1200 × 630 voor link-previews op Twitter, Facebook, Slack, Discord en LinkedIn. De ZIP bevat ook direct te plakken HTML voor de <head> en een werkende manifest.json voor Progressive Web App-installaties — zet de bestanden in de root van je site, plak het snippet, vervang je naam en themakleur, en je bent klaar. Alles draait lokaal op je apparaat — je logo verlaat de browser nooit, gaat nooit naar onze servers en wordt niet opgeslagen, geïndexeerd, gelogd of gedeeld. Er is geen aanmelding, geen watermerk, geen e-mailmuur. Kies een transparante, witte of aangepaste achtergrond, pas de padding aan zodat het logo niet tegen de randen botst, en bekijk elk formaat live voordat je downloadt.
Hoe favicons genereren
- Drop je logo — Een vierkante SVG of PNG werkt het beste. Niet-vierkante bronnen worden automatisch in een letterbox geplaatst.
- Stel achtergrond en padding in — Transparant voor iconen die al een achtergrond bevatten. Wit of een merkkleur voor iconen die dat niet hebben. Padding geeft wat ademruimte.
- Genereer — Elk formaat wordt lokaal gerenderd en in één ZIP verpakt. De klassieke
favicon.icowordt byte-perfect gebouwd met ingebedde 16/32/48 PNG-payloads, zoals modern Windows verwacht. - Plak de snippets — Zet de bestanden in de root van je site, plak het HTML-snippet in de
<head>en vervang de placeholderwaarden in manifest.json.
Hoe het pakket wordt opgebouwd
Elke PNG-variant wordt vers gerenderd op zijn doelgrootte, met behoud van de aspect ratio van je bron en padding rond de rand zodat een vierkant logo nooit tegen het kader botst. De klassieke favicon.ico bundelt drie PNG-gecodeerde formaten (16, 32 en 48 pixels) in één bestand — een formaat dat Windows al meer dan tien jaar ondersteunt — en blijft in totaal onder de 5 KB, dus laadt direct en voegt geen meetbaar gewicht toe aan je site. De Open Graph-preview-afbeelding is een canvas van 1200 × 630 met het logo gecentreerd op 70% van de korte as, op de achtergrond die je hebt gekozen (of wit als je transparant koos — link-preview-cards hebben altijd een vaste vulling nodig, anders verdwijnt het icoon op donkere social-media-thema's). Apple touch icons worden gerenderd op 180 × 180, wat iOS voor elke installatiecontext op- of afschaalt. PWA-iconen worden geproduceerd op 192 en 512, de twee formaten waar Android Chrome naar zoekt in manifest.json.
Bestanden in de ZIP
favicon.ico met 16/32/48 PNG-payloads — gebruikt door elk browser-tabblad. favicon-16x16.png en favicon-32x32.png voor moderne browsers die liever PNG hebben. apple-touch-icon.png op 180 × 180 — getoond op het iOS-startscherm. favicon-192x192.png en favicon-512x512.png voor Android Chrome en PWA-installaties. og-image.png op 1200 × 630 — gebruikt voor link-previews op Twitter, Facebook, Slack en Discord. manifest.json die naar de PWA-iconen verwijst. snippet.html met elke <link>- en <meta>-tag die je moet plakken.
Veelgestelde vragen
Wordt mijn logo geüpload?
Heb ik echt een favicon.ico nodig?
/favicon.ico. Moderne browsers geven de voorkeur aan de PNG-declaraties uit het HTML-snippet, maar het hebben van de .ico in de root kost je 5 KB en voorkomt 404's in je access logs.