In 2025, there are three viable favicon formats: ICO, PNG, and SVG. Each has different strengths, browser support, and use cases. Here's when to use each — and the recommended setup that covers all bases.
ICO format
What it is
ICO is a container format that bundles multiple image sizes into a single file. A modern favicon.ico should embed PNG images at 16×16, 32×32, and 48×48 px. The browser automatically selects the most appropriate size.
Browser support
Universal — every browser since Internet Explorer 5 (1999). Chrome, Firefox, Safari, Edge, and every mobile browser read favicon.ico from the root of your domain without requiring a <link> tag.
Pros
- Widest compatibility — zero browsers excluded
- No
<link>tag required; works from the root automatically - Single file covers multiple sizes
Cons
- Slightly larger file than an individual PNG
- Cannot be truly resolution-independent (unlike SVG)
PNG format
What it is
PNG is a raster image format. For favicons, you specify it explicitly with a <link> tag and size attribute, e.g. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.
Browser support
All modern browsers support PNG favicons. IE11 and below do not — another reason to keep favicon.ico as a fallback.
Pros
- Supports transparency — great for tabs with colored backgrounds
- Smaller file size than ICO at a single size
- Sharp at defined pixel dimensions
Cons
- Separate files needed for each size
- Requires explicit
<link>tags - Not resolution-independent (blurry if scaled unexpectedly)
SVG format
What it is
SVG (Scalable Vector Graphics) is a resolution-independent format. An SVG favicon stays perfectly sharp at any size — useful on very high-DPI displays.
Browser support
Chrome 80+, Firefox 41+, Edge 80+. Not supported in Safari (as of 2025, Safari still ignores rel="icon" type="image/svg+xml"). iOS Safari also doesn't support SVG favicons.
SVG favicons and dark mode
This is SVG's killer feature. You can embed a <style> block with a @media (prefers-color-scheme: dark) rule that swaps the icon colors automatically:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
circle { fill: #0f766e; }
@media (prefers-color-scheme: dark) {
circle { fill: #14b8a6; }
}
</style>
<circle cx="50" cy="50" r="50"/>
</svg>Pros
- Resolution-independent — looks crisp on any screen
- Dark mode support via CSS media queries
- Tiny file size
Cons
- Not supported in Safari or iOS Safari — major gap for mobile
- Requires a fallback for unsupported browsers
The recommended setup in 2025
Use all three formats with ICO and PNG as the reliable baseline and SVG as a progressive enhancement:
<!-- Progressive enhancement: SVG first for supporting browsers -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Fallback to PNG for modern browsers that don't support SVG favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Universal fallback (ICO), loaded automatically by older browsers -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android / PWA -->
<link rel="manifest" href="/site.webmanifest">Quick recommendation
For most websites in 2025:
- Start with the favicon generator to create ICO + PNG + webmanifest package (covers everything).
- If your brand icon is a simple geometric shape, also export it as SVG and add the SVG link as the first line above ICO/PNG.
- Skip SVG-only setups until Safari adds support.
Generate your complete favicon package (favicon.ico, PNG sizes, apple-touch-icon, webmanifest) in one click — free, no account: favicon-generator →