The Modern Favicon Guide: ICO, PNG, SVG, and Web App Manifests

A Brief History of the Favicon

The favicon (short for "favorite icon") was introduced by Internet Explorer 5 in 1999 as a 16×16 ICO file displayed in the address bar. The W3C standardized it in 2000 using the <link rel="shortcut icon"> HTML element.

Over the following two decades, the requirement expanded dramatically:

• 2007: Apple introduced the Apple Touch Icon (57×57 PNG) for iOS bookmarks
• 2010: Android Chrome added support for web app icons
• 2012: Windows 8 introduced tile icons for pinned Metro apps
• 2019: SVG favicons gained browser support, enabling resolution-independent and dark-mode-aware favicons
• 2023: PWA installation requirements standardized at 192×192 and 512×512

All Required Favicon Sizes in 2026

SVG Favicons: Adaptive Dark Mode Support

SVG favicons support CSS media queries, enabling light/dark mode responsive icons:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    @media (prefers-color-scheme: dark) {
      path { fill: white; }
    }
  </style>
  <path fill="black" d="M10,10 L90,10 L90,90 L10,90 Z"/>
</svg>

This SVG automatically shows a light icon in light mode and a dark icon in dark mode — perfect for logos that need to adapt to system themes.

Generate a Complete Favicon Set on ToolDolfen

1. Open the ToolDolfen Favicon Generator.
2. Upload a high-resolution square PNG (512×512 or 1024×1024 recommended — larger source = better quality at all sizes).
3. The generator produces a complete ZIP package containing:

- All required PNG sizes - ICO file (multi-resolution) - web manifest JSON template - HTML code snippets for <head> implementation

1. Extract the ZIP and place the files in your project's public directory.
2. Add the provided HTML snippets to your <head>.