Favicon Sizes Guide — All Sizes, Transparent Background, ICO vs PNG (2026)

A favicon is not one file — it is a set of files at different sizes for different platforms. Browser tabs need 16x16. iPhones need 180x180. Android needs 512x512. Here is every size, where it is used, and when each format matters.

Complete Favicon Size Table

Size	Format	Where It Appears	Required?
16x16	PNG	Browser tabs (Chrome, Firefox, Safari, Edge)	Yes — the core favicon
32x32	PNG	Windows taskbar shortcuts, high-DPI browser tabs	Yes — crisp on modern displays
48x48	PNG/ICO	Windows desktop shortcuts, site icons	Recommended
64x64	PNG	Older Windows shortcuts, some Linux DEs	Optional
96x96	PNG	Google TV, some alternative browsers	Optional
128x128	PNG	Chrome Web Store icons	Only for Chrome extensions
180x180	PNG	Apple touch icon — iOS home screen, iPad	Yes — required for Apple devices
192x192	PNG	Android Chrome home screen shortcut	Yes — required for Android
256x256	PNG	Windows high-DPI shortcuts	Optional
512x512	PNG	Android splash screen, PWA install banner	Yes — progressive web apps
Any	ICO	Universal fallback — all browsers, all platforms	Yes — maximum compatibility
Any	SVG	Modern browsers (Chrome, Firefox, Edge)	Optional — progressive enhancement

The favicon generator creates the essential sizes (16, 32, 48, 180, 192, 512 + ICO) from a single image upload. That covers every real-world use case.

ICO vs PNG vs SVG — When to Use Each

Format	Pros	Cons	Use Case
ICO	Multi-resolution in one file, universal support, works in all browsers including legacy	Larger file size, outdated format, limited to bitmap data	favicon.ico in root directory as universal fallback
PNG	Small file size, transparency support, standard web format, sharp rendering	One file per size, no multi-resolution	Link tags for specific sizes (16, 32, 180, 192, 512)
SVG	Scales infinitely, supports CSS (including dark mode), tiny file size	Limited browser support (no Safari favicon, no iOS), cannot use for apple-touch-icon	Progressive enhancement for modern browsers only

The practical answer: use all three. ICO as a fallback. PNG for explicit sizes. SVG as an optional bonus if you have one.

Transparent Background Rules

Transparency works differently depending on the platform:

Platform	Transparent Background Support	What Happens
Chrome tab	✓ Fully supported	Transparent areas show the tab background color
Firefox tab	✓ Fully supported	Transparent areas show through
Safari tab	✓ Fully supported	Transparent areas show through
Windows taskbar	✓ Supported	Transparent areas match taskbar color
iOS home screen	✗ NOT supported	iOS adds a white background behind transparent icons
Android home screen	~Partial	Android may add a white circle or background depending on launcher
Bookmarks bar	✓ Supported	Transparent areas blend with bar background

Key takeaway: if your audience uses iPhones (and they probably do), design your 180x180 apple-touch-icon with a solid background. A transparent icon with a forced white background rarely looks intentional.

How to Create a Transparent Favicon

1. Start with a PNG image that has a transparent background — JPEG does not support transparency
2. If your logo has a solid background, remove the background first
3. Upload the transparent PNG to the favicon generator
4. All output PNG files will preserve the transparency
5. For the apple-touch-icon, consider making a separate version with a solid brand-colored background

The Apple Touch Icon Problem

When someone saves your website to their iPhone home screen, iOS uses the 180x180 apple-touch-icon. iOS does not support transparency in home screen icons — it fills transparent areas with white. This means:

• A transparent icon designed for browser tabs will get an ugly white square behind it on iOS
• The solution: create a separate apple-touch-icon with a solid background in your brand color
• Many sites use a rounded-corner square with their icon centered — this looks intentional and polished

SVG Favicons — The Modern Option

SVG favicons are a newer standard with a compelling advantage: one file that scales perfectly to any size. The HTML looks like:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

SVG favicons can even respond to dark mode:

<svg>
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="..."/>
</svg>

Limitations: Safari support is recent and inconsistent. iOS ignores SVG favicons entirely (uses apple-touch-icon). Always include PNG and ICO fallbacks alongside SVG. If you only have an SVG, convert it to PNG first for the favicon generator.

File Size Considerations

File	Typical Size	Can You Optimize?
favicon.ico	~15 KB	Not easily — ICO format is already compact
favicon-16x16.png	~1 KB	Yes, but at this size it makes no difference
favicon-32x32.png	~2 KB	Yes, but not worth the effort
apple-touch-icon.png	~5-15 KB	Compress if over 20 KB
android-chrome-192.png	~10-20 KB	Compress if over 30 KB
android-chrome-512.png	~20-50 KB	Compress if over 60 KB

Total favicon payload for a typical site: under 100 KB. Not worth over-optimizing. If your android-chrome-512x512 is unusually large, compress it and move on.

Quick-Start Checklist

1. Crop your logo to a square
2. Resize to 512x512+ if it is smaller
3. Remove background for transparency (optional)
4. Generate all favicon sizes
5. Upload files + add HTML link tags to your site
6. Generate meta tags and check Open Graph while you are at it