Een Favicon-set Die Overal Werkt in 2026
Zes formaten, één .ico, één manifest — alles wat je daadwerkelijk nodig hebt om een favicon uit te rollen die er correct uitziet in elke browser, iOS-startscherm en Windows-taakbalk in 2026.
Favicons zien er triviaal uit. Ship er één en honderd randgevallen verschijnen: het iOS-startschermicoon is wazig, het Android Chrome-tabblad is de verkeerde kleur, Windows-prikborden tonen een fuzzy 16×16. Deze gids snijdt door de chaos en behandelt precies wat je in 2026 nodig hebt — niet meer, niet minder.
De Minimale Levensvaarbare Set
Zes assets beslaan elk oppervlak dat je site's icoon toont:
favicon.ico— multi-size container met 16×16, 32×32, 48×48 erin (oudere browsers, Windows Explorer, gespelde tabbladen).favicon-16x16.png,favicon-32x32.png— moderne browsertabbladen.apple-touch-icon.png(180×180) — iOS-startscherm, Safari-leeslijst.android-chrome-192x192.png,android-chrome-512x512.png— Android-startscherm, PWA-installatieaanwijzingen.site.webmanifest— de PWA-configuratie die naar de Android-iconen verwijst en de themakleur definieert.
Dat is alles. Alles andere (Safari pinned tab SVG, oude Apple touch-varianten, Windows-tegelafbeeldingen) is erfenis. Moderne browsers vallen aangenaam terug op de 192 of 512 PNG.
Waarom .ico Nog Steeds in 2026 Wordt Gebruikt
Een .ico-bestand is een binaire container die meerdere PNG-afbeeldingen in verschillende formaten kan bevatten. Wanneer een browser om /favicon.ico vraagt (wat sommige standaard nog steeds doen), krijgt het alle drie de formaten in één aanvraag. De renderer kiest degene die het beste past voor het huidige oppervlak — een 48×48 voor Windows Explorer, een 16×16 voor een browsertabblad.
Een PNG hernoemd naar .ico bevat slechts één formaat. Het werkt meestal omdat browsers tolerant zijn, maar Windows Explorer en sommige e-mailclients geven het weer wazig of weigeren het helemaal weer te geven. Ship een echte .ico als je consistentie wilt.
Wat site.webmanifest Doet
Wanneer een gebruiker je site aan hun Android-startscherm toevoegt of deze als PWA installeert, leest de browser site.webmanifest om te weten hoe de geïnstalleerde app er uit moet zien. Het definieert:
name/short_name— het label onder het icoon.icons— welke PNG's op welk formaat moeten worden gebruikt.theme_color— kleur van de statusbalk wanneer de app open is.background_color— achtergrond van het startscherm tijdens het starten.display— meestalstandalonezodat de app zonder browserrand opent.
Zonder een manifest valt Android terug op het apple-touch-icon en toont je site in een browservenster. Met één ziet het er uit als een native app.
Het HTML-fragment
Elk bestand gaat in je webroot. Elke site heeft dit blok in <head> nodig:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">
<meta name="theme-color" content="#YOUR_HEX">Ontwerpen voor 16×16
Je prachtige gedetailleerde logo sterft op 16 pixels. De regels voor het maken van een favicon die duidelijk leesbaar is op die grootte:
- Één vorm. Een cirkel, een vierkant of een sterk monogram. Vermijd samengestelde vormen.
- Hoog contrast. De voorgrond en achtergrond moeten minstens WCAG AA gescheiden zijn. Subtiele gradiënten verdwijnen.
- Veilige marge. Laat 10–20% vulling. Browsers voegen vaak hun eigen 1px-rand toe.
- Tekst? Een enkele vetgedrukte letter werkt beter dan een volledig woord op 16px.
De aukimi Favicon Generator produceert alle zes bestanden en het HTML-fragment uit één afbeelding of een letter in minder dan 30 seconden. Het genereert een echte multi-size .ico (volgens de Microsoft ICONDIR-spec), niet een hernoemde PNG. Upload, kies je formaten, download een zip-loze bundel, plak het fragment — klaar.
Veelgemaakte Fouten
.icovan CDN serveren zonder cache-headers. Browsers cachen favicons agressief. Gebruik een versioned URL (?v=2) om een vernieuwing na een redesign af te dwingen.- Verschillende iconen per subdomein. Een enkele
favicon.icoop het apex is meestal wat gebruikers verwachten — fragmenteer je identiteit niet. - Het
theme-color-meta vergeten. Mobile Chrome kleurt de browserkant aan om aan deze waarde te voldoen. Het overslaan laat je achter met de standaard grijs.
Een goed favicon is saai op de beste manier — gebruikers merken het op wanneer het ontbreekt of fout is, nooit wanneer het correct is. Zorg dat de zes bestanden worden geüpload en ga verder.
Heeft dit artikel je geholpen?
Gerelateerde Artikelen
De creatieve stack is zojuist ingestort: één week AI-tools, eind april 2026
Tussen 27 april en 4 mei 2026 hebben Adobe, Luma, Novi, fal, Figma, Canva, HeyGen en Anthropic allemaal dezelfde drempel overschreden in acht dagen. Dit is wat er uitkwam, wat het betekent, en waar het browsergebaseerde creatieve suites laat die alles proberen in te passen.
AI-muziek en SFX in 2026: Wat werkt echt in indie game audio
Drie jaar geleden betekende indie game audio ofwel royaltyvrije libraries licenseren (goedkoop, generiek, elk spel klinkt hetzelfde) ofwel een componist inhuren (goed, duur). In 2026 genereert AI scores die je kunt uitbrengen. Hier staat welke tools daadwerkelijk werken — en waar een menselijke componist nog steeds wint.
AI Mesh-generering in 2026: Wat verscheept werkelijk in Game Pipelines
Image-to-3D ging van "enge demo" naar "verzonden in indie-projecten" in achttien maanden. Dit is wat Tripo, Meshy, Rodin en Hyper3D werkelijk doen in productie — en waar de 3D-kunstenaar nog steeds elke keer wint.