Favicon (.ico) vs PNG

Het .ico-formaat is speciaal gemaakt om meerdere pictogramgroottes in één binaire container te bewaren. Een goedgebouwde favicon.ico bevat frames van 16×16, 32×32, 48×48 en 64×64 pixels. Wanneer een browser een favicon voor een tabblad nodig heeft, opent deze het .ico-bestand, leest de map ICO en selecteert het frame dat het meest overeenkomt met de vereiste weergavegrootte. Deze mogelijkheid voor meerdere formaten is het belangrijkste voordeel van .ico ten opzichte van PNG.

PNG is een formaat voor één afbeelding. Een PNG-bestand bevat precies één afbeelding met precies één resolutie. Om meerdere formaten te dekken met alleen PNG, heb je meerdere bestanden en meerdere `<link>`-tags met expliciete `sizes=`-attributen nodig. Dit is uitgebreider, maar biedt nauwkeurige controle over welk beeld bij elke resolutie wordt weergegeven. PNG ondersteunt ook betere verliesvrije compressie dan BMP-gecodeerde ICO-frames bij elke gegeven resolutie.

Browsercompatibiliteit is waar .ico beslissend wint. Elke browser (inclusief oudere IE, oude Edge, oude Safari-versies en obscure nichebrowsers) haalt /favicon.ico op uit de domeinroot zonder dat een `<link>`-tag vereist is. Zelfs als u de linktag volledig weglaat, zullen browsers GET /favicon.ico als conventie proberen. PNG vereist expliciete `<link rel='icon' type='image/png'>`-tags met de juiste MIME-typen, anders wordt deze genegeerd.

Ondersteuning voor transparantie is gelijk tussen .ico en PNG. Beide formaten ondersteunen een 8-bit alfakanaal (volledige transparantie per pixel). .ico behoudt echter alleen de transparantie als de interne frames PNG-compressie gebruiken, en niet BMP. Oude ICO-encoders zijn soms standaard ingesteld op BMP, dat een beperkte (1-bit) transparantie heeft. Gebruik altijd een moderne generator die PNG-gecomprimeerde .ico-frames produceert.

Vergelijking van de bestandsgrootte is afhankelijk van de context. Een enkel 32×32 PNG is kleiner dan een .ico-bestand met meerdere formaten dat frames van 16, 32, 48 en 64 px bundelt. De .ico vervangt echter vier afzonderlijke PNG-bestanden plus vier link-tags. Voor de totale payload is een goed gecomprimeerde multi-size .ico bijna altijd kleiner dan de equivalente set van individuele PNG's samen.

PNG wint op het gebied van compressie-efficiëntie bij elk individueel formaat. Het compressie-algoritme PNG (DEFLATE/zlib) is met name effectief voor logo's in vlakke kleuren en illustraties in pictogramstijl met scherpe randen en beperkte kleurenpaletten. Een 32×32 PNG-logo bij optimale compressie kan minder dan 200 bytes groot zijn. Het equivalente BMP-frame binnen een .ico is altijd 4 KB, ongeacht de afbeeldingsinhoud.

Om in aanmerking te komen voor favicons voor Google Zoeken worden zowel .ico als PNG ondersteund. De crawler van Google haalt eerst de favicon op die is gekoppeld aan uw HTML, of valt terug naar /favicon.ico. De minimumvereiste is 48×48 pixels en een openbaar toegankelijke URL. Een PNG van het juiste formaat gekoppeld aan `<link rel='icon' type='image/png' sizes='48x48' href='/favicon-48x48.png'>` voldoet hier net zo goed aan als een .ico-bestand van hetzelfde formaat.

Het gedrag in de donkere modus verschilt tussen de formaten. PNG-bestanden kunnen zich niet aanpassen aan het kleurenschema van de gebruiker. Je hebt JavaScript nodig om de linktag href dynamisch te verwisselen, wat kwetsbaar is. Het .ico-formaat heeft helemaal geen mogelijkheden voor de donkere modus. Voor favicon-aanpassing in de donkere modus ondersteunt alleen SVG dit native via een ingebed `@media (prefers-color-scheme: dark)`-stijlblok. PNG en .ico moeten worden gecombineerd met een SVG-overlay.

De optimale moderne opzet combineert beide formaten. Gebruik `<link rel='icon' href='/favicon.ico'>` als universele fallback, `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` voor Retina-helderheid, en `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` voor schaalbare ondersteuning voor de donkere modus. Browsers die SVG-favicons begrijpen, selecteren de SVG; anderen vallen door naar PNG; oude browsers krijgen de .ico.

Windows OS-integratie is een .ico-only domein. Snelkoppelingen op het bureaublad, Verkenner-pictogrammen en Windows-taakbalkpinnen lezen allemaal het .ico-formaat. Als een van uw gebruikers uw site vastzet op de taakbalk Windows of een snelkoppeling op het bureaublad naar uw URL maakt, wordt alleen /favicon.ico gebruikt als snelkoppelingspictogram. PNG-bestanden worden in deze context volledig genegeerd.

Voor de 180×180 apple-touch-icon is PNG het enige geldige formaat. iOS leest geen .ico voor pictogrammen op het startscherm — het vereist specifiek een PNG die is gekoppeld via `<link rel='apple-touch-icon'>`. Dit is een geval waarin PNG niet alleen de voorkeur heeft, maar ook vereist is.

Serverconfiguratie mag niet over het hoofd worden gezien. Veel webservers serveren .ico met een onjuist inhoudstype (`text/plain` in plaats van `image/x-icon`) als dit niet expliciet is geconfigureerd. PNG-bestanden hebben bredere ondersteuning van het MIME-type op verschillende hostingplatforms. Als u ziet dat uw favicon.ico niet wordt geladen, controleer dan of uw server `Content-Type: image/x-icon` of `image/vnd.microsoft.icon` retourneert voor ICO-verzoeken.

De favicon generator voert beide formaten tegelijkertijd uit. U hoeft niet te kiezen: het downloadpakket bevat favicon.ico, zelfstandige PNG-bestanden van 32×32 en 180×180, en SVG voor de volledige moderne stapel. Als u dit pakket gebruikt, wordt de vraag ICO versus PNG automatisch beantwoord: gebruik beide, elk in de context waarin deze uitblinkt.

Voor een volledige formaatvergelijking die ook SVG omvat, zie best favicon format guide. Die gids legt uit welk formaat voor elke gebruikssituatie prioriteit moet krijgen (standaardwebsite, PWA, e-commerce winkel en ontwikkelaarstool) en biedt een beslissingsmatrix voor het kiezen van uw faviconstapel.