Favicon Size Requirements — Complete Guide to Favicon Dimensions

Favicons appear in multiple contexts across browsers, devices, and operating systems — each with different size requirements. Providing the right sizes ensures your icon looks sharp everywhere from browser tabs to phone home screens.

Use the Favicon Generator to generate all favicon sizes from a single source image.

Complete favicon size reference

Browser tab and bookmarks

Size	Format	Context
16×16	ICO/PNG	Browser tabs, address bar, bookmarks bar
32×32	ICO/PNG	Taskbar shortcut, Windows browser tabs (Retina)
64×64	ICO	Windows desktop shortcut
any	SVG	Modern browsers — scales to any size

Apple devices (iOS/macOS)

Size	Format	Context
180×180	PNG	iOS 8+ home screen icon
167×167	PNG	iPad Pro home screen
152×152	PNG	iPad home screen
120×120	PNG	iPhone Retina home screen
57×57	PNG	iPhone non-Retina (legacy, iOS 6 and earlier)

The most important Apple size is 180×180. Modern iPhones use this for “Add to Home Screen.”

Android and PWA

Size	Format	Context
192×192	PNG	Android home screen, Chrome for Android
512×512	PNG	PWA splash screen, Play Store
48×48	PNG	Android notification icon

These sizes are referenced in your site.webmanifest file, not directly in HTML.

Windows (pinned sites / taskbar)

Size	Format	Context
70×70	PNG	Windows 8/10 small tile
150×150	PNG	Windows 8/10 medium tile
310×150	PNG	Windows 8/10 wide tile
310×310	PNG	Windows 8/10 large tile

These are referenced in a browserconfig.xml file for Windows-specific integration (less critical for most sites).

Minimum viable setup

For 95% of sites, these files cover all important contexts:

favicon.ico        (contains 16×16, 32×32, 48×48)
favicon.svg        (scalable, modern browsers)
apple-touch-icon.png  (180×180)
favicon-192.png    (192×192, Android)
favicon-512.png    (512×512, PWA splash)

HTML:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

site.webmanifest:

{
  "name": "Your Site",
  "icons": [
    { "src": "/favicon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/favicon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

The ICO container format

A single favicon.ico file can embed multiple sizes:

# Using ImageMagick to create a multi-size ICO:
convert favicon-16.png favicon-32.png favicon-48.png favicon.ico

# Verify contents:
identify favicon.ico
# favicon.ico[0] PNG 16x16
# favicon.ico[1] PNG 32x32
# favicon.ico[2] PNG 48x48

When a browser requests favicon.ico, it reads the appropriate embedded size for its context. No need to serve multiple ICO files.

Designing for small sizes

At 16×16 pixels, there are only 256 pixels to work with. Complex logos become unrecognizable. Design principles:

Simplify aggressively: Remove text, thin strokes, and fine details. Use only the most recognizable part of your logo.

Test at actual size: View your 16×16 design at 100% zoom — not zoomed in. What looks OK at 200% often looks like a blob at actual size.

Use high contrast: The icon appears against various browser UI backgrounds (light, dark, system themes). High contrast between the icon and its background helps.

Consider a lettermark: If the full logo doesn’t simplify well, a single letter or monogram on a solid background works better at small sizes than a complex mark.

Avoid thin lines: At 16×16, a 1px line is 1/16th of the image height. It may not render at all on non-Retina screens. Use thick, bold shapes.

Source image recommendations

Start with a high-resolution source image and downscale:

Recommended source: 512×512 or 1024×1024 SVG or PNG

Starting from a small source and upscaling always produces worse results than downscaling from large. If you only have a small logo, recreate it as a vector first.

Generating all sizes from one source:

from PIL import Image

SIZES = [16, 32, 48, 64, 128, 180, 192, 512]

def generate_favicon_sizes(source_path):
    img = Image.open(source_path).convert('RGBA')
    
    for size in SIZES:
        resized = img.resize((size, size), Image.LANCZOS)
        resized.save(f'favicon-{size}.png')
    
    # Create ICO with multiple sizes:
    ico_images = [img.resize((s, s), Image.LANCZOS) for s in [16, 32, 48]]
    ico_images[0].save('favicon.ico', format='ICO', append_images=ico_images[1:],
                       sizes=[(16,16), (32,32), (48,48)])
    
    print(f'Generated {len(SIZES)} sizes + ICO')

generate_favicon_sizes('logo-1024.png')

Retina / HiDPI considerations

On Retina (2× density) and 3× density displays, browsers use higher-resolution icons when available. The SVG approach handles this automatically — it renders at whatever resolution the display needs.

For PNG/ICO fallbacks, browsers will scale up the best available size. A 32×32 PNG displayed at 16×16 CSS pixels on a 2× Retina display renders at 32×32 device pixels — sharp. A 16×16 PNG on 2× display renders at 16×16 device pixels — blurry.

This is another reason to include SVG as the primary favicon format.

Related tools

• Favicon Generator — generate all favicon sizes automatically
• Favicon ICO Guide — ICO format details
• How to Add Favicon — HTML implementation guide