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 the Apple touch icon is its own thing, where SVG favicons fit, and how to generate the entire set from one logo in a single step.

Open the free Favicon Generator All insights

Why one favicon is no longer enough

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 most closely, 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 what the Favicon Generator produces, nine PNG sizes plus an apple-touch-icon and a favicon.ico, 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. The favicon.ico bundles 16, 32 and 48 pixel images in one file for tools that request /favicon.ico directly.
96x96 and 128x128: desktop web app grids and larger bookmark tiles.
180x180: apple-touch-icon.png, which 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 worked example: one 1024px logo, a full pack

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

Input: logo.png, a square 1024x1024 mark. Upload it, fill in the site name, short name and theme colour for the manifest, check the browser tab and home screen previews, then click Download favicon pack (ZIP). The output is favicon-pack.zip containing favicon.ico, favicon-16x16.png through favicon-512x512.png, apple-touch-icon.png, a site.webmanifest referencing the 192 and 512 files, and a README listing everything. Drop the contents into the folder served from your site root, often /public.

Then reference them in the head. Copy HTML gives you the tags ready to paste: a favicon.ico link, 32x32 and 16x16 PNG links, <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>, the manifest link and a theme-color meta tag. That's the whole modern setup; browsers negotiate the rest from the sizes attributes.

The Apple touch icon: the 180x180 file iOS insists on

iOS plays by its own rules.

The Apple touch icon is 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 fills transparent areas with black, so the generator always gives apple-touch-icon.png a solid background: your Fill background colour if you ticked it, otherwise white.

Second, iOS applies its own rounded-corner mask. The Corner radius setting applies to every file in the pack, including the touch icon, so if the home screen icon matters, leave it at 0 and let the platform do the shaping, or you'll get a rounded rectangle inside a rounded rectangle.

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 sharpest 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 every PNG size and the ICO, which is exactly the fallback stack you want behind the vector. The pack also includes your SVG as favicon.svg, and text or emoji favicons get a generated favicon.svg, with the matching link tag in the HTML snippet.

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 wide logo with no Padding, so it shrinks to a thin strip in the square. The generator centres it without stretching, but a symbol or monogram fills the space far better.
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.

Watch the browser tab preview before you download, and 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 plenty of visitors run dark mode and a near-black mark disappears into it. Fill background with a colour fixes that.

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 PNG to ICO, SVG to PNG, and Image Resizer

Adjacent tools for adjacent jobs.

The Favicon Generator is the one-shot path from logo to complete pack, favicon.ico and manifest included. When you need an ICO with other sizes, such as a 256 pixel Windows app icon, the PNG to ICO Converter builds a custom 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