ICO vs PNG vs SVG: Which Favicon Format Should You Use?
A practical comparison of the three major favicon formats. When to use each one, browser support data, and the recommended modern setup.
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>Safari caveat
mask-icon) used a monochrome SVG. The modern SVG favicon has full color.Full Comparison
| Feature | ICO | PNG | SVG |
|---|---|---|---|
| Multi-resolution in one file | |||
| Transparency | |||
| Dark mode adaptation | |||
| Scales to any size | |||
| Chrome support | |||
| Firefox support | |||
| Safari desktop | |||
| Safari iOS | |||
| Edge support | |||
| Easy to create | |||
| Small file size |
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.