Favicon size guide

You don't need twenty icon files. Here are the exact sizes that matter, why each one exists, and the markup to wire them all up.

Open the favicon generator →

The sizes that matter

16×16, 32×32, 48×48 — bundled inside favicon.ico. 16px is what shows in a browser tab and bookmark bar; 32px is used by Windows shortcuts, taskbar pins and high-DPI tabs; 48px is what Google prefers when it renders a favicon next to your listing in search results.
180×180 — apple-touch-icon.png, used when a visitor taps "Add to Home Screen" on iOS or iPadOS Safari.
192×192 and 512×512 — referenced from site.webmanifest. Android's "Add to Home Screen" and any Chrome PWA install prompt pull from these two; 512 is also what shows in the OS app switcher on some Android versions.

That's five files and one manifest. Anything past this — 57px iPhone icons, 144px Windows tiles, msapplication-TileImage meta tags — targets platforms that either no longer exist or fall back gracefully to the sizes above. Skip them.

The HTML to add

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Order matters a little: browsers read <link> tags top to bottom and use the last matching one, so keep the ICO first as the universal fallback and the sized PNGs after it. GenHub's favicon generator writes this exact snippet, in this order, for you.

What actually requests each size

It helps to know who's asking. Chrome, Firefox and Edge request /favicon.ico directly at the root of your domain even if you never link it — a convention from the early web that never went away, so a missing root favicon.ico shows up as 404s in your server logs regardless of your <link> tags. Safari on iOS ignores favicon.ico entirely for the home-screen icon and looks only for apple-touch-icon. Google's documentation asks for a square image sized in a multiple of 48px (48, 96, 144…) so it can render a crisp icon next to your result — a 16px-only favicon can look blurry there.

Common mistakes

Serving a stale icon. Favicons are cached aggressively — sometimes for weeks. After replacing yours, test in a private window before assuming it's broken.
Transparent apple-touch-icon. iOS renders transparent areas as black on some versions. Give that one a solid background.
Wrong path or MIME type. If /favicon.ico 404s, or your server serves it as text/html instead of image/x-icon, most browsers silently drop it.
Only one size. A single stretched 16×16 looks soft on retina displays and home screens. Ship the full set.

How GenHub builds the set

Upload an image or type a letter, and GenHub renders every size on a canvas, hand-writes a true multi-resolution favicon.ico (16, 32 and 48px packed into one file), and exports the PNGs, site.webmanifest and this HTML snippet together as a ZIP — entirely in your browser, nothing uploaded.

FAQ

Do I still need favicon.ico if I have PNG icons?

Yes — browsers request /favicon.ico directly regardless of your tags, and it's the most compatible fallback for crawlers and older browsers. Skipping it means 404s in your logs and a blank tab icon in some contexts.

What size should my source image be?

Start from at least 512×512 so every smaller size downscales cleanly. Square works best — anything else gets cropped or padded.

Does Google actually show favicons in search results?

Yes, on desktop and mobile search. Google's guidance is a square image in a multiple of 48px, hosted at a crawlable, non-blocked URL.

Why does my old favicon still show after I changed it?

Browser and CDN caching. Favicons can be cached for weeks; test in a private/incognito window or add a version query string to force a refresh.