Back to all guides
Tips & Best Practices

Favicon Design Best Practices for 2025: Size, Format, and Strategy

Expert tips on creating favicons that work perfectly across all platforms. Includes size guidelines, format choices, and design principles.

8 min read
Free Guide

Favicons might be tiny, but they're mighty. That 16×16 pixel square in your browser tab carries your brand identity, helps users navigate between tabs, and can even boost your site's perceived professionalism. Yet most sites still use blurry, badly sized icons that look like they time-traveled from 2005.

This guide covers everything you need to know about favicon design in 2025 - from technical requirements to design principles that ensure your icon looks sharp everywhere.

The Size Matrix: What You Actually Need

Forget the old days of just favicon.ico. Modern devices demand multiple sizes:

Essential Sizes

16×16 - Browser tabs (standard resolution)

32×32 - Browser tabs (high-DPI/Retina)

180×180 - Apple Touch Icon (iOS home screen)

192×192 - Android Chrome (home screen)

512×512 - PWA splash screens

Nice-to-Have Sizes

48×48 - Windows taskbar

64×64 - Windows site icons

96×96 - Google TV

128×128 - Chrome Web Store

256×256 - macOS Safari pinned sites

The Reality Check

You don't need every size. Start with the essentials and add others based on your audience. Check your analytics - if 80% of your users are on desktop Chrome, prioritise those sizes.

Format Wars: ICO vs PNG vs SVG

ICO: The Classic

Still required for maximum compatibility. Can contain multiple sizes in one file. Use for your primary favicon.ico.

Pros:

  • Universal browser support
  • Multiple sizes in one file
  • Works everywhere

Cons:

  • Larger file size
  • No alpha transparency in older browsers
  • Pain to generate

PNG: The Standard

The modern choice for most favicon sizes. Excellent compression, full transparency support.

Pros:

  • Smaller file sizes
  • True alpha transparency
  • Easy to generate
  • Sharp on all displays

Cons:

  • Need separate files for each size
  • Not supported by ancient browsers (pre-2010)

SVG: The Future

Scalable vector favicons are finally getting broad support. One file, infinite sizes.

Pros:

  • Perfect at any size
  • Tiny file size
  • Can include CSS/animations
  • Future-proof

Cons:

  • Limited browser support (no Safari as of 2025)
  • Can't use for apple-touch-icon
  • Complex logos may not scale well

The Verdict

Use all three:

  1. 1ICO for maximum compatibility (favicon.ico)
  2. 2PNG for specific sizes (apple-touch-icon, android icons)
  3. 3SVG as a progressive enhancement where supported

Design Principles for Tiny Icons

Simplicity is Survival

Your logo might have beautiful gradients, intricate details, and clever negative space. Your favicon can't. At 16×16 pixels, details become noise.

Do:

  • Use bold, simple shapes
  • Stick to 1-2 colors
  • Focus on recognition over detail
  • Test at actual size (zoom out!)

Don't:

  • Include text (unless it's 1-2 letters)
  • Use thin lines
  • Add shadows or effects
  • Try to fit your entire logo

Color Strategy

High Contrast is King

Your favicon needs to work on light tabs, dark tabs, and whatever custom theme your users have. Test on multiple backgrounds.

Consider Dark Mode

More users than ever browse in dark mode. That black logo might disappear entirely. Consider:

  • Adding a subtle white outline
  • Creating dark/light variants
  • Using colors that work on any background

Shape Psychology

Square: Stable, trustworthy, professional

Circle: Friendly, inclusive, continuous

Triangle: Dynamic, innovative, directional

Abstract: Unique, creative, memorable

Choose based on your brand personality, but remember: clarity beats cleverness at small sizes.

Technical Implementation Tips

Pixel-Perfect Alignment

Favicons render at exactly 16×16 or 32×32 pixels. Design on a pixel grid:

  1. 1Start with a 512×512 canvas
  2. 2Design your icon
  3. 3Scale down to 16×16
  4. 4Manually adjust pixels for clarity
  5. 5Scale back up for larger sizes

The Squint Test

Can't tell if your favicon is recognisable? Squint at it. If you can't identify it with blurred vision, simplify.

Testing Across Contexts

Your favicon appears in more places than you think:

  • Browser tabs (active/inactive)
  • Bookmarks menu
  • History listings
  • Search results
  • Social media shares
  • Password managers
  • RSS readers

Test everywhere that matters to your audience.

Platform-Specific Considerations

iOS: The Special Snowflake

Apple devices ignore your favicon and use apple-touch-icon. Requirements:

  • Must be PNG
  • Recommended: 180×180
  • No transparency (iOS adds rounded corners)
  • Design for a 20% corner radius

Android: Flexibility Rules

Android is more forgiving but benefits from:

  • Multiple sizes in manifest.json
  • Transparent backgrounds for adaptive icons
  • Consider safe zones for different mask shapes

Windows: Tiles and Pins

Windows uses larger sizes for pinned sites:

  • Provide 150×150 and 310×310 for tiles
  • Use solid backgrounds (transparency looks bad)
  • Consider live tiles for dynamic content

Creating Your Favicon Set

Step 1: Design at Large Size

Start with a 1024×1024 or 512×512 master. This becomes your source for all sizes.

Step 2: Create Size Variants

Don't just scale down. Optimise each size:

  • 512×512: Full detail, your complete icon
  • 192×192: Slightly simplified
  • 32×32: Remove fine details
  • 16×16: Maximum simplification

Step 3: Export Properly

PNG: Use 32-bit color with alpha

ICO: Include 16, 32, and 48px sizes

SVG: Optimise with SVGO, inline styles

Step 4: Test Everything

Before going live:

  1. 1Test in all major browsers
  2. 2Check on Retina/high-DPI displays
  3. 3Verify on mobile devices
  4. 4Bookmark your site and check the icon
  5. 5Share on social media to see previews

Future-Proofing Your Favicons

Prepare for New Contexts

Favicons appear in new places constantly:

  • Browser grouped tabs
  • OS-level site permissions
  • AR/VR browsers
  • Voice assistant visual feedback
  • Smartwatch browsers

Design with flexibility in mind.

Dark Mode Variants

CSS prefers-color-scheme is coming to favicons. Prepare light/dark variants now:

<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">

Animation (Use Sparingly)

Animated favicons are possible but risky:

  • Can be distracting
  • Increases file size
  • May hurt performance
  • Use only for temporary states (notifications)

Common Mistakes to Avoid

1. Using Your Full Logo

Your complete company logo rarely works at 16px. Create a simplified mark.

2. Forgetting Background Colors

Transparent favicons can disappear on certain backgrounds. Test thoroughly.

3. Ignoring File Size

A 500KB favicon hurts performance. Optimise aggressively.

4. Text at Small Sizes

Unless it's a single letter or two, text becomes illegible mud.

5. Over-Designing

The best favicons are often the simplest. When in doubt, simplify more.

Testing Tools and Resources

Real Favicon Generator: Tests across all platforms

Favicon Checker: Validates implementation

Browser DevTools: Check loading and rendering

Physical Devices: Nothing beats real-world testing

The Bottom Line

Great favicons are:

  • Simple enough to recognise at 16px
  • Flexible enough to work everywhere
  • Optimised for performance
  • Tested across all contexts

Spend the time to get it right. Your favicon is often the first and last thing users see of your brand. Make those pixels count.

Want to generate all these sizes automatically? Try Unwrite's Favicon Generator - upload once, get every size you need, all processed privately in your browser.