image/4/io
Size Reference· Reference

Favicon sizes guide

The favicon and app-icon sizes a modern website actually needs, without the usual junk drawer of unnecessary exports.

Favicon pages become useful when they remove noise. The goal is a short list of files that cover mainstream browser, iOS, and Android expectations cleanly.

Core sizes

16, 32, 48, 180, 192, 512

Primary files

ICO plus PNG exports

Watch closely

Small-size legibility

Recommendation

Keep a multi-size `favicon.ico` plus PNG exports for 180, 192, and 512 pixels. That covers the main browser, Apple touch icon, and Android-style app manifest needs without overproducing files.

Basic favicon link set

<link rel="icon" href="/favicon/favicon.ico" sizes="any" />
<link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png" sizes="180x180" />
<link rel="icon" type="image/png" href="/favicon/android-chrome-192x192.png" sizes="192x192" />

Design advice

  • Simplify the mark for tiny sizes.
  • Do not assume the main logo scales down cleanly.
  • Test the icon in tabs, bookmarks, and mobile contexts separately.

Why this page is safe to scale

The requirement is stable, technical, and reusable. That makes it a much better candidate than speculative platform-size directories.

Checklist

  • Generate a multi-size ICO.
  • Export 180, 192, and 512 PNG variants.
  • Simplify the mark for tiny display sizes.
  • Verify tab and mobile-icon rendering.

Common mistakes

  • Using the full logo lockup where only a tiny mark will render.
  • Shipping dozens of barely different icon files with no maintenance plan.
  • Ignoring Apple touch and manifest contexts.

Quick answers

Which favicon sizes matter most?

The practical set is 16, 32, and 48 inside the ICO file, plus 180, 192, and 512 PNG exports for touch and app contexts.

Can I use the same artwork for every icon size?

Not always. Small icons often need a simplified version of the brand mark.