You've been there. You spot a crisp, perfectly scaled favicon on a competitor's site — it doesn't blur at 16x16, it supports dark mode, and it looks sharp on a Retina display. You open DevTools, dig through the <head>, and find... a mess of PNGs and ICO files. No SVG in sight.

Our favicon extractor ranks SVG icons first, so if a site publishes one, that is the file it returns.

That's the problem. Most favicon extraction guides teach you how to grab a PNG or ICO file. But in 2026, the real prize is the SVG favicon — the format that scales infinitely, supports dark mode via prefers-color-scheme, and weighs a fraction of a raster image. Here's how to actually extract one.

Why SVG Favicons Are Worth the Hunt

Before we get into the extraction, let me convince you why this matters. GitHub uses an SVG favicon. So does Stripe. And Apple. These companies didn't choose SVG because it's trendy — they chose it because a single SVG file replaces six PNGs, an ICO, and a web manifest entry.

An SVG favicon also survives dark mode without looking like a ghost. You can embed @media (prefers-color-scheme: dark) directly in the SVG, so your icon inverts or changes color automatically. Try doing that with a PNG.

The Manual Extraction Workflow

Step 1: Inspect the Page Source

Open any website in Chrome or Firefox. Right-click anywhere and select 'Inspect' (or press Ctrl+Shift+I). Navigate to the 'Elements' tab and search for rel='icon' in the <head>. Look for an SVG link:

<link rel='icon' type='image/svg+xml' href='/favicon.svg'>

If you see this, you're golden. Just click the href value to open the SVG in a new tab, then save it. But here's the catch — many sites hide their SVG favicon behind a sizes attribute or use a rel='mask-icon' for Safari. Don't stop at the first link you find.

Step 2: Check the Web Manifest

Modern progressive web apps (PWAs) often declare their SVG favicon inside a site.webmanifest file. Search for rel='manifest' in the <head>:

<link rel='manifest' href='/site.webmanifest'>

Open that JSON file in a new tab. Look for a property called icons — it's an array of objects. Find the entry where type equals 'image/svg+xml'. That's your SVG favicon URL. Copy it and download the file.

Step 3: Use the Favicon API as a Fallback

Some sites don't expose their SVG favicon in the HTML at all. They rely on the browser's automatic /favicon.ico request. In that case, you need to guess the path. Common locations include:

Just type these into the address bar after the domain. If the server returns a 404, the site probably doesn't use an SVG favicon — or they've hidden it well.

Using Mzu favicondl to Extract SVG Favicons

Manual inspection works, but it's tedious when you're extracting favicons from multiple sites. That's where Mzu favicondl comes in. Our tool scans the page's <head>, the web manifest, and even common file paths to find the SVG favicon automatically.

Here's the workflow:

  1. Go to Mzu favicondl.
  2. Paste the website URL into the input field.
  3. Click 'Extract'.
  4. The tool lists all found favicons — including SVG, PNG, ICO, and Apple Touch icons.
  5. Click the download button next to the SVG entry.

That's it. The tool also shows you the raw SVG code if you want to inspect it before downloading. No ads, no sign-up, no nonsense.

Pro Tips for SVG Favicon Extraction

Watch Out for Relative Paths

Many sites use relative paths like /assets/favicon.svg. When you copy the href value from DevTools, you need to prepend the domain. Mzu favicondl handles this automatically, but if you're doing it manually, don't forget the base URL.

Check for Dark Mode Variants

Some sites serve a different SVG favicon depending on the user's color scheme. Look for a media='(prefers-color-scheme: dark)' attribute on the <link> tag. If you find one, you'll need to extract both the light and dark variants.

Validate the SVG

Not all SVG files are valid favicons. Some contain external references, JavaScript, or massive viewBox values. Before you use an extracted SVG favicon, open it in a text editor and check that it's self-contained. Remove any <script> tags — browsers ignore them in favicons anyway, but it's good practice.

What to Do After Extraction

Once you have the SVG favicon, you'll want to implement it on your own site. Check out our guide on SVG Favicon: The Modern Approach for the exact HTML code and dark mode setup. If you need to convert the SVG to an ICO for legacy browsers, our SVG to ICO Converter handles that in one click.

The bottom line: extracting an SVG favicon isn't rocket science, but it requires knowing where to look. Skip the PNGs. Go straight for the SVG — your browser tabs will thank you.