Which browsers support SVG favicons?

Chrome 80+, Edge 80+, Firefox 41+, Opera 44+, Samsung Internet 13+, and Safari 26+ on macOS and iOS support SVG favicons. Internet Explorer and the legacy Android Browser do not.

Does Safari support SVG favicons?

Safari supports the standard rel="icon" SVG tag from Safari 26 on macOS, iOS, and iPadOS. Safari 3.2 to 18.7 do not render SVG favicons and need a PNG or ICO fallback.

Does Chrome support SVG favicons?

Chrome supports SVG favicons from Chrome 80 on Windows, macOS, Linux, and ChromeOS. Chrome 4 to 79 did not support them. Chrome also honors prefers-color-scheme inside the SVG for dark mode.

Do you still need a PNG or ICO fallback?

Yes. Internet Explorer, the legacy Android Browser, and Safari 18 or earlier ignore SVG favicons. Ship a favicon.ico with sizes="any" alongside the SVG so older browsers still render an icon.

How do you make a dark mode SVG favicon?

Embed a CSS block inside the SVG with @media (prefers-color-scheme: dark) and set a dark fill color. Chrome and Edge honor the media query; Firefox does not and needs a separate themed file.

Why use SVG favicons over PNG?

SVG renders crisp at every resolution from one file, weighs 300 to 800 bytes against 2 to 5 KB for a multi-resolution PNG bundle, and supports CSS theming. Most teams ship both.

Why is my SVG favicon not showing in the browser tab?

Hard-refresh the page and clear the favicon cache. Confirm the link tag uses type="image/svg+xml" and the SVG file is reachable. Safari 18 or earlier will never render an SVG favicon.

Can SVG favicons be animated?

The SVG file can contain CSS keyframes or SMIL animations, but every browser freezes the favicon to its first frame. Animated SVGs render as a static icon in the tab.

What MIME type should an SVG favicon use?

Set type="image/svg+xml" on the link tag and serve the file with the Content-Type header set to image/svg+xml. Explicit MIME typing avoids slow first paint on the favicon.

Does the SVG favicon work on iPhone home screens?

No. The Add to Home Screen flow on iOS pulls the apple-touch-icon PNG, not the SVG favicon. Always include a 180x180 PNG with rel="apple-touch-icon" alongside the SVG.

Home
/
Learning Hub
/
SVG Favicon: Browser Support, Setup, Benefits, Issues

Testing

SVG Favicon: Browser Support, Setup, Benefits, Issues

SVG favicons work in Chrome 80+, Edge 80+, Firefox 41+, Opera 44+, Samsung Internet 13+, and Safari 26+. Learn SVG favicon browser support and setup.

Prince Dewani

May 6, 2026

On This Page

About SVG Favicon
Browser Support
How to Add
Benefits
Known Issues
Citations

An SVG favicon is the small icon shown in a browser tab, set through a link rel=icon tag with the image/svg+xml MIME type. It works in Chrome 80+, Edge 80+, Firefox 41+, Opera 44+, Samsung Internet 13+, and Safari 26+ on macOS and iOS, while Internet Explorer and the Android Browser do not support it.

This guide covers what an SVG favicon is, the browsers that support it, how to add one, the benefits, and the known issues.

What is an SVG favicon?

An SVG favicon is a tab icon delivered as a Scalable Vector Graphics file rather than a bitmap. The HTML link element with rel="icon" and type="image/svg+xml" points the browser at the SVG file, and the browser scales the artwork crisp at any size, from 16-pixel tabs to high-DPI bookmark grids.

Which browsers does SVG favicon support?

SVG favicons work in every major Chromium browser plus Firefox, with Safari joining the list from Safari 26 onward, and Internet Explorer and the legacy Android Browser left out.

Loading browser compatibility data...

SVG favicon compatibility in Chrome

Chrome supports SVG favicons from Chrome 80 on Windows, macOS, Linux, and ChromeOS. Chrome 4 to 79 did not support them, so a Chromium build older than Chrome 80 falls back to the ICO or PNG declared on the same page. Chrome respects prefers-color-scheme media queries embedded inside the SVG file, which lets one favicon swap its fill color between light and dark themes.

SVG favicon compatibility in Edge

Microsoft Edge supports SVG favicons from Edge 80 on Windows, macOS, and Linux, the first Chromium-based Edge release. Legacy EdgeHTML builds (Edge 12 to 18) and the early Chromium Edge 79 do not support them. Edge inherits its favicon pipeline from Chromium, so prefers-color-scheme inside the SVG, the rel="mask-icon" fallback, and the sizes="any" trick on the ICO link all behave the same as Chrome.

SVG favicon compatibility in Firefox

Firefox supports SVG favicons from Firefox 41 on Windows, macOS, and Linux. Firefox 4 to 40 had partial support that depended on the page context, and Firefox 2 to 3 did not support them at all. Firefox does not honor prefers-color-scheme inside the favicon file, so a themed icon needs a separate SVG behind a media attribute on the link tag.

SVG favicon compatibility in Safari

Safari supports SVG favicons from Safari 26 on macOS, iOS, and iPadOS, the first Safari version to render the standard rel="icon" SVG file in tabs and bookmarks. Safari 3.2 to 18.7 do not render SVG favicons at all, so older Apple users see the ICO or PNG fallback declared in the same head block. Earlier Safari versions still read the proprietary rel="mask-icon" link for the monochrome pinned-tab icon on macOS.

SVG favicon compatibility in Opera

Opera supports SVG favicons from Opera 44 on Windows, macOS, and Linux, the Chromium-based stable channel that picked up the upstream feature. Opera 9 to 43 did not support them. Opera Mobile renders SVG favicons from Opera Mobile 80 on Android. Opera Mini, which proxies pages through a server-side renderer, does not support SVG favicons on any version.

SVG favicon compatibility in Samsung Internet

Samsung Internet supports SVG favicons from Samsung Internet 13 on Galaxy phones and tablets. Samsung Internet 4 to 12 did not support them. The browser inherits its favicon handling from the Chromium engine, so prefers-color-scheme inside the SVG and the sizes="any" attribute on the ICO link work the same as on Chrome for Android.

SVG favicon compatibility in Android Browser

The legacy Android Browser, frozen at version 4.4 before Chrome for Android took over, does not support SVG favicons. Stock Android phones running Android 5 and later no longer ship the legacy browser, so users default to Chrome for Android, Samsung Internet, or Firefox for Android, all of which render SVG favicons on their modern releases. A site that targets old AOSP builds still needs an ICO or PNG fallback.

SVG favicon compatibility in Internet Explorer

Internet Explorer never added SVG favicon support. IE 5.5 through IE 11 only read .ico files declared with rel="shortcut icon", so IE users see a blank tab when a site ships only an SVG. Microsoft has retired Internet Explorer, and Edge handles SVG favicons natively, so any IE-only site still in production should add a /favicon.ico fallback to the document head.

Note: SVG favicons render differently across Chrome, Firefox, Safari, and older Edge builds. Test them on real browsers and OS with TestMu AI. Try TestMu AI free!

How do you add an SVG favicon to your website?

Adding an SVG favicon takes one HTML link tag in the document head, plus an ICO or PNG fallback for browsers that do not support SVG. The whole change takes about five minutes and ships safely behind the existing ICO file.

Save the SVG file: Export the icon to favicon.svg and place it in the site root or the /public folder so the path /favicon.svg resolves at runtime.
Add the SVG link tag: Drop <link rel="icon" type="image/svg+xml" href="/favicon.svg"> inside the <head> section of every HTML page or shared layout file.
Add an ICO fallback with sizes="any": Add <link rel="icon" href="/favicon.ico" sizes="any"> above the SVG link so older Chromium and Edge builds load only one favicon, and Internet Explorer still gets a usable icon.
Add the Apple touch icon: Drop <link rel="apple-touch-icon" href="/apple-touch-icon.png"> for iOS home-screen icons, since iOS does not use the SVG for that surface.
Test across browsers: Open the page in Chrome, Firefox, Safari 26 or later, Edge, and one Safari 18 or earlier build to confirm the SVG renders in tabs and the fallback ICO renders for older Safari and IE.

If a browser shows a blank icon, hard-refresh the page (Ctrl+Shift+R or Cmd+Shift+R), clear the browser favicon cache, and confirm the SVG file is reachable at the path declared in the link tag.

What are the benefits of using SVG favicons?

SVG favicons stay crisp at any size, weigh less than a multi-resolution PNG bundle, and can adapt to dark mode through CSS media queries embedded inside the file.

Infinite scaling from one file: SVG renders crisp at 16, 32, 64, and 192 pixels from a single file, so high-DPI displays and zoomed tab strips no longer need a separate PNG for every size.
Smaller file size: A typical SVG favicon weighs 300 to 800 bytes against 2 to 5 KB for a multi-resolution PNG bundle, an 85 to 95 percent saving on the favicon request.
Dark mode through CSS: Inline CSS with @media (prefers-color-scheme: dark) lets the same file swap its fill color when the OS theme changes, on Chrome, Edge, and Chromium-based browsers.
No proprietary tooling: SVG is plain XML, so any text editor or vector tool produces a valid favicon, unlike .ico which needs a converter.
One file across surfaces: The same SVG covers tab icons, bookmark grids, history entries, and PWA installable shortcuts on Chromium browsers.

What are the known issues with SVG favicons?

SVG favicons cover the modern Chromium browsers, Firefox, and Safari 26+, but several real-world quirks still need handling before a site can drop the bitmap fallback.

Safari 18 and earlier ignore them: macOS and iOS users on Safari 3.2 to 18.7 see a blank tab unless a PNG or ICO fallback ships in the same head block. Safari 26 fixed it, but the long tail of older Apple users is real.
No iOS home-screen support: The Add to Home Screen flow on iOS pulls the apple-touch-icon PNG, so the SVG never reaches the home grid or the PWA splash screen.
Chromium loads ICO and SVG without sizes="any": Chrome and Edge fetch both files when an ICO link is declared without sizes="any", which wastes one extra request per page load.
Animations are frozen: Browsers render only the first frame, so CSS @keyframes and SMIL inside the SVG do not animate the tab icon, no matter the engine.
prefers-color-scheme is per-browser: Chrome and Edge honor the media query inside the SVG, Firefox does not. A site that needs themed icons in Firefox has to ship a second file behind a media attribute on the link tag.
Pinned tabs need rel="mask-icon": Safari pinned tabs and the macOS Dock pull the proprietary monochrome mask-icon, not the standard SVG favicon, so a pinned-tab icon still needs the legacy link tag.
Internet Explorer and old Android Browser ignore them: IE 5.5 through 11 and the legacy AOSP browser need the .ico fallback, which is why most production sites still ship a favicon.ico alongside the SVG.

In my experience, the silent failure that bites teams most often is shipping an SVG-only favicon and watching iPhone users on Safari 18 see nothing in the tab. Always add at least one PNG or ICO fallback with sizes="any" in the same head block, and run a quick smoke test in Safari, Firefox, and Chrome before pushing to production.

Citations

All SVG favicon version numbers and platform notes in this guide come from these primary sources:

WHATWG HTML Standard - Link types: html.spec.whatwg.org/multipage/links.html
W3C SVG 2 Specification: w3.org/TR/SVG2
MDN Web Docs - HTML link element: developer.mozilla.org/en-US/docs/Web/HTML/Element/link
Wikipedia - Favicon: en.wikipedia.org/wiki/Favicon
Chrome Platform Status - Support for SVG in favicons: chromestatus.com/feature/5180316371124224
WebKit - News from WWDC25: WebKit in Safari 26 beta: webkit.org/blog/16993/news-from-wwdc25-web-technology-coming-this-fall-in-safari-26-beta
WebKit Bugzilla - SVG favicon support (bug 136059): bugs.webkit.org/show_bug.cgi?id=136059
Mozilla - Firefox 41.0 Release Notes: mozilla.org/en-US/firefox/41.0/releasenotes
Apple Developer - Safari Release Notes: developer.apple.com/documentation/safari-release-notes
Microsoft Learn - Microsoft Edge release notes (Stable Channel): learn.microsoft.com/en-us/deployedge/microsoft-edge-relnote-stable-channel

Author

Prince Dewani

Blogs: 8

Prince Dewani is a Community Contributor at TestMu AI, where he manages content strategies around software testing, QA, and test automation. He is certified in Selenium, Cypress, Playwright, Appium, Automation Testing, and KaneAI. Prince has also presented academic research at the international conference PBCON-01. He further specializes in on-page SEO, bridging marketing with core testing technologies. On LinkedIn, he is followed by 4,300+ QA engineers, developers, DevOps experts, tech leaders, and AI-focused practitioners in the global testing community.