Guide

Favicon (.ico) vs PNG

ICO and PNG are not competitors — they're partners. The modern favicon setup uses .ico as the universal fallback and PNG as the high-DPI override. Here is exactly when each one wins.

Check favicons on any website

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

Install Chrome Extension

ICO is unique in that a single file embeds multiple resolutions. The browser or OS picks the closest match at draw time — no upscaling, no fuzzy edges.

PNG is sharper at any individual resolution and supports better compression for solid-colour logos. It cannot embed multiple sizes in one file.

The optimal setup is one multi-size .ico plus standalone 32×32 and 180×180 PNGs for high-DPI browsers and iOS.

How it works

  1. 1

    Start from a 512×512 source

    PNG or SVG.

  2. 2

    Generate both formats

    FetchFavicon outputs a multi-size .ico plus standalone 16/32/48/180/192/512 PNGs.

  3. 3

    Link both in <head>

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

Try it now

Generate both .ico and PNG

PNG to ICO Converter

FAQ

Which has smaller file size?+

A single PNG is smaller than an .ico with the same resolution, but a multi-size .ico replaces 4-6 PNGs and usually wins on total bytes.

Does Google show PNG favicons in search results?+

Yes. Google supports both .ico and PNG. It prefers a square aspect ratio of at least 48×48.

Can PNG support dark mode?+

Not directly. Use an SVG variant alongside your PNG for dark-mode support.

Related tools

Related guides

Guides