Favicon Sizes You Actually Need

A practical favicon sizing guide for browser tabs, Apple touch icons, and PWA install icons.

Amit Yadav
Amit Yadav

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

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

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

Small icons rely on silhouette clarity. Fine details disappear at tiny sizes. Simplify structure for favicon variants.

No. Browsers and platforms request specific sizes and often render better with dedicated exports.

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.

Sources

Footnotes

  1. MDN: Manifest icons

  2. web.dev: Add a web app manifest

  3. MDN: rel="icon"

Share this post