Handleiding

Favicon (.ico) vs PNG

ICO en PNG zijn geen concurrenten — het zijn partners. De moderne favicon-setup gebruikt .ico als universele fallback en PNG als hoge-DPI-override. Hier lees je wanneer welk formaat wint.

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

ICO is uniek doordat één bestand meerdere resoluties bevat. De browser of het besturingssysteem kiest bij het renderen de beste match — geen opschaling, geen vage randen.

PNG is scherper bij elke individuele resolutie en biedt betere compressie voor logo's met egale kleuren. Het kan echter geen meerdere maten in één bestand bundelen.

De optimale setup is één multi-size .ico plus losse 32×32- en 180×180-PNG's voor hoge-DPI-browsers en iOS.

Hoe het werkt

  1. 1

    Begin met een 512×512-bron

    PNG of SVG.

  2. 2

    Genereer beide formaten

    FetchFavicon levert een multi-size .ico plus losse 16/32/48/180/192/512 PNG's.

  3. 3

    Link beide in <head>

    <link rel="icon" href="/favicon.ico"> gevolgd door <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.

Probeer het nu

Genereer zowel .ico als PNG

PNG naar ICO Converter

Veelgestelde vragen

Welk formaat is kleiner?+

Een losse PNG is kleiner dan een .ico met dezelfde resolutie, maar een multi-size .ico vervangt 4–6 PNG's en wint meestal op totaal aantal bytes.

Toont Google PNG-favicons in zoekresultaten?+

Ja. Google ondersteunt zowel .ico als PNG. Het geeft de voorkeur aan een vierkante beeldverhouding van minimaal 48×48.

Kan PNG dark mode ondersteunen?+

Niet rechtstreeks. Gebruik een SVG-variant naast je PNG voor dark-mode-ondersteuning.

Gerelateerde tools

Meer handleidingen

Handleidingen