How to Create Favicons from SVG — Complete Guide

What Are Favicons and Why Do They Matter?

Favicons are the small icons that appear in browser tabs, bookmarks, history, and address bars. They are one of the first visual elements users notice about your website, and they serve as a miniature brand identity in a space crowded with tabs. A missing or broken favicon makes a site look unfinished and unprofessional.

The name "favicon" comes from "favorite icon" — originally introduced by Internet Explorer 5 in 1999 as a way to customize the icon displayed when users bookmarked a page. Since then, favicons have evolved far beyond simple bookmarks. They now appear in:

• Browser tabs — The primary place users see your favicon, often at just 16x16 or 20x20 pixels
• Bookmarks bar and menu — Where users save and organize their favorite sites
• Browser history — Alongside page titles in the history list
• Home screen icons — When users add your site to their phone or tablet home screen
• Progressive Web App (PWA) installs — The icon used when your web app is installed as a standalone application
• Search results — Some search engines display favicons next to search results
• Tab groups and overview screens — Modern browsers use favicons in tab management interfaces

Getting favicons right requires understanding multiple formats, sizes, and browser-specific requirements. Using SVG as your source format makes this process much simpler because you can generate pixel-perfect PNGs at any size from a single vector file.

Favicon Formats Explained

Over the years, several favicon formats have emerged. Here is what you need to know about each:

ICO Format (Legacy)

The .ico format was the original favicon format. It is a container that can hold multiple image sizes (16x16, 32x32, 48x48) in a single file. While modern browsers support other formats, ICO remains important for maximum compatibility.

• File: favicon.ico
• Location: Must be at the root of your domain (https://example.com/favicon.ico)
• Sizes: Usually contains 16x16 and 32x32 versions
• Browser support: Universal — works in every browser ever made that supports favicons
• When to use: Always include as a fallback, even if you also provide other formats

PNG Format

PNG favicons offer better quality than ICO and support full transparency. Most modern browsers prefer PNG over ICO when both are available.

• Files: Various sizes (favicon-32x32.png, favicon-16x16.png, etc.)
• Location: Any path, referenced via link tags in HTML
• Sizes: 16x16, 32x32 are the minimum; 48x48 and 96x96 are common additions
• Browser support: All modern browsers
• When to use: For the standard link rel="icon" tags in your HTML head

Apple Touch Icon (PNG)

Apple devices use a specific icon format for home screen bookmarks. This is a PNG file at 180x180 pixels with no transparency (Apple adds its own rounded corners and effects).

• File: apple-touch-icon.png
• Size: 180x180 pixels
• Location: Root of domain or referenced via link tag
• Special considerations: Should have a solid background (not transparent), as iOS adds it to a white or dark background surface
• When to use: Essential if your users might add your site to their iPhone or iPad home screen

SVG Favicon (Modern)

The newest and most flexible format. A single SVG favicon works at any size and can even adapt to dark mode using CSS media queries embedded in the SVG:

• File: Any .svg file
• Location: Referenced via link tag with type="image/svg+xml"
• Browser support: Chrome, Firefox, Edge, Opera, and Safari 15.4+. Does not work in older browsers.
• When to use: As the primary favicon for modern browsers, with PNG/ICO fallbacks

The SVG favicon is the only format that can change its appearance based on the user's color scheme preferences:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #2563eb; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #60a5fa; }
    }
  </style>
  <circle cx="16" cy="16" r="14" />
  <text x="16" y="22" text-anchor="middle" font-size="16" fill="white" font-weight="bold">A</text>
</svg>

Web App Manifest Icons (PNG)

Progressive Web Apps require icons specified in a manifest.json (or site.webmanifest) file. These are used when the PWA is installed on a device.

• Sizes: 192x192 and 512x512 are required; additional sizes are recommended
• Format: PNG
• Background: Can be transparent; the manifest specifies a background_color for the install splash screen
• When to use: If your site is a Progressive Web App or you want to support the "Add to Home Screen" feature on Android

Required Sizes — The Complete List

Here is every favicon size you should generate, why, and where it is used:

You do not need every single size on this list. A practical minimum set covers most use cases:

1. favicon.ico (containing 16x16 and 32x32)
2. favicon.svg (for modern browsers)
3. apple-touch-icon.png (180x180)
4. icon-192.png (for PWA manifest)
5. icon-512.png (for PWA manifest)

Creating Favicons from SVG Step by Step

Step 1: Prepare Your SVG

Start with a clean, simple SVG. Favicons are displayed at very small sizes, so detail and complexity work against you. Good favicon SVGs:

• Use bold, simple shapes
• Avoid thin strokes (they disappear at 16x16)
• Use strong color contrast
• Work as a single recognizable mark
• Have a square aspect ratio (or are centered in a square viewBox)

If you do not have an SVG yet, use the AI Icon Generator to create one. Describe your brand mark simply: "A bold letter G in a rounded square" or "A simple mountain peak icon."

Once you have your SVG, inspect it with the SVG Viewer to verify it looks correct and has clean code.

Step 2: Optimize the SVG

Run your SVG through the SVG Optimizer to remove unnecessary metadata and reduce file size. For an SVG favicon, file size matters because the file is loaded on every page.

Step 3: Create the SVG Favicon

For the SVG favicon, your optimized SVG file works directly. Optionally, add dark mode support:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #1e40af; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #3b82f6; }
      .fg { fill: #ffffff; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6" />
  <text class="fg" x="16" y="23" text-anchor="middle" font-size="20" font-weight="bold">S</text>
</svg>

Save this as favicon.svg in your public directory.

Step 4: Generate PNG Versions

Use our SVG to PNG Converter to generate the required PNG sizes:

1. Load your SVG into the converter
2. Set the background appropriately (solid color for Apple Touch Icon, transparent for others)
3. Export at these sizes:
   • 32x32 for the standard PNG favicon
   • 180x180 for Apple Touch Icon
   • 192x192 for PWA manifest
   • 512x512 for PWA manifest

Or use the All Sizes (ZIP) feature and pick the sizes you need from the download.

Step 5: Create the ICO File

The .ico format requires a conversion tool since it is not a standard image format. Options:

• Online ICO converters — Upload your 32x32 PNG and convert to ICO
• ImageMagick (command line):

convert favicon-32x32.png favicon-16x16.png favicon.ico

• Many favicon generator websites will accept an SVG or PNG and produce all required formats at once

Step 6: Create the Web App Manifest

If your site is a PWA, create a site.webmanifest (or manifest.json) file:

{
  "name": "Your Site Name",
  "short_name": "Site",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#1e40af",
  "background_color": "#ffffff",
  "display": "standalone"
}

HTML Markup for Favicons

Add the following to the <head> section of every page:

<!-- SVG favicon for modern browsers -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

<!-- PNG fallback for browsers that don't support SVG favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest" />

<!-- Optional: theme-color for mobile browsers -->
<meta name="theme-color" content="#1e40af" />

Order Matters

Browsers process link tags in order and use the first format they support. Place the SVG favicon first so modern browsers use it. Older browsers that do not support SVG favicons will skip it and use the PNG fallback.

The favicon.ico file does not need a link tag — browsers automatically look for it at the domain root. However, you can explicitly reference it if your ICO file is at a different location:

<link rel="icon" href="/favicon.ico" sizes="any" />

Dark Mode Favicons

SVG favicons are the only format that supports automatic dark mode adaptation. Using CSS @media (prefers-color-scheme: dark) inside the SVG, you can change colors based on the user's system preference.

Common dark mode strategies:

Invert colors: Switch a dark icon to light and vice versa.

<style>
  .icon { fill: #1e293b; }
  @media (prefers-color-scheme: dark) {
    .icon { fill: #f1f5f9; }
  }
</style>

Adjust contrast: Keep the same hue but increase brightness for dark backgrounds.

<style>
  .brand { fill: #1e40af; }
  @media (prefers-color-scheme: dark) {
    .brand { fill: #60a5fa; }
  }
</style>

Add a background: Give the icon a contrasting background in dark mode for visibility.

<style>
  .bg { fill: none; }
  @media (prefers-color-scheme: dark) {
    .bg { fill: #334155; rx: 4; }
  }
</style>

For PNG favicons, dark mode adaptation is not possible — you get one static image. If dark mode support is critical, prioritize the SVG favicon and ensure your PNG fallback works acceptably on both light and dark backgrounds.

Testing Favicons

After setting up your favicons, test thoroughly:

Browser Testing

1. Chrome — Check the tab icon, bookmark it, and verify the bookmarks bar icon
2. Firefox — Check the tab icon and pinned tab appearance
3. Safari — Check the tab icon and add to Reading List
4. Edge — Check the tab icon and pin to Start menu (Windows)
5. Mobile Safari — Add to Home Screen and verify the icon
6. Chrome for Android — Add to Home Screen and verify the icon

Dark Mode Testing

Toggle your system between light and dark mode and verify:

• SVG favicon updates in Chrome, Firefox, and Edge tabs
• PNG fallback looks acceptable in both modes
• Apple Touch Icon works on both light and dark home screens

Tool Testing

Use browser DevTools to verify favicons are loading correctly:

1. Open DevTools (F12)
2. Go to the Network tab
3. Filter by "img" or search for "favicon"
4. Verify the correct files are being loaded
5. Check for 404 errors on any favicon path

Common Issues

• Favicon not updating: Browsers aggressively cache favicons. Clear the browser cache or use a cache-busting query string (favicon.svg?v=2) during development.
• Blank tab icon: The favicon file exists but the SVG has rendering issues. Test it in the SVG Viewer.
• Pixelated on Retina displays: You are serving a low-resolution PNG. Ensure 32x32 or larger PNGs are available.
• Wrong colors on iOS home screen: Apple Touch Icons use the PNG file, which is static. Verify the 180x180 PNG looks correct on both light and dark backgrounds.

Common Mistakes

Using a complex, detailed icon. Favicons are displayed at 16-32 pixels. Complex logos with thin lines, small text, or many colors will turn into an unrecognizable blob. Simplify your mark for favicon use.

Forgetting the Apple Touch Icon. Without an explicit apple-touch-icon, iOS takes a screenshot of your page — which always looks terrible. Always provide a 180x180 PNG.

Not testing at actual size. A favicon that looks great in the preview at 200x200 might be illegible at 16x16. Always verify at the actual display size.

Using a transparent background for Apple Touch Icon. iOS places the icon on a solid surface. If your icon has a transparent background, it will appear on white (or dark in dark mode) with potentially poor contrast. Use a solid background for the Apple Touch Icon.

Not including a web app manifest. Without a manifest, Android's "Add to Home Screen" feature will use the standard favicon, which may not look good at home screen icon sizes. Include a manifest with 192x192 and 512x512 icons.

Placing the ICO file in a subdirectory. Some older browsers only look for favicon.ico at the domain root. Always place it at https://yourdomain.com/favicon.ico.

Quick Reference: The Minimum Favicon Setup

If you want the simplest setup that covers all major platforms, here is the minimum you need:

Files:

• favicon.svg — For modern browsers, with optional dark mode support
• favicon-32x32.png — Fallback for browsers that do not support SVG favicons
• apple-touch-icon.png — 180x180 PNG for iOS home screen
• favicon.ico — 32x32 ICO for maximum legacy compatibility
• icon-192.png and icon-512.png — For PWA manifest

HTML:

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Workflow:

1. Create or generate an SVG icon with the AI Icon Generator
2. Optimize it with the SVG Optimizer
3. Add dark mode CSS to the SVG for the SVG favicon
4. Convert to PNG at required sizes with the SVG to PNG Converter
5. Convert the 32x32 PNG to ICO with a converter tool
6. Add the HTML tags to your page head
7. Test across browsers and devices