Beste favicon-maten voor websites

Een favicon is geschaald naar veel fysieke pixels: 16×16 op een tabblad, 32×32 op een Retina-bladwijzerbalk, 180×180 op een iPhone-startscherm, 512×512 op een PWA-opstartscherm. Eén beeld kan ze niet allemaal goed dienen. Gebruik onze favicon generator, PNG naar ICO converter, SVG naar ICO converter en live favicon tester om uw icon set te bouwen en te verifiëren, en lees de [companion guide](gids:favicon-sizes-explained) voor een beknopte uitleg.

Het opschalen van een kleine bron veroorzaakt onscherpte. Door een gedetailleerde 1024×1024 te verkleinen zonder te testen, gaan fijne lijnen verloren. De oplossing is een kleine set speciaal gebouwde exports, of één .ico met meerdere formaten waarin de gebruikelijke desktopframes zijn ingesloten.

Het verzenden van elke maat die in oude blogposts wordt vermeld, is verspilling. Te weinig verzending laat een zichtbaar gat op één platform achter. De onderstaande matrix weerspiegelt echte verzoeken gemeten in browsers van 2026.

Desktoptabbladen geven doorgaans een 16×16 CSS-pixelpictogram weer, dat wordt toegewezen aan 16×16 of 32×32 apparaatpixels, afhankelijk van de weergavedichtheid.

Bladwijzerbalken en vastgezette tabbladen gebruiken vaak 32×32 of 48×48. Chromium kan automatisch het dichtstbijzijnde ingebedde frame van favicon.ico kiezen.

Alle drie de gangbare tabformaten (16, 32, 48) passen comfortabel in één multi-size .ico. Daarom blijft de .ico-container het meest efficiënte desktopleveringsformaat.

Windows Startmenu, taakbalkpinnen en snelkoppelingen voor Bestandsverkenner kunnen 24×24, 32×32, 48×48, 64×64, 128×128 of 256×256 aanvragen, afhankelijk van de context en de weergaveschaal.

Microsoft documenteert 16, 24, 32, 48, 64, 128 en 256 als praktische set voor Windows-apps. Web favicon's profiteren van het bundelen van minimaal 16 tot en met 256 in favicon.ico.

macOS geeft de voorkeur aan .icns voor native apps, maar gebruikt graag .ico en PNG voor websnelkoppelingen. iOS negeert .ico voor pictogrammen op het startscherm en wil een speciale 180×180 PNG via Apple-touch-pictogram.

Web-app-manifesten vereisen pictogrammen met elk doel en optioneel maskeerbaar. Gangbare maten zijn 192×192 en 512×512 PNG.

Android Chrome gebruikt manifestpictogrammen voor de installatie-UI en splash-schermen. Een bron van 512×512 schaalt netjes terug; een manifest van alleen 192×192 ziet er zacht uit op geavanceerde telefoons.

iOS leest geen manifestpictogrammen voor plaatsing op het startscherm. U moet <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> aangeven.

16×16 — browsertabbladen (1× dichtheid). 32×32 — tabbladen en bladwijzers op Retina-displays. 48×48 — sommige Windows UI-contexten en verouderd bladwijzergebruik.

64×64 en 128×128 — Windows-snelkoppelingen op hogere schaling. 256×256 — Windows vastgezette tegels en voorbeelden met hoge DPI.

180×180 — Apple-touch-pictogram (iOS / iPadOS). 192×192 en 512×512 — PWA manifestpictogrammen voor Android en installatieprompts.

Persoonlijke blog: favicon.ico alleen met 32-16-48. Acceptabel als je niet geïnteresseerd bent in iOS-poetsmiddel voor het startscherm.

Bedrijfsmarketingsite: .ico-bundel plus 180×180 Apple-touch-pictogram plus 32×32 PNG <link> voor expliciete Retina-tabbladen.

Installeerbare PWA: volledige .ico, Apple-touch-pictogram, manifest 192 + 512, optionele SVG voor schaalbare UI-chroom.

Electron desktop-app: Windows .ico met 16–256; macOS .icns afzonderlijk als u deze buiten de browser verspreidt.

Meerdere maten favicon.ico (16, 32, 48, 64, 128, 256) bij /favicon.ico.

apple-touch-icon.png op 180×180 voor iOS-startschermen.

Eén 512×512 PNG in site.webmanifest voor Android installatieoppervlakken.

Dat trio dekt ongeveer 95% van de pictogramverzoeken in de echte wereld. Voeg SVG toe als u oneindige schaling en donkere modus-stijl op moderne tabbladen wilt.

Heb ik een 16×16 PNG nodig als deze zich in de .ico bevindt? Nee, tenzij u een expliciete <link rel="icon" sizes="16x16"> wilt voor foutopsporing.

Is 120×120 nog steeds vereist? Dat was een oud iOS-formaat. Moderne Safari verwacht 180×180.

Hoe zit het met 64×64 favicon’s? Handig in .ico voor Windows; zelden nodig als standalone PNG.

Kan ik 256×256 overslaan? Alleen als je nooit geïnteresseerd bent in Windows-snelkoppelingsvoorbeelden met hoge DPI. De meeste teams bevatten het.

Het iOS-pictogram heeft afgeronde hoeken en ziet er bijgesneden uit: dat is iOS-maskering: ontwerp met veilige opvulling, geen bug in uw bestand.

De PWA-installatie toont een algemeen pictogram: manifestpictogrammen ontbreken of zijn minimaal 192×192. Valideer JSON met Chrome DevTools → Applicatie.

Tabpictogram zacht op Retina Mac: zorg ervoor dat favicon.ico een frame van 32×32 bevat, niet alleen 16×16.

Enorme .ico-download: je hebt ongecomprimeerde 256×256 BMP ingesloten. Herbouw met PNG-compressie in de container.

CSS-pixels zijn geen fysieke pixels. Een tabslot van 16×16 op een 2×-scherm laadt vaak een bitmap van 32×32 voor scherpte.

Dat is de reden waarom een ​​favicon.ico met zowel 16 als 32 frames beter presteert dan een enkele 16×16 PNG op Retina MacBooks en Windows-laptops met hoge DPI.

Android PWA's geven manifestpictogrammen weer op splash-schermen met volledige apparaatresolutie - een 192×192-bron uitgerekt tot een 1440p-telefoon ziet er zacht uit; 512×512 wordt netjes gedownscaled.

iOS past zijn eigen masker en hoekradius toe op Apple-Touch-pictogramitems. Ontwerp met veilige vulling, zodat belangrijke randen niet door de cirkel worden afgesneden.

Maak tijdens het testen een screenshot van het tabblad met 100% browserzoom en 200% OS-schaling. Als beide er helder uitzien, is uw maatmatrix waarschijnlijk correct.

Download favicon.ico en open het in een tool die ingebedde frames weergeeft. Bevestig dat er 16, 32, 48 en minstens één groot frame bestaan.

Haal apple-touch-icon.png op en controleer de afmetingen in een afbeeldingsinspecteur. Verwacht 180×180, niet 120×120 van verouderde sjablonen.

Open site.webmanifest en controleer of de pictogrammen [] 192×192 en 512×512 bevatten met de juiste paden en afbeeldings-/png-typen.

Laad uw site in Chrome DevTools → Applicatie → Manifest. Ontbrekende of ongeldige vermeldingen tonen waarschuwingen voordat gebruikers ooit een kapotte installatiedialoog zien.

Houd een spreadsheet bij waarin elk bestand wordt toegewezen aan de gebruiker ervan (tabblad, iOS, PWA, Windows). In de toekomst hoeft u tijdens een rebranding de assetmap niet meer te reverse-engineeren.

Nieuwe apparaatklassen verschijnen langzaam in favicon-land. 512×512 manifestpictogrammen dekken tegenwoordig beter dan 192 alleen opvouwbare gebruikersinterfaces en tablet-installatie-UI's.

Vermijd exotische formaten (96×96, 120×120), tenzij een specifiek platformdocument ze nog steeds verplicht stelt; ze voegen auteurslast toe zonder dat er veel voordelen uit voortkomen.

Bewaar de mastervector of het 1024×1024 raster in uw ontwerprepository, zelfs als u deze nooit verzendt. Toekomstige platforms kunnen grotere manifestpictogrammen aanvragen.

Automatiseer het opnieuw genereren van de master, zodat u, wanneer een nieuwe aanbevolen grootte verschijnt, een script opnieuw uitvoert in plaats van handmatig te exporteren in Photoshop.