1. Voeg een afbeelding toe
Sleep een bestand naar het aangewezen gebied of selecteer een afbeelding van uw apparaat. Ondersteunde formaten: PNG, JPG, SVG. Aanbevolen formaat: min. 512×512 pixels.
Maak favicon.ico voor uw website vanuit één afbeelding
Genereer favicon.ico en een complete set PNG-pictogrammen voor uw website vanuit één afbeelding. Alle verwerking vindt lokaal in de browser plaats.
Loading tool editor...
Deze tool werkt op een groter scherm
Om deze tool comfortabel te gebruiken, open het op een laptop, desktopcomputer of tablet in landschapsmodus.
Tip
Als u een tablet gebruikt, schakel deze dan over naar landschapsmodus - wanneer de vensterbreedte groot genoeg is, wordt de tool automatisch geladen.
Wat is een favicon en waarom zou u er een moeten hebben?
Een favicon is een klein pictogram dat op het browsertabblad verschijnt naast de paginatitel. U ziet het ook in bladwijzers, browsegeschiedenis en op het startscherm van de telefoon wanneer iemand de site als snelkoppeling toevoegt.
Deze kleine afbeelding vervult een belangrijke functie - het helpt gebruikers een site snel te herkennen tussen vele open tabbladen. Wanneer iemand een dozijn tabbladen open heeft in de browser, is het favicon vaak het enige zichtbare element dat de site identificeert.
De generator maakt een complete pictogrammenset: een klassiek favicon.ico-bestand voor browsers, PNG-pictogrammen in verschillende formaten en een apple-touch-icon voor Apple-apparaten. Als u een webapp (PWA) bouwt, kunt u ook 192x192- en 512x512-pictogrammen genereren samen met een manifestbestand.
Hoe een favicon te maken in 3 stappen
Het genereren van een favicon duurt slechts enkele seconden:
2. Kies formaten
Selecteer de pictogramformaten die u nodig heeft. Voor een reguliere website: favicon.ico, 32×32 en 180×180. Voor PWA voegt u 192×192 en 512×512 toe.3. Download bestanden
Na het genereren downloadt u alle bestanden als ZIP of elk pictogram apart. Onder de tool vindt u instructies over hoe u het favicon aan uw site toevoegt.
Welke pictogramformaten genereert de tool?
Elk formaat heeft zijn toepassing:
favicon.ico (32×32)
Klassiek formaat herkend door alle browsers. Verschijnt op het browsertabblad.
16×16 en 32×32 PNG
Standaardformaten voor moderne browsers. Verschijnen op tabbladen en in bladwijzers.
180×180 PNG (apple-touch-icon)
Pictogram voor Apple-apparaten (iPhone, iPad). Verschijnt wanneer iemand de site aan het startscherm toevoegt.
192×192 en 512×512 PNG
Pictogrammen voor webapps (PWA). Vereist door het manifest en gebruikt in app stores.
Als u geen PWA bouwt, heeft u alleen nodig: favicon.ico, 32×32 PNG en 180×180 PNG. Deze drie bestanden dekken de meeste toepassingen.
Wat maakt de favicon-generator bijzonder?
Privacy - bestanden verlaten uw computer niet
Alle bewerkingen worden lokaal in de browser uitgevoerd. De afbeelding wordt niet naar een server gestuurd. Na het sluiten van de pagina worden alle gegevens gewist.Complete set op één plek
Favicon.ico, PNG-pictogrammen, apple-touch-icon, PWA-pictogrammen en manifest - alles vanuit één afbeelding, in één tool.PNG-, JPG- en SVG-ondersteuning
U kunt een logo in elk formaat gebruiken. Als u SVG heeft - pictogrammen zullen scherp zijn in alle formaten.Klaar voor website en PWA
De tool genereert een manifest.json-bestand voor webapps. Hieronder vindt u instructies voor integratie.
Hoe de favicon-generator te gebruiken
Het genereren van een favicon bestaat uit een paar eenvoudige stappen:
1. Voeg bronafbeelding toe
Sleep een bestand naar het aangewezen gebied of selecteer een afbeelding van uw apparaat. Ondersteunde formaten: PNG, JPG, SVG. Een eenvoudig logo of pictogram van minimaal 512×512 pixels werkt het beste.2. Kies pictogramformaten
Selecteer welke pictogramformaten u nodig heeft. U kunt alles selecteren of slechts enkele. Voor een reguliere website: favicon.ico, 32×32 en 180×180.3. Configureer generatieopties
Stel extra opties in: achtergrond (transparant of gekozen kleur), manifest (PWA-configuratiebestand) en automatisch downloaden.4. Genereer en download bestanden
Na het starten van de generatie verwerkt de tool de afbeelding lokaal - niets wordt naar een server gestuurd. Download alle bestanden als ZIP-archief of individuele pictogrammen apart.
PNG-formaten
16×1632×32180×180
Transparante achtergrond (PNG/ICO)
Generatieopties - wat doet elke optie?
Achtergrond (transparant of kleur)
Standaard behoudt de generator transparantie. U kunt ook een specifieke achtergrondkleur kiezen.
Genereer manifest (site.webmanifest)
Een JSON-bestand voor webapps (PWA). Als u geen PWA bouwt, is deze optie niet nodig.
Hoe gegenereerde bestanden te downloaden
Na het genereren van pictogrammen heeft u meerdere downloadopties:
Download alles als ZIP
De knop "Download alles" pakt alle gegenereerde bestanden in een enkel ZIP-archief. Dit is de handigste optie wanneer u de complete pictogrammenset nodig heeft.Download individuele bestanden
Elk gegenereerd pictogram heeft een eigen downloadknop - u kunt een enkel bestand downloaden zonder de hele set te downloaden. Handig wanneer slechts één formaat moet worden bijgewerkt.
Waar en hoe een favicon toe te voegen
WordPress
De meeste WordPress-thema's hebben een ingebouwde optie voor het instellen van het sitepictogram. U vindt het in het beheerpaneel:
Weergave → Customizer → Site-identiteit → Sitepictogram
Upload daar het 512×512-bestand - WordPress genereert automatisch kleinere formaten. Voor volledige controle over pictogrammen kunt u bestanden ook rechtstreeks naar de hoofdmap uploaden via FTP.
Welke bronafbeelding werkt het beste?
Een favicon is een zeer kleine afbeelding - slechts 16×16 pixels. Niet elke afbeelding werkt goed als bron:
Eenvoudige vormen en leesbare symbolen
Eenvoudige logo's, enkele letters of symbolen werken het beste. Vermijd complexe afbeeldingen met veel details.Vierkant formaat
Een favicon is vierkant. Als de bronafbeelding een andere verhouding dan 1:1 heeft, wordt deze bijgesneden of uitgerekt.Groot genoeg formaat
We raden een bronafbeelding van minimaal 512×512 pixels aan. Kleinere afbeeldingen worden opgeschaald.SVG-formaat als ideale bron
SVG schaalt zonder kwaliteitsverlies, dus pictogrammen in alle formaten zullen scherp zijn.Kleuren met hoog contrast
Een favicon moet zichtbaar zijn op verschillende achtergronden (lichte tabbladen, donkere modus). Kies kleuren die leesbaar blijven.
Favicon in Google-zoekresultaten
Google toont favicons naast de URL van de website in de zoekresultaten. Mobiele zoekresultaten tonen favicons sinds 2019. Desktopresultaten volgen sinds januari 2020. Het favicon is daarmee een zichtbaar merkelement in elke Google-zoekopdracht.
Google stelt specifieke eisen aan de weergave van favicons. Het pictogram moet minimaal 48×48 pixels meten. Het moet vierkant zijn. De afbeelding moet duidelijk zichtbaar blijven op een witte achtergrond. Google wijst pictogrammen met ongepaste of lege inhoud af.
De Googlebot crawlt en indexeert favicons onafhankelijk van de pagina-inhoud. Het bijwerken van het favicon in de zoekresultaten kan enkele dagen tot weken duren. Het favicon-bestand mag niet geblokkeerd zijn in robots.txt - anders kan Google de nieuwe versie niet ophalen.
Bing toont eveneens favicons in zijn zoekresultaten. DuckDuckGo geeft websitepictogrammen weer naast elke resultaatlink. Een complete set favicons zorgt voor een consistente merkuitstraling in alle grote zoekmachines. Gebruikers herkennen vertrouwde favicons sneller, wat bijdraagt aan een hoger klikpercentage.
Favicon en merkidentiteit in de Benelux
Visuele consistentie tussen het favicon en het logo versterkt de merkherkenning in browsertabbladen, bladwijzers en op het startscherm van mobiele apparaten. Wanneer een gebruiker tien of meer tabbladen geopend heeft, blijft het favicon het enige zichtbare element dat de website identificeert.
In Nederland zijn Bol.com en Coolblue voorbeelden van sterke visuele merkidentiteit - hun favicons zijn direct herkenbaar. Webshops op Lightspeed, CCV Shop en WooCommerce kunnen het favicon instellen in de thema-instellingen. In België bieden Shopify en WooCommerce vergelijkbare configuratiemogelijkheden.
Het Digitoegankelijk.nl-kader (gebaseerd op WCAG 2.1) vereist voldoende contrast voor visuele elementen op websites van publieke organisaties. Het favicon moet leesbaar zijn in zowel de lichte als de donkere modus. Contrastrijke kleuren en eenvoudige vormen voldoen betrouwbaar aan deze eis.
Zakelijke dienstverleners - van advocatenkantoren tot tandartspraktijken - bouwen vertrouwen op vanaf het niveau van het pictogram in het browsertabblad. Het ontbreken van een favicon of het standaard browserpictogram kan wijzen op een gebrek aan professionaliteit.
Favicon voor PWA en mobiele apparaten
Progressive Web Apps vereisen extra pictogrammen naast het standaard favicon. Het manifest.json-bestand moet een pictogrammenarray bevatten met afmetingen van 192×192 en 512×512 pixels in PNG-formaat.
Maskable icons zijn een speciaal type pictogram voor Android-apparaten. Het besturingssysteem knipt maskable icons bij tot verschillende vormen - cirkels, afgeronde vierkanten of druppels. De veilige zone beslaat de binnenste 80 % van het beeldoppervlak. Alle essentiële grafische elementen moeten binnen deze zone vallen om bijsnijden te voorkomen.
Apple vereist een apart apple-touch-icon-bestand van 180×180 pixels. Dit bestand moet gedeclareerd worden in de head-sectie van de HTML - iOS leest het niet uit het manifestbestand.
PWA's groeien in de Benelux. Banken zoals ING en Rabobank en retailers bieden app-achtige ervaringen via de browser. De PWA-technologie maakt snelle toegang vanaf het startscherm van de telefoon mogelijk zonder installatie via een app store.
De Lighthouse-audit in de Chrome DevTools controleert de aanwezigheid en geldigheid van het favicon en de PWA-pictogrammen. Een ontbrekend of ongeldig favicon genereert een waarschuwing in de PWA-categorie van de audit.
Veelgestelde vragen over de favicon-generator
Welk formaat moet de bronafbeelding hebben voor het genereren van favicons?
Het aanbevolen formaat is minimaal 512×512 pixels in vierkant formaat (1:1). Met zo'n bron zullen pictogrammen in alle formaten scherp en leesbaar zijn. Als u een logo in SVG-formaat heeft - gebruik dat, want vectorafbeeldingen schalen zonder kwaliteitsverlies.
Kan ik alleen favicon.ico genereren zonder de andere pictogrammen?
Ja. Voor het genereren kunt u precies selecteren welke formaten u nodig heeft - bijv. alleen favicon.ico of alleen bepaalde PNG-formaten.
Welke afbeeldingsformaten ondersteunt de favicon-generator?
De generator accepteert afbeeldingen in PNG-, JPG- en SVG-formaat. Als uitvoer genereert het een favicon.ico-bestand en PNG-pictogrammen in geselecteerde formaten, klaar om naar uw website te uploaden.
Beïnvloedt een favicon de Google-zoekpositie?
Niet direct - favicon is geen rankingfactor. Het beïnvloedt echter indirect de merkherkenning: een site met een professioneel pictogram is makkelijker te identificeren tussen vele open tabbladen, wat zich kan vertalen in een hogere klikfrequentie in zoekresultaten.
Welke pictogramformaten zijn essentieel voor een reguliere website?
Voor een typische website zijn drie bestanden voldoende: favicon.ico (32×32), een 32×32 PNG-pictogram en apple-touch-icon 180×180. Als de site als webapp (PWA) moet werken, heeft u ook 192×192- en 512×512-pictogrammen plus een manifestbestand nodig.
Wat is een site.webmanifest-bestand en wanneer is het nodig?
Het is een configuratiebestand voor webapps (PWA) dat informatie bevat over het pictogram, de naam en kleuren van de applicatie. Het is vereist wanneer de site als app op het startscherm van de telefoon moet werken. Voor reguliere websites is het niet nodig.
Wordt het favicon in alle browsers hetzelfde weergegeven?
De meeste moderne browsers (Chrome, Firefox, Edge, Safari) herkennen het favicon.ico-bestand en PNG-pictogrammen. Verschillen kunnen optreden in het weergegeven pictogramformaat - Chrome geeft de voorkeur aan PNG 32×32, terwijl Safari op iOS apple-touch-icon 180×180 gebruikt. Voor de beste compatibiliteit raden we aan de complete set formaten te genereren.
Waarom verandert het favicon niet na het uploaden van een nieuw bestand?
Browsers cachen favicons agressief. Na het uploaden van een nieuw pictogram, probeer de browsercache te wissen of een versieparameter aan het bestandspad toe te voegen (bijv. /favicon.ico?v=2). De wijziging kan enkele uren duren voordat deze zichtbaar wordt.
Help ons onze tools te verbeteren
Heeft u een idee voor een nieuwe functie, een bug gevonden of wilt u een andere tool voorstellen die uw werk gemakkelijker zou maken? Schrijf ons – we reageren binnen 24 uur.