ICO vs PNG for Favicons

ICO is universal but old; PNG is modern but needs explicit linking. Here's how to use both together.

4 min read

Check favicons on any website

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

Install Chrome Extension

ICO: the universal fallback

Every desktop browser fetches /favicon.ico without you doing anything. It's a container that can hold multiple resolutions.

Windows shortcuts and File Explorer rely on .ico, so even if you don't care about web favicons, ship one for the OS.

PNG: pixel-perfect at any density

PNG renders crisply on high-DPI displays when you link it with <link rel="icon" sizes="...">.

Use 192×192 and 512×512 PNGs for the web manifest, and 180×180 for apple-touch-icon.

Verdict: use both

Ship a multi-size .ico for universal support, plus PNG variants for HD displays and PWA install prompts. Add SVG on top for the sharpest scalable icon.

FAQ

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.

Related guides

Try the tools

Continue reading