How to favicon ico vs png vs svg — which format is best in 2026?
- Step 1Start from one SVG source — Author your mark as an SVG with a square viewBox. SVG is the single source the other formats are derived from — it stays crisp at any size and is the file you ship as the modern favicon.
- Step 2Derive the PNG rasters — Rasterise the SVG to PNG at the sizes browsers and platforms request — 16/32 for tabs, 180 for Apple touch, 192/512 for PWA. Favicon Master produces thirteen sizes in one pass.
- Step 3Pack the legacy ICO — Bundle the 16/32/48 PNGs into a single
favicon.icoso/favicon.icoroot requests resolve. Favicon Master builds a real multi-resolution ICO (PNG-in-ICO frames), not a renamed bitmap. - Step 4Wire the layered <link> tags — Order matters as a preference hint: ship the SVG link, the PNG links with explicit
sizes, the apple-touch-icon, the manifest, and the/favicon.icofallback. Browsers pick the best one they understand. - Step 5Add dark-mode handling if you need it — Only the SVG favicon can adapt to dark mode, via a
prefers-color-schememedia query inside the SVG. ICO and PNG are static bitmaps. Put the media query in the SVG before generating the package. - Step 6Test each format in its real context — Check the tab (PNG/SVG), the
/favicon.icorequest in your network panel (ICO), and the iOS 'Add to Home Screen' flow (apple-touch PNG). Each format proves itself in a different place.
ICO vs PNG vs SVG at a glance
How the three favicon formats compare on the properties that decide where each one is used.
| Property | ICO | PNG | SVG |
|---|---|---|---|
| Scaling | Fixed bitmaps bundled (16/32/48) | Single fixed resolution per file | Resolution-independent (vector) |
| Transparency | Yes (per frame) | Yes (alpha) | Yes (native) |
| Dark-mode adaptation | No | No | Yes (prefers-color-scheme inside SVG) |
| Apple touch icon | No | Yes (180×180 required) | No |
| PWA manifest icon | No | Yes (192 + 512) | No |
| Typical role | Legacy /favicon.ico fallback | Tabs, iOS, Android, PWA | Modern crisp tab favicon |
What Favicon Master emits for each format
The single SVG you upload becomes all three formats, shipped together in one ZIP.
| Format | File(s) in the package | How it's produced |
|---|---|---|
| SVG | <stem>.svg | Your uploaded SVG copied in verbatim as the scalable favicon |
| PNG | icon-16.png … icon-512.png (13 sizes) | Canvas rasterisation of the SVG at each square size |
| ICO | favicon.ico | 16/32/48 PNG frames packed into one true-colour multi-resolution ICO container |
Cookbook
Real <head> setups for different needs, and how the format choice plays out.
The full layered head (recommended)
Ship all three. Browsers choose the best format they support; the ICO catches everything else.
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/icon-16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/icon-180.png"> <link rel="manifest" href="/manifest.json">
SVG-first, ICO fallback (minimal modern site)
A non-PWA site that mainly serves modern browsers can lean on SVG with an ICO safety net.
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" href="/favicon.ico" sizes="any"> (You still get all files from Favicon Master — just drop the PNG/manifest links if you don't need iOS/PWA.)
Inside the ICO: three frames, not one
A real favicon.ico is a container. Favicon Master packs three true-colour frames so the OS/browser can pick the size it needs.
favicon.ico (ICONDIR container) frame 1: 16x16 PNG, 32bpp frame 2: 32x32 PNG, 32bpp frame 3: 48x48 PNG, 32bpp A renamed single PNG (one 'frame', wrong header) is what breaks in some legacy readers — this avoids that.
Dark-mode-aware SVG favicon
Only the SVG favicon can flip colours with the OS theme. Put the media query in the SVG before generating.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<style>
path { fill: #111; }
@media (prefers-color-scheme: dark) { path { fill: #fff; } }
</style>
<path d="..."/>
</svg>
(The ICO and PNGs stay static — that's expected.)Why the apple-touch-icon stays PNG
iOS ignores the SVG favicon for the home screen; it uses the apple-touch-icon PNG. Favicon Master gives you the 180px PNG and the tag.
<!-- iOS reads this, not /favicon.svg --> <link rel="apple-touch-icon" sizes="180x180" href="/icon-180.png"> (Supply a square 180px PNG — Favicon Master's icon-180.png. iOS applies its own rounded-corner mask.)
Edge cases and what actually happens
Renaming a PNG to .ico
Breaks in legacy readersA PNG with the extension changed to .ico lacks the ICONDIR header and isn't a valid ICO container. Some modern browsers tolerate it, but legacy readers and OS bookmark apps can fail. Favicon Master builds a real multi-resolution ICO instead, which is the safe choice.
Relying on the SVG favicon for iOS
Not used by iOSiOS does not use the SVG favicon for the home-screen icon — it uses the apple-touch-icon PNG. Always ship icon-180.png (and the matching <link>) even if your tab favicon is SVG.
Expecting dark mode from ICO or PNG
Not supportedICO and PNG are static bitmaps — they can't respond to prefers-color-scheme. Only the SVG favicon can adapt. If dark-mode adaptation matters, the SVG link must be present and the media query must live inside the SVG.
Very old browser with no SVG/PNG favicon support
ICO fallbackBrowsers that understand neither SVG nor PNG favicons fall back to /favicon.ico. This is the entire reason to keep the ICO in 2026 — it's the universal floor. Favicon Master always includes it.
SVG favicon with external font for text
May not renderAn SVG favicon containing <text> that depends on a web font may render with a fallback or no glyphs in the tiny favicon slot, and the same SVG won't rasterise reliably. Convert text to outlines with svg-font-to-path before using it as a favicon.
Huge SVG used as the favicon
Wasteful, not brokenAn editor-bloated SVG works but ships unnecessary bytes on every page load as /favicon.svg. Minify it with svg-pro-minifier before generating so the SVG copied into the package is lean.
Multiple icon links — which wins?
Browser choosesWhen several <link rel=icon> tags are present, the browser picks the best format and size it supports; the others are ignored, not errors. That's the layered strategy working as intended — there's no harm in providing all of them.
PNG favicon at the wrong size attribute
MismatchIf a <link> declares sizes="32x32" but points at a 16px PNG, browsers may scale it and the tab icon looks soft. Keep each PNG link's sizes matched to the actual file — the README block Favicon Master writes already lines these up correctly.
Frequently asked questions
Which favicon format is best in 2026?
There's no single best — ship all three. SVG for crisp modern tabs and dark mode, PNG for iOS and PWA (and a tab raster fallback), ICO for the universal /favicon.ico floor. Favicon Master emits all three from one SVG so you don't have to choose.
Which browsers support SVG favicons?
Current Chrome, Edge, Firefox, and Safari all support SVG favicons; coverage is well above 90% globally in 2026. Very old browsers don't — which is why the ICO fallback stays in the head.
What is a multi-resolution ICO?
An ICO is a container that can hold several bitmaps at different sizes in one file. Favicon Master's favicon.ico holds the 16, 32, and 48px renders as true-colour PNG-in-ICO frames, so the OS or browser picks the right size from one file.
Can I just rename a PNG to favicon.ico?
Don't. A renamed PNG isn't a valid ICO container and can fail in legacy readers and OS bookmark apps. Use a real ICO — Favicon Master packs one with proper ICONDIR headers and three frames.
Why do I still need PNG if SVG scales perfectly?
Because iOS uses a PNG (the apple-touch-icon) for the home screen, and PWA manifests require PNG icons at 192 and 512. SVG covers modern tabs, but PNG is mandatory for those platform surfaces — so you ship both.
Does ICO support transparency?
Yes. The true-colour 32-bit frames in Favicon Master's ICO carry an alpha channel, so a transparent SVG produces transparent ICO frames — no white box behind the mark.
How big should the ICO be?
Small. Three PNG frames at 16/32/48 keep it to a few KB typically. Browsers cache it aggressively. There's no need to stuff large sizes into the ICO — the big sizes live as separate PNGs and the SVG.
Can SVG favicons do dark mode?
Yes — and only SVG can. Put a @media (prefers-color-scheme: dark) rule inside the SVG to swap fills. ICO and PNG are static. Add the media query before generating the package so the SVG copied in carries it.
Can I skip the ICO entirely?
On a modern-only audience you can, but it's cheap insurance: it's the fallback for browsers that read neither SVG nor PNG favicons, and it answers root /favicon.ico requests that would otherwise 404 in your logs. Favicon Master includes it by default.
Does Favicon Master let me pick which formats to output?
No — it always outputs the full ICO + PNG + SVG set with no options. If you only want a subset, generate the package and delete the files you don't need, then trim the corresponding <link> tags from the README snippet.
What about app icons rather than web favicons?
Different need, different tool. For native iOS/Android app icon bundles use svg-app-icon-gen; for tab/PWA web favicons use Favicon Master. Both start from one SVG.
Will a transparent SVG keep its transparency in every format?
Yes. Favicon Master clears the canvas before each draw, so the PNGs and ICO frames preserve the SVG's transparency, and the SVG itself is untouched. All three formats stay transparent.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.