Hey there! Let’s break down everything you need to know about favicon specs for 2022 and 2024—covering major devices, formats, tags, and that burning question about "one-size-fits-all" solutions. I’ve spent plenty of time troubleshooting these for projects, so let’s dive in.

苹果设备（iOS/macOS） #

Apple’s ecosystem relies mostly on apple-touch-icon assets, with a few key rules:

• 尺寸:
  • iPhone (including Retina): 180x180px (most critical for modern devices)
  • iPad: 167x167px
  • Mac touch bar: 32x32px
• 格式: PNG is the safe default (all iOS/macOS versions support it). SVG is supported on iOS 15+ and macOS 12+, but older versions will ignore it.
• 标签:

  <!-- Primary iPhone icon -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <!-- iPad icon -->
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-ipad.png">
  <!-- Optional: Precomposed (avoids iOS adding rounded corners automatically) -->
  <link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon-precomposed.png">
  

  Note: iOS automatically adds rounded corners and a gloss effect unless you use the precomposed variant.

Windows设备 #

Windows focuses on tiles for Start menu and taskbar, plus traditional favicons for browsers:

• 尺寸:
  • Small tile: 70x70px
  • Medium tile: 150x150px
  • Large tile: 310x310px
  • Traditional favicon: 16x16, 32x32px (included in ICO file)
• 格式: PNG for tiles, ICO for traditional favicons. SVG is supported in modern Edge (Chromium-based), but tile assets still need PNGs.
• 标签 & 配置:
  First, link to a browserconfig.xml file:

  <meta name="msapplication-config" content="/browserconfig.xml">
  

  Then in browserconfig.xml:

  <?xml version="1.0" encoding="utf-8"?>
  <browserconfig>
    <msapplication>
      <tile>
        <square70x70logo src="/mstile-70x70.png"/>
        <square150x150logo src="/mstile-150x150.png"/>
        <square310x310logo src="/mstile-310x310.png"/>
        <TileColor>#2b5797</TileColor>
      </tile>
    </msapplication>
  </browserconfig>
  

Android设备 #

Android (via Chrome and other Chromium browsers) uses a web app manifest for consistent icons:

• 尺寸: 192x192px (for home screen) and 512x512px (for splash screens/install prompts)
• 格式: PNG or SVG (Chromium 80+ supports SVG in manifests)
• 配置:
  Create a manifest.json file:

  {
    "name": "Your App Name",
    "short_name": "App",
    "icons": [
      {
        "src": "/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "/icon-512x512.svg",
        "sizes": "512x512",
        "type": "image/svg+xml"
      }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
  }
  

  Then link it in your HTML:

  <link rel="manifest" href="/manifest.json">
  <!-- Optional: Theme color for Chrome address bar -->
  <meta name="theme-color" content="#ffffff">
  

Let’s weigh the pros and cons for each format:

• PNG:
  • Pros: 100% compatibility across all devices/browsers, easy to generate for specific sizes.
  • Cons: Requires multiple files for different resolutions, file sizes can be larger than SVG for complex icons.
• ICO:
  • Pros: Single file can contain multiple bitmap sizes (16x16, 32x32, 48x48) for desktop browsers, no extra tags needed (most browsers auto-detect /favicon.ico).
  • Cons: Bitmap-based (no scaling), can’t support dynamic effects, limited to small sizes.
• SVG:
  • Pros: Vector-based (infinite scaling without quality loss), tiny file sizes, supports CSS animations/hover effects, works on all modern browsers (2022+).
  • Cons: Not supported on older browsers (IE11 and below), some older mobile devices (iOS <15, Android <10) ignore SVG favicons.

From my testing, Opera (Chromium-based, versions 15+) has full support for SVG favicons—just like Chrome and Edge. In 2024, SVG is absolutely the optimal choice for modern audiences because it adapts to any screen resolution, reduces your asset count, and lets you add subtle dynamic touches (like a color change on hover, if the browser supports it).

That said, if you need to support older devices, you’ll still need a fallback (like an ICO or PNG) for those that don’t recognize SVG.

Is there a single file that works everywhere? Short answer: Not quite. Here’s why:

• SVG works on all modern browsers, but fails on older iOS/Android versions and IE.
• ICO covers desktop browsers, but doesn’t handle mobile touch icons or tiles.
• PNG is universal, but requires multiple sizes for different devices.

The closest you can get is a hybrid approach:

1. Use SVG as your primary favicon for modern browsers.
2. Include an ICO file as a fallback for older desktop browsers.
3. Add PNG assets for Apple touch icons and Windows tiles.

This covers 99% of users without overcomplicating things.

ICO Implementation #

First, create an ICO file that includes at least 16x16, 32x32, and 48x48 sizes (you can use tools like ImageMagick or online converters to combine PNGs into an ICO). Then add this tag to your <head>:

<!-- Fallback for older desktop browsers -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

Most browsers will automatically look for /favicon.ico in your root directory even if you don’t add this tag, but explicitly including it is safer.

SVG Implementation #

For modern browsers, add this tag (place it before the ICO tag if you want SVG to take priority):

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

If your SVG has dynamic effects (like CSS animations), they’ll work in browsers that support SVG favicons (Chrome, Firefox, Opera, Edge).

Full Combined Implementation #

Here’s a complete snippet that covers all bases:

<head>
  <!-- Modern SVG Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <!-- ICO Fallback -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico">

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

  <!-- Windows Tile Configuration -->
  <meta name="msapplication-config" content="/browserconfig.xml">

  <!-- Android Manifest -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#2b5797">
</head>

内容的提问来源于stack exchange，提问作者Jakub Muda