Wat er in favicons.zip zit
Upload één afbeelding en de generator maakt in je browser alle bestanden die een moderne website nodig heeft:
| Bestand | Formaat | Gebruikt door |
|---|---|---|
favicon.ico |
16, 32 en 48 px in één bestand | Browsertabbladen, bladwijzers, Windows en elke tool die om /favicon.ico vraagt |
favicon-16x16.png |
16×16 | Tabbladen op gewone schermen |
favicon-32x32.png |
32×32 | Tabbladen op schermen met hoge dichtheid, snelkoppelingen |
favicon-48x48.png |
48×48 | Google-zoekresultaten, snelkoppelingen op het bureaublad |
apple-touch-icon.png |
180×180 | "Zet op beginscherm" op iPhone en iPad |
android-chrome-192x192.png |
192×192 | Android-startscherm |
android-chrome-512x512.png |
512×512 | Sites die als app zijn geïnstalleerd (PWA) en hun opstartscherm |
site.webmanifest |
— | Vertelt Android/Chrome waar de twee grote iconen staan |
README-favicon.html |
— | De HTML-tags om te plakken |
Welke bronafbeelding het best werkt
- Vierkant, eenvoudig, krachtig. Op 16 px heb je in totaal 256 pixels. Een volledig logo met slogan wordt een vlek; één letter of symbool blijft leesbaar. Veel merken gebruiken een vereenvoudigd beeldmerk speciaal voor de favicon.
- Minstens 512×512. Het grootste icoon is 512 px, dus een kleinere bron wordt vergroot en oogt zacht. Een SVG-logo is ideaal: dat wordt in hoge resolutie getekend voordat het verkleind wordt.
- Transparante PNG of SVG. Transparantie blijft behouden in de
.icoen de kleine PNG's, zodat het icoon mooi staat op lichte en donkere browserthema's. - Niet vierkant? De afbeelding wordt zonder bijsnijden in het vierkant geplaatst, met transparante ruimte aan de zijkanten. Wil je het vierkant vullen, snijd haar dan eerst bij of maak een ronde versie met Rond bijsnijden.
De achtergrond van het Apple touch-icoon
iOS staat geen transparantie toe op beginschermiconen — transparante delen worden zwart. Daarom krijgt de apple-touch-icon.png van 180×180 altijd een effen achtergrond. Standaard is die wit; met het kleurveld naast het uploadvak stel je je huisstijlkleur in (de kleurkiezer kan die uit je logo halen). De andere formaten blijven transparant.
Waar je de bestanden neerzet
- Pak de ZIP uit en upload alle bestanden naar de hoofdmap van je site, zodat
https://jouwsite.nl/favicon.icohet icoon toont. - Plak de tags uit
README-favicon.htmlin de<head>van elke pagina (of in de headertemplate van je thema):
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
- Staat je site in een submap, pas de paden dan aan.
In WordPress regelt Weergave → Customizer → Site-identiteit → Site-pictogram dit met één afbeelding van 512×512 — gebruik android-chrome-512x512.png. Shopify, Wix en Squarespace hebben een vergelijkbaar "favicon"-veld.
Het meegeleverde site.webmanifest bevat alleen de iconen. Wil je dat bezoekers je site als app kunnen installeren, voeg dan name, short_name, theme_color, background_color en "display": "standalone" toe.
"Ik heb de favicon aangepast maar zie nog de oude"
Favicons worden hardnekkiger gecachet dan bijna alles op een site.
- Open
https://jouwsite.nl/favicon.icorechtstreeks en ververs geforceerd (Ctrl + F5, of Cmd + Shift + R op de Mac). - Voeg een versie toe aan de links, bijvoorbeeld
href="/favicon.ico?v=2", zodat browsers het als nieuw bestand zien. - Leeg de cache van je CDN of cacheplugin als je die gebruikt.
- Bladwijzers en snelkoppelingen op het beginscherm houden het oude icoon tot ze opnieuw worden aangemaakt.
- Google werkt het icoon in de zoekresultaten pas bij nadat je homepage opnieuw is gecrawld, wat dagen tot weken kan duren. Google wil een vierkant icoon met een zijde die een veelvoud van 48 px is — de PNG van 48×48 en de
.icovoldoen daaraan.
Verwante tools
- Haal de achtergrond van een foto weg voordat je er een icoon van maakt: Achtergrond verwijderen.
- Logo alleen als WebP? Zet het om naar PNG als je programma het niet opent.
- Een gewone afbeelding van 512×512 nodig voor een webshop of profiel? Verkleinen naar 512×512.