Toggle menu

Favicon Sizes 2026: The Exact Pixel Dimensions Chart You Need

Every favicon size you actually need, 16x16 to 512x512, for browser tabs, Apple touch icons, Android/PWA icons, and favicon.ico, with a copy-paste HTML checklist.

Amit Yadav
Amit Yadav4 min read
On this page

Short answer: the standard favicon size is 32x32 pixels for browser tabs (16x16 still works). A complete set adds 48x48 for Google Search results, 180x180 for Apple devices, and 192x192 plus 512x512 for Android and installable web apps.

Favicon sizing gets confusing because different platforms use different icon surfaces. If you only export one size, quality breaks in real usage.

Favicon size chart

Size File Where it shows HTML or manifest
16x16, 32x32, 48x48 favicon.ico (all three in one file) Browser tabs, bookmarks, older browsers <link rel="icon" href="/favicon.ico" sizes="32x32">
Any (vector) favicon.svg Tabs in modern browsers, scales cleanly <link rel="icon" href="/favicon.svg" type="image/svg+xml">
32x32 favicon-32x32.png Standard tab icon, PNG fallback <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
48x48 (or a multiple of 48) PNG or ICO Google Search result listings Picked up from your rel="icon" tag
180x180 apple-touch-icon.png iPhone and iPad home screen <link rel="apple-touch-icon" href="/apple-touch-icon.png">
192x192 icon-192.png Android home screen, PWA icon icons array in manifest.webmanifest
512x512 icon-512.png PWA install prompt and splash screen icons array in manifest.webmanifest

This guide covers a minimal set that works well for modern projects.

Skip the manual export

Generate every size on this list (plus the HTML tags to paste), from one source image in the Favicon Generator, free and runs entirely in your browser.

Use these as your baseline:

  • 16x16 PNG: classic tab and small browser surfaces
  • 32x32 PNG: standard browser icon fallback
  • 180x180 PNG: Apple touch icon
  • 192x192 PNG: Android / PWA icon usage
  • 512x512 PNG: high-resolution PWA install icon
  • favicon.ico: legacy/fallback package
  • favicon.svg: modern vector tab icon where supported

Why this set is enough for most teams

It balances compatibility and maintenance:

  • small files for common tab usage
  • larger files for app-like install surfaces
  • vector fallback for crisp scaling

Going far beyond this can add complexity with little practical gain unless you have very specific platform constraints.

Sizing rules that prevent blur

  1. Start from a clean square source.
  2. Keep simple shapes for tiny sizes.
  3. Avoid thin details that disappear at 16px.
  4. Check icon silhouette first, then color nuance.

Practical workflow

  1. Build symbol in Free Logo Maker if you need a fresh mark.
  2. Generate all favicon sizes in Favicon Generator.
  3. Test rendered icons in real browser tabs and mobile environments.
  4. Add head tags + manifest references.

Common mistakes

  • Using only SVG and skipping PNG fallbacks
  • Exporting one large PNG and resizing in browser
  • Keeping text-heavy logos as favicons
  • Forgetting 180x180 for iOS home screen
Tiny-size truth

If your icon is not recognizable at 16px, simplify the design. No export setting can fix an over-detailed mark at that scale.

Quick test matrix

  • Desktop Chrome tab
  • Desktop Safari tab
  • Mobile Safari home screen
  • Android install prompt
  • Bookmark list

If icon identity remains consistent across these surfaces, your size setup is strong.

Practical FAQ

Why does my logo look fine at 512px but weak at 16px?
Small icons rely on silhouette clarity. Fine details disappear at tiny sizes. Simplify structure for favicon variants.
Can one 512px icon replace all others?
No. Browsers and platforms request specific sizes and often render better with dedicated exports.
Do I need transparent backgrounds?
Usually yes for flexibility, unless your brand intentionally uses a filled square background in all contexts.

Quick review checklist

  1. Test all sizes in-browser.
  2. Compare light and dark tab surfaces.
  3. Validate manifest icons.
  4. Confirm crisp rendering on high-DPI displays.

Final recommendation

Maintain one approved size set and reuse it across releases. Stable sizing standards prevent recurring visual regressions and simplify deployment.

Asset maintenance policy

Keep exported favicon files and source mark versions together in version control. This makes refreshes safer when branding evolves and prevents stale icon files from lingering in production.

Additional source references: 1 2 3 4.

Sources

Footnotes

  1. MDN: Manifest icons ↩

  2. web.dev: Add a web app manifest ↩

  3. MDN: rel="icon" ↩

  4. Google Search Central: Define a favicon to show in search results ↩

Related posts

Share this post