Technical Guide

Favicon Sizes Guide

Complete guide to all favicon sizes you need for full coverage across browsers and devices.

Why Multiple Sizes Matter

Modern websites display favicons in various contexts—from tiny 16x16 address bar icons to large 512x512 splash screens. Using the correct size for each context ensures your icon always looks crisp and professional.

When you provide multiple sizes, browsers automatically select the most appropriate one. This prevents pixelation at larger sizes and excessive scaling at smaller sizes.

Essential Favicon Sizes

These are the core favicon sizes every website should have:

16x16

Essential

Format: PNG

Address bar, legacy browsers, bookmarks

32x32

Essential

Format: PNG

Browser tabs, modern browsers

96x96

Format: PNG

Desktop shortcuts, Windows tiles

192x192

Essential

Format: PNG

Android home screen, PWA icons

512x512

Essential

Format: PNG

Splash screens, high-res icons

Standard Favicon File Structure

Here's how to structure your favicon files in your project:

public/
├── favicon.ico           # Legacy, auto-generated by browsers
├── favicon-16x16.png    # Small size (address bar)
├── favicon-32x32.png    # Standard size (browser tabs)
├── favicon-96x96.png    # Desktop shortcuts
├── apple-touch-icon.png   # iOS home screen (180x180)
└── manifest.json         # PWA configuration

Apple Touch Icon Sizes

iOS devices require specific icon sizes for the home screen. Modern iOS primarily uses 180x180, but providing all sizes ensures backward compatibility:

57x57

iPhone (non-retina)

60x60

iPhone (retina)

72x72

iPad (non-retina)

76x76

iPad (retina)

114x114

iPhone (retina)

120x120

iPhone (retina HD)

144x144

iPad (retina)

152x152

iPad (retina HD)

180x180

iPhone (retina HD) primary

Browser Coverage by Size

Different browsers and platforms use different sizes:

Chrome & Chromium

32x32 for tabs

192x192 for PWA

512x512 for splash

Firefox

16x16 for tabs

32x32 for bookmarks

ICO with multiple sizes

Safari

16x16 for tabs

180x180 apple-touch-icon

SVG support available

PWA Icon Sizes

Progressive Web Apps (PWAs) require additional icon sizes for installation and splash screens:

192x192

Primary PWA icon. Used for home screen shortcuts on Android and desktop installations. This is the most important PWA size.

512x512

Splash screen icon. Used when your PWA launches, displayed as a large loading icon on mobile devices.

Best Practices for Favicon Sizes

Follow these guidelines when creating favicons in multiple sizes:

Start with High Resolution

Create your source artwork at 512x512 or larger. When generating smaller sizes, downscaling from high resolution maintains quality.

Test Each Size

Preview your icon at every intended size. What works at 512x512 might become unreadable at 16x16. Simplify if needed.

Use Appropriate Formats

PNG for most sizes, ICO for legacy support, SVG for scalability. Favicon Tools generates all required formats automatically.

Maintain Consistency

All sizes should use the same design, scaled appropriately. This creates a cohesive brand experience across contexts.

Got your sizes sorted? Next, learn how to add a favicon to your website.

Generate All Favicon Sizes