favicon.ico vs PNG vs SVG - Which to Use?

No single favicon format wins every context in 2026. favicon.ico covers legacy automatic fetches and multi-size bundling. PNG gives precise per-size control in HTML. SVG scales cleanly on modern desktop browsers but needs PNG fallbacks for Safari tabs and iOS. The best production setup uses all three strategically, not one format alone.

This guide compares ICO, PNG, and SVG for browser tabs, bookmarks, iOS, and PWAs. You will know which file to ship where and how to wire HTML without breaking older clients.

Format comparison at a glance

Size requirements per context live in Favicon Sizes Explained. This article focuses on format choice.

favicon.ico - the legacy default

Browsers request https://yoursite.com/favicon.ico automatically, even when your HTML declares PNG or SVG. That behavior is hard-coded from early web history.

A proper ICO file can embed multiple bitmap sizes in one binary:

• 16x16 for tabs and bookmarks
• 32x32 for Hi-DPI tabs
• 48x48 for older Windows shell icons

Advantages:

• One HTTP request covers several sizes
• Works without any link tags (still not recommended)
• Email clients and crawlers often look for ICO first

Disadvantages:

• Harder to hand-edit than PNG
• No SVG-level infinite scaling
• Transparency support exists but some tools flatten poorly

Keep favicon.ico at domain root. How to build it: How to Create a favicon.ico File.

PNG - the modern explicit choice

PNG is the standard for declared favicons in HTML:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Advantages:

• Lossless flat icons and transparency
• Exact sizes attribute maps to audit tools
• Easy pipeline from design tools
• Required for apple-touch-icon and PWA manifest icons

Disadvantages:

• Multiple files to maintain
• Does not satisfy /favicon.ico unless you also ship ICO

Use PNG for every size-specific role: tab sizes, 180x180 Apple, 192 and 512 PWA.

SVG - scalable with caveats

SVG favicons work in Chrome, Firefox, and Edge for rel="icon":

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

Always list PNG after SVG as fallback. Safari on macOS historically preferred PNG for tabs. iOS does not accept SVG for apple-touch-icon.

Advantages:

• One file scales to any tab size
• Can use CSS prefers-color-scheme inside SVG for dark mode icons
• Tiny file size for simple marks

Disadvantages:

• No SVG in Web App Manifest icons for Android (use PNG)
• Complex SVGs render inconsistently at 16 px
• Security policies on some hosts block external SVG entities

SVG is a enhancement layer, not a full replacement.

Recommended format stack for 2026

Production-grade setup:

/favicon.ico          (16, 32, 48 multi-size)
/favicon.svg          (optional, with PNG fallback)
/favicon-32x32.png
/favicon-16x16.png
/apple-touch-icon.png (180x180 PNG)
/icons/icon-192.png   (manifest)
/icons/icon-512.png   (manifest)

HTML head minimum:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Full tag walkthrough: How to Add a Favicon to Your Website.

When to choose only one format

ICO only

Acceptable for internal tools and quick prototypes. Browsers find /favicon.ico. You lose crisp apple-touch-icon and PWA manifest coverage.

PNG only

Works if you also accept that some legacy clients miss root ICO behavior. Add ICO when you care about email clients and old bookmark importers.

SVG only

Do not ship SVG alone. Always pair with PNG and ideally ICO.

Format-specific design tips

ICO

• Export from the same master as PNG sizes
• Include at least 16 and 32 px layers
• Avoid photographic content; flat marks compress cleaner

PNG

• 8-bit PNG is enough for flat logos
• No interlacing needed
• Match sizes attribute to actual pixel dimensions

SVG

• Simplify paths for 16 px readability
• Embed fills, avoid tiny embedded raster images
• Test tab render in Chrome and Firefox at 100% and 200% zoom

Common format mistakes

JPEG as favicon

JPEG lacks clean transparency and adds artifacts. Use PNG or ICO.

SVG without PNG fallback

Safari and older Chromium builds show broken or missing tabs.

Wrong MIME types

Serve ICO as image/x-icon or image/vnd.microsoft.icon, PNG as image/png, SVG as image/svg+xml.

Replacing ICO with a PNG at /favicon.ico

Some servers map /favicon.ico to a PNG renamed as .ico. Works occasionally but confuses audit tools. Use a real multi-size ICO.

Using SVG in manifest icons

Android install flow expects PNG. Manifest SVG entries fail Lighthouse checks.

Testing your format mix

After deploy:

1. View-source - confirm all link tags
2. Open /favicon.ico, PNGs, and SVG directly
3. Check tab on Chrome, Firefox, Safari
4. Run Favicon Check for combined HTML, ICO, and manifest report

The tool downloads each discovered file so you can confirm format and dimensions without guessing from file extensions alone.

Security and hosting constraints

Some CSP policies block inline or external SVG favicons. If Content-Security-Policy restricts img-src or default-src, confirm favicon URLs are allowed origins.

SVG favicons with external entity references can pose XSS risks on poorly sanitized uploads. Prefer inline SVG you control, or skip SVG and ship PNG plus ICO only.

Corporate proxies occasionally strip ICO or unknown MIME responses. If enterprise users report missing tabs, test from their network or provide PNG-only declarations that pass strict proxies.

Choosing formats by project type

Marketing site: ICO + PNG 16/32 + apple-touch-icon 180 + optional SVG. Full coverage, minimal PWA unless you add manifest later.

Installable PWA: All of the above plus manifest PNG 192/512. SVG optional for desktop tabs only.

Internal admin tool: ICO with 16 and 32 layers may suffice. Skip apple-touch if mobile use is blocked by policy.

Email-heavy brand: ICO at root is critical. Many email clients ignore HTML link tags and fetch /favicon.ico only.

Re-evaluate when product scope changes. A marketing site that adds PWA install needs manifest PNGs without removing ICO.

MIME types and server configuration

Correct headers reduce odd client behavior:

Nginx example for ICO:

location = /favicon.ico {
  types { image/x-icon ico; }
}

Wrong headers rarely break modern Chrome but confuse audit tools and older clients. Favicon Check still validates fetch success regardless of MIME, but fix headers when you control server config.

Migration scenarios between formats

PNG-only site adding ICO: Generate ICO from existing 32x32 PNG, deploy to root, add link rel="icon" href="/favicon.ico" sizes="any". Keep PNG tags.

ICO-only site adding PNG: Export 16 and 32 from ICO master source if available. Do not rip bitmap from ICO binary unless no source exists.

Adding SVG to PNG site: Insert SVG link before PNG fallback tags. Test Safari tab. Keep apple-touch-icon PNG unchanged.

PWA launch on existing site: Add manifest icons without removing ICO or tab PNGs. Full stack in Favicon Sizes Explained.

After any migration, scan production with Favicon Check. Document the chosen format stack in your README so the next rebrand does not drop ICO or PNG layers by accident.

ICO vs PNG for browser tabs specifically

Tabs auto-fetch ICO but honor PNG when declared. If you must pick one format for tabs:

• PNG 32x32 + PNG 16x16 for modern explicit control
• Plus favicon.ico for everything that still auto-requests it

See Best Favicon Size for Browser Tabs for pixel dimensions.

FAQ

Should I use favicon.ico or PNG in 2026?

Both. ICO for automatic root requests and legacy tools. PNG for declared sizes in HTML.

Is SVG a good favicon format?

Yes on supporting desktop browsers, always with PNG fallback and separate apple-touch-icon PNG.

Can favicon.ico contain PNG data?

ICO is a container format. Tools embed PNG-compressed layers inside ICO on modern generators.

What format for apple-touch-icon?

PNG only. 180x180. No ICO, no SVG.

What format for PWA manifest icons?

PNG at 192x192 and 512x512.

Does favicon.ico support transparency?

Yes in modern ICO files. Test on Windows shortcuts if transparency matters.

Which format is smallest file size?

Simple SVG often wins on bytes. ICO bundling reduces total requests. PNG at 16 and 32 is still tiny for flat marks.

How do I audit formats on my live site?

Use Favicon Check. It lists ICO, PNG, SVG, and manifest icons with fetch status.

Bottom line

Use favicon.ico for legacy auto-fetch and bundled tab sizes, PNG for every explicit size including Apple and PWA, and SVG as an optional sharp desktop layer with PNG fallback. Wire tags in server HTML, validate with Favicon Check, and treat format choice as a stack, not a single winner.