ICO vs PNG vs SVG: Which Favicon Format Should You Use?

Three formats matter for favicons: ICO, PNG, and SVG. They each do different things well, and most sites should use all three.

The Strengths of Each Format

ICO: The Legacy Standard

The ICO format dates back to 1999 and Internet Explorer 5. A single .ico file can hold multiple images at different sizes (typically 16, 32, and 48 pixels). The browser picks the best size for the context without needing separate files.

The downside: ICO files are raster-based, so they do not scale beyond their embedded sizes. No dark mode support, and file sizes run larger than they should because they contain multiple uncompressed bitmaps.

PNG: The Workhorse

PNG is the most widely used favicon format today. Transparency, good compression, easy to create. Every browser supports PNG favicons, and most generators output PNG as their primary format.

Each PNG is a single size, though. Serving different sizes means multiple files and multiple <link> tags. PNG cannot adapt to dark mode (the pixels are fixed), and quality degrades when the browser scales a PNG to a size it was not made for.

SVG: The Modern Standard

SVG favicons are vector graphics, so they are resolution-independent. One file looks sharp at 16 pixels or 512 pixels. File sizes tend to be smaller than equivalent PNGs because vectors describe shapes mathematically instead of storing pixels.

The biggest advantage is dark mode support. SVG files can include CSS media queries that switch colors when the user has a dark browser theme. No other format can do this.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #DA7756; }
    @media (prefers-color-scheme: dark) {
      path { fill: #F0B08A; }
    }
  </style>
  <path d="M16 2 L30 28 H2 Z"/>
</svg>

Full Comparison

Browser Support Matrix

The radar chart above gives a general sense of format support, but if you need specifics, here is exactly which browsers support which favicon format, with the version that introduced support.

File Size Comparison

File size matters more than you might think. Your favicon loads on every page view, and while browsers cache it aggressively, the first load counts, especially for Core Web Vitals and for Googlebot, which evaluates your site on first visit.

Here are real-world file sizes measured from a typical geometric icon (a stylized letter in a circle). These are not theoretical minimums; they are what you actually get from standard tools.

The ICO file at 15.4 KB contains three uncompressed bitmaps (16, 32, and 48 pixels). Some generators pack even more sizes in (64, 128, 256), pushing ICO files past 100 KB. A single 32px PNG is under 2 KB. An SVG of a simple icon is under 1 KB because it stores mathematical descriptions of paths, not pixels.

Complex SVGs with many paths and gradients can exceed PNG sizes, but for typical favicon-level complexity (a simple logo mark, a letter, a geometric shape), SVG consistently wins on file size. The key insight: a single SVG replaces the need for multiple PNGs at different sizes while being smaller than any one of them.

The SVG Dark Mode Trick

This is the single best reason to use SVG favicons. You can embed a CSS media query inside your SVG that detects whether the user has dark mode enabled, and swap colors accordingly. No JavaScript, no extra files, no server-side logic. The browser handles it automatically.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #ffffff; }
    .icon { fill: #1a1a2e; }
    .accent { fill: #DA7756; }

    @media (prefers-color-scheme: dark) {
      .bg { fill: #1a1a2e; }
      .icon { fill: #ffffff; }
      /* accent stays the same — brand color works on both */
    }
  </style>
  <!-- Background circle -->
  <circle class="bg" cx="16" cy="16" r="15" />
  <!-- Icon shape -->
  <path class="icon" d="M10 8h4l8 16h-4L10 8z" />
  <!-- Accent dot -->
  <circle class="accent" cx="22" cy="10" r="3" />
</svg>

A few things to note about this approach. First, the prefers-color-scheme media query inside SVG works in Chrome 80+, Firefox 41+, and Safari 15+. Those are the same browsers that support SVG favicons in the first place, so you get dark mode support everywhere that SVG favicons work. Second, you can use any CSS properties in the embedded stylesheet: fill, stroke, opacity, even CSS filters. Third, the dark mode switch happens instantly when the user toggles their system theme. No page reload needed.

The practical benefit: your favicon never disappears against the tab bar. A dark favicon on a dark tab bar is invisible, as is a light favicon on a light tab bar. With the SVG dark mode trick, you handle both cases in a single file under 1 KB.

When You Should Use Each Format

The right format depends on your constraints. Here is a decision framework that covers the most common scenarios:

Do you need to support IE11? If yes, you need an ICO file. IE11 does not support PNG favicons reliably and does not support SVG at all. The ICO should contain 16, 32, and 48 pixel versions. If you are still getting measurable IE11 traffic (check your analytics), keep the ICO. Otherwise, skip it.

Do you care about dark mode? If yes, you need an SVG. It is the only format that can adapt to the user's color scheme. Use it as your primary favicon with type="image/svg+xml".

Do you need to support iOS? You almost certainly do. iOS Safari requires a 180x180 PNG as the apple-touch-icon. No way around it. This is a PNG you need regardless of your primary format choice.

Are you building a PWA? The web app manifest requires PNG icons at 192x192 and 512x512 pixels. SVG is not supported in manifest icon declarations as of 2025. You need PNGs here.

The "quick setup" option deserves a note: a single 48x48 PNG declared as <link rel="icon" sizes="48x48"> works in every modern browser for tab icons. You lose dark mode support (SVG), iOS home screen icons (apple-touch-icon), and PWA install (manifest icons), but for a blog or a documentation site where those do not matter, one file gets the job done.

The Recommended Setup

Use all three. SVG as the primary favicon for modern browsers, ICO as a fallback for older ones, and PNG for platforms that need fixed sizes (Apple Touch, Android Chrome, social previews).

<!-- SVG for modern browsers (with dark mode support) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

<!-- ICO fallback for legacy browsers -->
<link rel="icon" href="/favicon.ico" sizes="48x48" />

<!-- Apple Touch for iOS (must be PNG) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

<!-- Web manifest for Android and PWA -->
<link rel="manifest" href="/site.webmanifest" />

Four lines, every browser covered. SVG-capable browsers use the SVG and get dark mode for free. Others fall back to ICO. Apple devices use the touch icon. Android reads the manifest.