Favicon-maten uitgelegd

De favicon van 16×16 pixels is de originele webstandaard. Het wordt gebruikt in browsertabbladen op standaardschermen (96 dpi), in de bladwijzerwerkbalk van alle desktopbrowsers en in sommige browsergeschiedenislijsten. Omdat 16×16 een extreem strak canvas is, moet je favicon-ontwerp worden teruggebracht tot de eenvoudigste vorm: een enkele vorm, letter of abstract teken. Alles wat complexer is, zal onleesbaar zijn.

De pixelgrootte van 32×32 verdubbelt de 16×16 en bedient retina/HiDPI-browsertabbladen met een dichtheid van 2x, bladwijzerpictogrammen bij hoge DPI en suggestiepictogrammen voor de adresbalk in Chrome. Moderne browsers vragen veel vaker om 32×32 dan 16×16, aangezien beeldschermen met een hoge dichtheid de meerderheid van de apparaten zijn geworden. Als u slechts één maat zou kunnen verzenden, zou 32×32 de meest impactvolle keuze zijn.

De pixelgrootte van 48×48 is de weergavegrootte van de Windows Explorer 'medium iconen' en is het minimum dat Google Zoeken vereist om in aanmerking te komen voor favicons in fragmenten van zoekresultaten. Sites waarvan de favicon niet voldoet aan het minimum van 48×48, verschijnen met een algemeen wereldbolpictogram naast hun URL in Google-resultaten in plaats van hun merkteken. Neem altijd 48×48 op in uw .ico-bundel.

De pixelgrootte van 64 x 64 wordt gebruikt in de grote pictogramweergave van Windows Explorer en in sommige Linux-desktopomgevingen. Het opnemen ervan in uw .ico-bestand met meerdere formaten voegt een verwaarloosbare overhead toe, maar zorgt voor een schone weergave in bestandsbeheerders en shell-omgevingen. Veel favicon-generatortools bevatten standaard 64 als onderdeel van de standaard .ico-bundel.

De pixelgrootte van 128×128 bedient Windows Store-app-tegels en taakbalkminiaturen met hoge dichtheid. Het is minder vaak nodig voor pure webfavicons, maar is belangrijk als uw site is verpakt als een PWA of als gebruikers deze vastzetten als een Windows-app. Door het binnen .ico te bundelen met PNG-compressie blijft de bestandsgrootte redelijk.

De pixelgrootte van 256×256 is het grootste standaard .ico-frame. Het wordt gebruikt voor Windows-snelkoppelingen op het bureaublad, de zoekresultaten van het Windows Start-menu en enkele door apps geïnstalleerde contexten. Bij deze resolutie moet u PNG-compressie gebruiken in de .ico-container in plaats van BMP. Een ongecomprimeerde BMP-afbeelding van 256×256 voegt onnodig 256 KB toe aan het .ico-bestand.

De pixelgrootte van 180×180 is exclusief voor de iOS apple-touch-icon. Wanneer een iPhone- of iPad-gebruiker op 'Toevoegen aan startscherm' tikt, haalt Safari de afbeelding op die is gedeclareerd in `<link rel='apple-touch-icon'sizes='180x180' href='/apple-touch-icon.png'>`. Dit formaat dekt alle huidige iPhone-modellen (iPhone 6 Plus en later gebruiken 180×180 bij een dichtheid van 3x; oudere modellen gebruiken 120×120 en 152×152 – een enkel 180-bestand dekt ze allemaal netjes).

De pixelgrootte van 192×192 is het minimaal vereiste pictogram in een webapp-manifest (site.webmanifest) voor de PWA-installatieprompt van Android en Chrome. Wanneer gebruikers een PWA toevoegen aan hun Android-startscherm, geeft Chrome het pictogram van 192×192 weer in het opstartprogramma en het app-pictogram in de recente apps-switcher. Zonder deze grootte in het manifest toont de PWA-installatieprompt een algemeen pictogram of wordt helemaal niet geactiveerd.

De pixelgrootte van 512×512 is het tweede vereiste manifestpictogram. Chrome gebruikt het voor het PWA-opstartscherm dat wordt weergegeven terwijl de app wordt geladen nadat het startscherm is gestart, en voor het voorbeeld van het installatiedialoogvenster op desktop Chrome OS. Het is ook het ideale bronformaat voor het genereren van alle kleinere varianten; vanaf 512×512 zorgt u ervoor dat elke gedownsamplede uitvoer scherpe randen en nauwkeurige kleuren behoudt.

Formaten tussen 512×512 en de zeer grote 1024×1024 worden voornamelijk gebruikt voor native app-pictogrammen op macOS en iOS App Store-inzendingen, niet voor webfavicons. Als u echter van plan bent uw aanwezigheid op het web om te zetten in een native app met behulp van een wrapper (Electron, Capacitor, Tauri), heeft u 1024×1024 nodig voor het beoordelingsproces in de App Store. Bewaar dit masterbestand naast uw faviconpakket.

SVG favicons zijn resolutie-onafhankelijk en dekken elke dichtheid met één enkel bestand. Een browser die SVG favicons ondersteunt (Chrome 80+, Edge 80+, Firefox 41+, Safari 15+) zal de voorkeur geven aan de SVG boven elk rasterformaat, omdat deze perfect wordt weergegeven bij 1x, 2x, 3x of een aangepaste DPI. De wisselwerking is dat niet alle contexten SVG ondersteunen: Windows-snelkoppelingen, RSS-lezers en oudere tools hebben nog steeds de .ico-fallback nodig.

Het is belangrijk om de relatie tussen formaten en de .ico-container te begrijpen. Een .ico-bestand is niet één afbeelding; het is een archief met meerdere afbeeldingen. Elk frame daarin is een afzonderlijke rasterafbeelding met een ander formaat. De browser leest de map ICO, identificeert welk frame het beste overeenkomt met de benodigde grootte en decodeert alleen dat frame. Dit is de reden waarom één .ico-bestand even goed tabbladen van 16, 32, 48 en 64 px kan bedienen.

De aanbevolen minimumset voor een productiewebsite in 2026 is: favicon.ico bundelt frames van 16, 32, 48 en 64 px; apple-touch-icon.png op 180×180; android-chrome-192x192.png; android-chrome-512x512.png; favicon.svg voor moderne browsers; en een site.webmanifest die verwijst naar de 192 en 512 PNG's. De favicon generator produceert deze complete set vanuit één bronupload in één klik.

Met de favicon tester controleer je eenvoudig of al je faviconformaten correct worden geserveerd. Voer uw site-URL in en de tester probeert uw favicon.ico op te halen, controleert op de linktags in uw HTML-head en toont een voorbeeld van elk formaat. Ontbrekende maten worden gemarkeerd met bruikbare aanbevelingen.