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-travelled 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:

PNG: The Standard

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

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:

SVG: The Future

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

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:

The Verdict

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

Use all three:

Design Principles for Tiny Icons

Simplicity is Survival

  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

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 colours
  • Focus on recognition over detail
  • Test at actual size (zoom out!)

Don't:

Colour Strategy

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

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:

Shape Psychology

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

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:

The Squint Test

  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

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:

Android: Flexibility Rules

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

Android is more forgiving but benefits from:

Windows: Tiles and Pins

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

Windows uses larger sizes for pinned sites:

Creating Your Favicon Set

Step 1: Design at Large Size

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

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:

Step 3: Export Properly

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

PNG: Use 32-bit colour with alpha

ICO: Include 16, 32, and 48px sizes

SVG: Optimise with SVGO, inline styles

Step 4: Test Everything

Before going live:

Future-Proofing Your Favicons

Prepare for New Contexts

  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

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:

Common Mistakes to Avoid

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

1. Using Your Full Logo

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

2. Forgetting Background Colours

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.