What Is a Favicon?

A favicon (short for "favorites icon") is the small icon displayed in browser tabs, bookmarks, history lists, and search results. It is one of the most visible pieces of your website's branding — users see it every time they have your site open in a tab. Despite its small size (typically 16x16 to 32x32 pixels), a well-designed favicon significantly impacts brand recognition and user experience.

Using SVG as a Favicon

Modern browsers support SVG favicons, which offer several advantages over traditional ICO or PNG favicons:

Resolution independence: SVG favicons look crisp on all screen densities
Tiny file size: A simple SVG icon can be under 500 bytes
Dark mode support: SVG favicons can adapt to light/dark themes using CSS media queries
Easy to update: Change colors or shapes without recreating multiple sizes

How to Add an SVG Favicon

Add this line to your HTML <head> section:

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

SVG Favicon with Dark Mode Support

One of the most powerful features of SVG favicons is dark mode adaptation. You can use CSS prefers-color-scheme inside the SVG to change colors based on the user's system theme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #4f46e5; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #818cf8; }
    }
  </style>
  <circle cx="16" cy="16" r="14" />
</svg>

Converting SVG to ICO for Maximum Compatibility

While SVG favicons work in modern browsers, older browsers and some platforms still require ICO format. For maximum compatibility, provide both:

<!-- SVG for modern browsers -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- ICO fallback for older browsers -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

Use our SVG to ICO converter to create ICO files from your SVG favicon.

Favicon Sizes Guide

Size	Usage	Format
16x16	Browser tab (standard DPI)	ICO, PNG
32x32	Browser tab (high DPI), taskbar	ICO, PNG
48x48	Windows desktop shortcut	ICO
180x180	Apple Touch Icon (iOS)	PNG
192x192	Android Chrome icon	PNG
512x512	PWA splash screen	PNG
Any size	All modern browsers	SVG

Favicon Design Best Practices

Keep it simple: Favicons display at very small sizes — use simple shapes and bold colors
Use your brand mark: A logomark or monogram works better than a full wordmark
Ensure contrast: Test against both light and dark browser themes
Avoid text: Text is unreadable at 16x16 pixels — use icons instead
Use transparency wisely: Transparent backgrounds look good in browser tabs
Test at actual size: Preview your favicon at 16px to catch clarity issues

Complete Favicon HTML Setup

For the best cross-browser and cross-platform support, include all these favicon references:

<!-- Favicon -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">

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

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

The site.webmanifest file should reference your 192x192 and 512x512 PNG icons:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Creating Favicons from SVG

If you already have an SVG logo or icon, creating favicons is straightforward:

Use the SVG file directly as a favicon for modern browsers
Convert to ICO (32x32) using our SVG to ICO converter
Convert to PNG (180x180) using our SVG to PNG converter for the Apple Touch Icon
Generate additional PNG sizes (192, 512) for the web app manifest

Summary

A well-implemented favicon enhances your website's professional appearance and brand recognition. Use SVG as the primary format for modern browsers, with ICO and PNG fallbacks for older platforms. Keep the design simple, test at actual display sizes, and provide multiple sizes for cross-platform compatibility.

SVG for Favicon