Favicon Sizes Explained (2026 Complete Guide)

The favicon sizes that cover modern browsers, iOS, and Android in 2026 are 16×16, 32×32, 180×180 (Apple Touch Icon), 192×192, and 512×512 (PWA manifest), plus a legacy favicon.ico at your site root. One PNG at 32×32 is not enough if you care about bookmarks, home screens, and installable PWAs.

This guide lists every size, where each one appears, and how to verify your live site without guessing from DevTools.

Quick reference table

Export from a master square at least 512×512 px. Downscale for smaller sizes. Never upscale a 16×16 source to 512×512. That is the fastest way to get a blurry tab icon.

Browser tab icons (16×16 and 32×32)

Desktop browsers pick the closest declared size. Chrome and Firefox typically render 16×16 or 32×32 in the tab bar depending on display density.

What to ship

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Keep both files. A single 32×32 tag works on many sites, but 16×16 covers retina tab bars and older clients that ignore larger declarations.

favicon.ico still matters

Browsers request /favicon.ico automatically even when you declare PNG links. The ICO format can embed multiple resolutions (16, 32, 48) in one file.

Place favicon.ico at the site root:

https://example.com/favicon.ico

If you only ship PNGs and skip the ICO, some crawlers, email clients, and legacy tools still show a generic globe. The Favicon Check scans both your HTML link tags and the default /favicon.ico path in one pass.

Apple Touch Icon (180×180)

iOS does not use your 32×32 tab icon when someone adds your site to the home screen. It looks for apple-touch-icon.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Apple's documented size is 180×180 px. Use a square PNG with no transparency padding tricks. iOS applies rounded corners automatically.

Common iOS mistakes

• Using a 152×152 or 120×120 file from an old template
• Shipping a wide logo instead of a square crop
• Forgetting the tag entirely and hoping the tab icon scales up

After deploy, open Favicon Check, enter your URL, and confirm the 180×180 file is listed with the correct rel. The tool shows every declared icon and lets you download each file to inspect pixels.

Android and PWA icons (192×192 and 512×512)

Installable web apps and Android home screen shortcuts read icons from your web app manifest, not from the tab favicon alone.

Example manifest.webmanifest:

{
  "name": "My App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Link the manifest in your HTML:

<link rel="manifest" href="/site.webmanifest">

192×192 is the workhorse for home screen icons. 512×512 is used for splash screens and the install prompt. Google recommends both for PWAs.

The Favicon Check parses manifest entries and lists manifest-sourced icons alongside link rel tags. That saves you from opening JSON in a separate tab during audits.

SVG favicons: when they help and when they do not

SVG favicons scale cleanly on desktop browsers that support them:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

Put the SVG first, PNG second. Safari on iOS still wants apple-touch-icon as a raster image. Android still wants manifest PNGs. SVG is not a replacement for the full size set. It is an extra sharp layer for supporting browsers.

How browsers choose which file to use

Rough priority order:

1. Explicit link rel="icon" with matching sizes attribute
2. apple-touch-icon for iOS home screen context
3. Icons from manifest.json for install / Android launcher
4. /favicon.ico as a fallback request
5. Generic placeholder if everything fails

Browsers do not download every declared file on every page load. They pick what fits the context. That is why declaring multiple sizes is not wasteful. Each context gets the right resolution.

Design rules that survive tiny sizes

Favicons are read at 16 px on screen. Fine details disappear.

Do

• Simple silhouette or monogram
• High contrast between foreground and background
• Square artboard, centered glyph
• Test at actual pixel size before export

Avoid

• Full wordmarks with thin letterforms
• Gradients that muddy at small sizes
• Text smaller than 40% of the canvas
• Non-square source images (they get squashed)

The size lab on Favicon Check lets you upload a square PNG and preview it in browser tab, bookmark, iOS home screen, and Android home screen contexts. Use it before you export six files from Figma.

Step-by-step export workflow

1. Create a 512×512 master in your design tool. Keep the logo mark inside a centered safe zone (about 80% of the canvas).
2. Export PNGs at 512, 192, 180, 32, and 16 px using downscaling. Use bicubic or Lanczos resampling.
3. Build favicon.ico with 16, 32, and 48 px layers. Most favicon generators handle this from one PNG upload.
4. Optional: export SVG from a simplified path version of the mark.
5. Write HTML and manifest tags. See How to Add a Favicon to Your Website for copy-paste snippets.
6. Deploy to production over HTTPS.
7. Scan the live URL with Favicon Check. Fix any missing sizes before announcing the rebrand.

Testing favicon sizes on a live URL

Local previews lie. Cache, CDN paths, and wrong href values only show up on the deployed host.

Fast audit with Favicon Check

1. Go to Favicon Check.
2. Enter your production URL (include https://).
3. Review the list: each entry shows rel, sizes, format, and preview.
4. Download any file to confirm real pixel dimensions in an image editor.
5. Click through to the size lab if you want to compare against a new upload.

If the scanner finds fewer icons than you expected, check for typos in paths, missing manifest link, or icons injected only client-side after JavaScript runs. Favicons should be in server-rendered HTML.

Also check social previews

Favicons and Open Graph images are different jobs. A perfect tab icon does not fix a broken og:image. Run the same domain through the Open Graph scanner to validate link previews for Facebook, LinkedIn, WhatsApp, and X. Both scans together take under a minute and cover the two most visible brand touchpoints.

Common size mistakes

Only shipping favicon.ico

Legacy format alone leaves iOS and Android without proper assets. Modern setups need PNG sizes and manifest entries.

One 512×512 PNG declared as sizes="32x32"

Browsers may downscale, but declaring wrong sizes confuses crawlers and audit tools. Match the attribute to actual file dimensions.

Upscaling a tiny source

Starting from 64×64 and stretching to 512×512 produces soft edges on Android splash screens. Always design large, export small.

Forgetting cache after a rebrand

Browsers cache favicons aggressively. After changing files, hard-refresh or test in a private window. Rename files (favicon-v2.ico) or set cache headers if the old icon persists for days.

Square assumptions with rectangular logos

Non-square images get forced into a square box. Crop intentionally instead of letting the browser add uneven padding.

Size checklist by project type

FAQ

What is the most important favicon size?

32×32 for desktop tabs and 180×180 for iOS home screens. If you only fix two, fix those.

Is 16×16 still needed in 2026?

Yes. High-DPI tab bars and some bookmark UIs still request 16×16 assets. The file is tiny. Ship it.

Can I use one 512×512 PNG for everything?

Browsers will downscale, but iOS and manifest consumers expect correct sizes metadata and appropriately named files. A single oversized file with wrong declarations fails audits and looks soft when downscaled without care.

What size is favicon.ico inside?

Typically 16×16, 32×32, and 48×48 combined in one ICO container. Some generators also embed 64×64.

Does Google Search use favicon sizes?

Google may show a favicon in search results. It fetches what your site declares, often preferring 48×48 or larger multiples. A complete size set improves consistency across SERP, tabs, and mobile shells.

How do I verify sizes without downloading every file?

Use Favicon Check. It lists dimensions from sizes attributes and manifest entries and previews each icon inline.

Do I need different favicons for dark mode browser UI?

Most sites ship one icon. If your mark is white-on-transparent, add a subtle background circle so it stays visible on light and dark browser chrome. Test both themes in the size lab preview.

What is the difference between favicon and apple-touch-icon?

rel="icon" targets browser tabs and bookmarks. apple-touch-icon is iOS-specific for home screen and Safari. You need both tags for full coverage.

Bottom line

Ship 16×16, 32×32, 180×180, 192×192, 512×512, and favicon.ico from a single 512×512 master. Match each file's real pixels to its sizes attribute, link your manifest, and validate the live URL with Favicon Check. Pair that with the Open Graph scanner and your site looks sharp in tabs, on home screens, and in shared link cards.