SVG Favicon
An SVG favicon is a scalable vector icon. It stays perfectly sharp at any size and supports dark-mode variants, making it the best format for modern browsers — with a PNG fallback for older ones.
Add an SVG favicon with <link rel="icon" type="image/svg+xml" href="/favicon.svg">. SVG scales losslessly and supports media-query-based dark-mode variants. Provide a PNG/ICO fallback for legacy browsers.
HTML for an SVG favicon (with PNG fallback)
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Frequently Asked Questions
Is an SVG favicon better than PNG?+
For modern browsers, yes — SVG scales perfectly to any size and supports dark-mode variants. Provide a PNG/ICO fallback so legacy browsers still show an icon.
How do I support dark mode with an SVG favicon?+
Inside the SVG, add a <style> block with @media (prefers-color-scheme: dark) to swap colors. Browsers apply it automatically.
Do all browsers support SVG favicons?+
Most modern browsers do (Chrome, Firefox, Safari, Edge). Older browsers and some crawlers don't, so always keep a PNG/ICO fallback.
Need an SVG favicon?
Upload an SVG (or any image) and generate the full favicon set including favicon.svg, ICO, and PNG sizes.
Open Favicon Generator