ICO vs PNG voor favicons

ICO is universeel maar gedateerd; PNG is modern maar vereist expliciete koppeling. Zo gebruik je beide samen.

4 min leestijd

Check favicons on any website

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

Install Chrome Extension

ICO: de universele fallback

Elke desktopbrowser haalt /favicon.ico op zonder dat je iets hoeft te doen. Het is een container die meerdere resoluties kan bevatten.

Windows-snelkoppelingen en Verkenner vertrouwen op .ico — lever er dus altijd een, ook als je verder niet om web-favicons geeft.

PNG: pixelperfect bij elke dichtheid

PNG rendert scherp op hoge-DPI-schermen wanneer je het linkt met <link rel="icon" sizes="...">.

Gebruik 192×192 en 512×512 PNG's voor het web manifest, en 180×180 voor apple-touch-icon.

Conclusie: gebruik beide

Lever een multi-size .ico voor universele ondersteuning, plus PNG-varianten voor HD-schermen en PWA-installatieprompts. Voeg SVG toe bovenop voor het scherpste schaalbare icoon.

Veelgestelde vragen

Should I use ICO or PNG for a favicon?

Use both: ICO for universal /favicon.ico fallback and PNG for high-DPI tabs and PWA manifest icons.

Does every browser support PNG favicons?

Modern browsers do when you link them with <link rel="icon" type="image/png">. ICO remains the safest default.

Is ICO outdated?

ICO is older but still required for Windows shortcuts and automatic /favicon.ico discovery by browsers.

Gerelateerde gidsen

Probeer de tools

Verder lezen