Favicon Best Practices (2025): SVG/PNG, PWA Manifest, Dark Mode

Favicons have evolved from simple 16×16 pixel icons to a complex ecosystem of sizes, formats, and platform-specific requirements. In 2025, with PWAs becoming mainstream and browsers supporting advanced features like SVG favicons and dark mode variants, getting your favicon strategy right is more important—and more complicated—than ever. This comprehensive guide covers everything you need to implement perfect favicons across all platforms and devices.

Related: Icon Formats & Performance, iOS vs Android Icon Guidelines, A/B Testing Icons

Key Takeaways

• Ship PNG (16×16, 32×32) and ICO for broad favicon compatibility
• Add SVG favicon for modern browsers plus PNG fallbacks
• Include Apple touch icon (180×180 PNG, no transparency)
• Use a complete Web App Manifest with maskable icons for PWAs
• Cache icons long-term and test across browsers/modes

Why Favicons Still Matter

Despite being one of the web's oldest features (introduced in 1999), favicons are more relevant than ever. They're not just tiny logos—they're critical touchpoints in your user's journey.

The Business Impact

Where Favicons Appear in 2025

• Browser tabs: The primary use case, often at 16×16 or 32×32
• Bookmarks: Various sizes depending on browser and view
• Home screen: Mobile devices use larger sizes (up to 512×512)
• Browser history: Small icons next to visited pages
• Search results: Google shows favicons in mobile search
• Social shares: Some platforms use favicons as fallbacks
• PWA app icons: Full app icon when installed as PWA
• Browser extensions: Speed dial and new tab pages
• RSS readers: Feed identification
• Password managers: Site identification in vaults

Required Favicon Sizes in 2025

The days of a single favicon.ico are long gone. Modern websites need multiple sizes to ensure crisp display across all contexts.

Essential Sizes (Minimum Set)

Complete Size Matrix

File Formats & Color Spaces

Choosing the right format and color settings ensures your favicon looks perfect everywhere, from ancient browsers to cutting-edge devices.

Format Comparison

Color Space Considerations

• sRGB: Use this for all favicons. It's the web standard.
• Color depth: 8-bit per channel (24-bit total) is sufficient
• Transparency: Use alpha channel, but test on white and dark backgrounds
• Gamma: Ensure gamma is 2.2 for consistent display
• Color profile: Strip profiles to reduce file size (except for ICO)

Platform-Specific Requirements

Each platform has unique requirements and quirks. Get these right to ensure your favicon looks perfect everywhere.

Apple iOS/macOS

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Android Chrome

<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

HTML Implementation

Complete favicon implementation requires multiple link tags in your HTML head.

Modern Favicon Setup (2025)

<!-- SVG favicon for modern browsers -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Dark mode variant -->
<link rel="icon" type="image/svg+xml" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">

<!-- PNG fallbacks -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Legacy ICO -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android/Chrome -->
<link rel="manifest" href="/site.webmanifest">

<!-- Windows Metro -->
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

<!-- Safari Pinned Tab -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

PWA and Web App Manifest

Progressive Web Apps require a comprehensive manifest with properly sized icons.

Complete Manifest Example

{
  "name": "Icon Maker Studio",
  "short_name": "IconMaker",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

Maskable Icons

Maskable icons ensure critical content remains visible when Android applies adaptive masks. Design with a safe zone in the center 66% of the icon.

Dark Mode & Theming

Modern browsers support SVG favicons with CSS media queries for dark mode.

SVG with Dark Mode Support

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="..."/>
</svg>

Performance Optimization

Favicons should load quickly without impacting page performance.

Optimization Strategies

• Compress PNG files (60-80% reduction possible)
• Use SVG for modern browsers (often < 1KB)
• Set long cache headers (1 year recommended)
• Preload critical sizes
• Use versioned filenames for updates

Caching Headers

Cache-Control: public, max-age=31536000, immutable

Testing & Validation

Comprehensive testing ensures your favicons work everywhere.

Common Mistakes to Avoid

Automation & Build Tools

Automate favicon generation to save time and ensure consistency.

Recommended Tools

• Favicon Generator: Create all sizes from one source
• ImageMagick: Batch conversion and optimization
• Sharp: Node.js image processing
• SVGO: SVG optimization

Build Pipeline Example

// Generate all favicon sizes from source
const generateFavicons = async () => {
  const sizes = [16, 32, 48, 64, 96, 120, 128, 144, 152, 167, 180, 192, 256, 384, 512];
  const source = 'src/logo.png';
  
  for (const size of sizes) {
    await sharp(source)
      .resize(size, size)
      .png({ quality: 90 })
      .toFile(`public/favicon-${size}x${size}.png`);
  }
};

Conclusion

A complete favicon implementation takes time to set up initially but requires little maintenance afterward. The key is providing multiple formats and sizes to ensure compatibility across all platforms and devices.