Image Tools·4 min read

Favicon Sizes Guide: 16px to 512px, Plus Apple Touch

Ship a site with a lone favicon.ico and you'll eventually meet the consequences: a fuzzy icon on someone's iPhone home screen, a blank square in a PWA install prompt, a smeared logo on an Android splash screen. This favicon sizes guide explains which sizes browsers actually request, from the 16 pixel tab icon to the 512 pixel app icon, why apple touch icons are their own thing, where svg favicons fit, and how to generate the entire set from one logo in a single step.

Open the tool All insights

Why a favicon sizes guide is even necessary

One icon became ten when phones arrived.

In 1999 a favicon was one 16x16 file at a fixed path. Then came high-density displays, iOS home screen bookmarks, Android shortcuts, PWA manifests, and pinned tabs, each requesting its own dimensions. The browser picks whichever size fits the context best, and when the right size is missing it scales whatever exists, which is where the blur comes from.

This usually surfaces on launch day. The site works, the design is polished, and then someone adds it to their phone's home screen and your crisp logo turns into a 57 pixel upscale of a 16 pixel file. The fix is simply shipping the sizes up front.

The favicon sizes that matter, from 16px to 512px

What each file is actually for.

Here's the working map of the ten sizes the Favicon Generator produces and where each one shows up:

16x16 and 32x32: browser tabs, bookmarks bars, and history lists on standard and high-density screens.
48x48 and 64x64: Windows desktop shortcuts and older browser chrome.
96x96 and 128x128: desktop web app grids and larger bookmark tiles.
180x180: the apple-touch-icon iOS uses for home screen bookmarks.
192x192 and 512x512: the two sizes Android and the web app manifest require for install prompts and splash screens.
256x256: a general high-density fallback that several platforms pick up opportunistically.

A favicon worked example: one 1024px logo, ten files

Input, output, and the tags that wire it up.

Input: logo.png, a square 1024x1024 mark. Upload it, press Generate favicon pack, and the output is favicon-pack.zip containing favicon-16x16.png through favicon-512x512.png, a site.webmanifest referencing the 192 and 512 files, and a README listing everything. Drop the contents into your /public folder.

Then reference them in the head: <link rel='icon' sizes='32x32' href='/favicon-32x32.png'>, a matching 16x16 line, <link rel='apple-touch-icon' href='/favicon-180x180.png'>, and <link rel='manifest' href='/site.webmanifest'>. That's the whole modern setup; browsers negotiate the rest from the sizes attributes.

Apple touch icons: the 180x180 favicon iOS insists on

iOS plays by its own rules.

Apple touch icons are what iOS shows when someone adds your site to their home screen, and 180x180 is the size that covers current devices. Two quirks matter. First, iOS ignores transparency and fills it with black, so a logo on a transparent background should be exported on a solid color before it becomes a touch icon.

Second, iOS applies its own rounded-corner mask, so don't pre-round the corners yourself or you'll get a rounded rectangle inside a rounded rectangle. Give it a full-bleed square and let the platform do the shaping.

SVG favicons: where vectors fit in a modern icon set

Sharp at every size, with one big caveat.

Svg favicons are genuinely attractive: one file that's sharp at every resolution and can even restyle itself for dark mode with an embedded media query. Chromium browsers and Firefox support them well via <link rel='icon' type='image/svg+xml'>, and for those users a vector icon is the best version of your mark.

The caveat is coverage. Safari's support lags, and none of the home screen or manifest flows consume SVG, so a vector icon supplements the PNG set rather than replacing it. If your source logo is an SVG, this generator rasterizes it into all ten PNG sizes, which is exactly the fallback stack you want behind the vector.

Favicon mistakes that leave tabs blurry

The failures are all upstream of the browser.

Before blaming the browser cache, check for these:

Generating the set from a 64 pixel source, which guarantees soft 180 and 512 outputs; start from 512 pixels or larger.
Using a detailed wordmark that's handsome at 512 and an illegible smudge at 16; small sizes want a monogram or symbol.
Shipping the PNGs but forgetting the manifest link, so Android installs fall back to a scaled tab icon.
Uploading a rectangular logo and letting the square canvas stretch it; crop to 1:1 first.
Rebranding without renaming the files; favicons cache aggressively, so a changed icon at the same URL can take days to show up.

Favicon tips before you ship the pack

Three checks that take two minutes.

Open the 16x16 file from the ZIP at actual size and squint; that's the version most people will see most often, so it's the one to judge. Then check the icon against both a light and dark tab bar, since half your visitors run dark mode and a near-black mark disappears into it.

Finally, if you're replacing an existing favicon, change the filename or add a version query to the link tags. Cache-busting up front beats a week of wondering why the old icon won't die.

Favicon Generator vs ICO Converter, SVG to PNG, and Image Resizer

Adjacent tools for adjacent jobs.

The Favicon Generator is the one-shot path from logo to complete PNG pack with a manifest. When a legacy system or crawler specifically wants a favicon.ico, take one of the generated PNGs through the ICO Converter, which builds the multi-resolution ICO container.

If you only need a single rasterized copy of a vector logo at an arbitrary size, SVG to PNG does that without the pack, and the Image Resizer handles one-off dimension changes for images that aren't icons at all.

Try it now

Open Favicon Generator

The tool is one click away. No sign up, no upload, no payment.

Open Favicon Generator

Write a review