Switch to SVG Favicon (+ minimal PNG fallbacks) in IconVectors

Use favicon.svg with small PNG/ICO fallbacks

SVG favicons are crisp at any scale and simplify your asset set. In this guide you’ll export a minified favicon.svg in Axialis IconVectors, generate tiny PNG and ICO fallbacks in one pass, and wire up the modern link tags.

When does SVG favicon work, and when include .ico?

Step‑by‑step in IconVectors

  1. Open, draw, or import your SVG logo.
    • Open: File → Open… (Ctrl+O)
    • Create: New Icon (Ctrl+N); prefer a simple silhouette that reads at 16×16.
    Preparing a favicon master SVG in IconVectors
    Use a square canvas with a clean viewBox (e.g., 0 0 16 16). Keep details bold for 16×16.

    For a themable variant, set fills/strokes to currentColor and inline the SVG where needed (note that the favicon itself won’t inherit page CSS).

  2. Export a minified SVG favicon

    Choose File → Export → Export Minified (Shift+Ctrl+M) and save as favicon.svg. This strips metadata/whitespace and preserves the viewBox.

    <!-- Minimal example (black fill) -->
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <path d="M8 8h16v16H8z"/>
</svg>
  3. Generate PNG + ICO fallbacks in one pass

    Open File → Export → Export to Multiple Bitmaps (Shift+F3):

    Export Icon to Multiple Bitmaps dialog in IconVectors
    • Destination: choose your /public/ or /static/ icons folder.
    • Base Filename: favicon.
    • File Formats: check PNG Icons (*.PNG) and Windows Icons (*.ICO).
    • Sizes in Pixels: tick 16 and 32 (optionally 48).

    This will create favicon-16.png, favicon-32.png, and a combined favicon.ico.

  4. Wire up modern link tags

    Add these to your HTML <head>:

    <!-- Primary: SVG favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Minimal PNG fallbacks -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">

<!-- Legacy fallback -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

    Optional dark mode swap:

    <link rel="icon" type="image/svg+xml" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/svg+xml" href="/favicon.svg"       media="(prefers-color-scheme: light)">
  5. Verify
    • Hard‑reload and check the address bar/tab. If the icon doesn’t change, clear the browser cache or use an incognito window.
    • In DevTools, open the Application panel and inspect the Manifest and Icons sections (if present) to see which icons are picked.

Notes & troubleshooting

Start Making SVG Icons Today with IconVectors

Download the fully-functional 30‑Day Free Trial and unlock your icon design workflow.

for Windows x64 for Windows x86 for macOS

Version 1.10 - September 17, 2025