Complete Favicon Creation Guide - ICO, SVG, and PNG Explained

What Is a Favicon - Purpose and Importance

A favicon ("favorite icon") is a small icon image that identifies a website. It appears in browser tabs, bookmarks, history, search results (Google mobile search), and various other locations.

Why favicons matter:

• Brand recognition: Users can instantly identify your site among multiple open tabs. Even when tabs are too small to read text, favicons enable identification
• Credibility: Sites without favicons appear unfinished or untrustworthy. Browser default icons (globe or blank page) undermine professionalism
• Indirect SEO effect: Favicons appear in Google mobile search results, potentially affecting click-through rates (CTR)
• PWA support: When added to home screens as Progressive Web Apps, favicons serve as app icons

Favicon history dates back to Internet Explorer 5 in 1999. Originally, placing a 16x16px ICO file at /favicon.ico sufficed. Today, requirements include high-resolution displays, dark mode, and PWA support, making multiple formats and sizes standard practice.

Favicon Format Comparison - ICO, SVG, PNG

Modern favicon implementation combines three formats. Understanding each format's characteristics and use cases is essential.

ICO (Windows Icon Format):

• Container format that can store multiple sizes (16x16, 32x32, 48x48) in one file
• Universal browser support. Highest legacy browser compatibility
• Placed at /favicon.ico, it's auto-detected without <link> tags
• Drawbacks: Tends toward larger file sizes, no vector support

SVG (Scalable Vector Graphics):

• Vector format displays sharply at any size
• Can embed CSS media queries for dark mode support
• Very small file size (hundreds of bytes to a few KB)
• Browser support: Chrome 80+, Firefox 41+, Edge 80+, Safari 15+ (virtually all browsers as of 2026)
• Drawback: No IE support (no longer relevant)

PNG (Portable Network Graphics):

• Transparency support, full color, wide compatibility
• Required for iOS as Apple Touch Icon (apple-touch-icon.png)
• Also used for Android home screen icons
• Drawback: Raster format requires separate files per size

The 2026 recommended setup is a three-layer structure with SVG as primary, ICO as fallback, and PNG for Apple/Android.

Minimal and Recommended Configurations

Favicon implementation can scale from minimal to comprehensive based on project requirements.

Minimal configuration (3 files):

These 3 files cover major browsers and devices:

1. /favicon.ico - 32x32px (legacy browsers, no <link> tag needed)
2. /favicon.svg - SVG (modern browsers, dark mode capable)
3. /apple-touch-icon.png - 180x180px (iOS)

HTML markup:

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

Recommended configuration (including PWA):

Add the following to the minimal setup:

• /icon-192.png - 192x192px (Android Chrome, PWA)
• /icon-512.png - 512x512px (PWA splash screen)
• /manifest.webmanifest - PWA manifest file (contains icon paths)

The manifest file includes icon information like "icons": [{"src": "/icon-192.png", "sizes": "192x192", "type": "image/png"}, {"src": "/icon-512.png", "sizes": "512x512", "type": "image/png"}]. Reference it from HTML with <link rel="manifest" href="/manifest.webmanifest">.

Dark Mode Support with SVG Favicons

One of SVG favicon's greatest advantages is the ability to automatically switch icon colors based on OS dark mode settings by embedding CSS media queries within the SVG.

Implementation example:

Place a <style> element inside the SVG file and use @media (prefers-color-scheme: dark) to switch colors:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a2e; }
@media (prefers-color-scheme: dark) {
path { fill: #e0e0e0; }
}
</style>
<path d="M4 4h24v24H4z"/>
</svg>

Design considerations:

• Ensure sufficient contrast in both light and dark modes
• Tab background colors vary by browser and OS - verify visibility in both modes
• Complex gradients and shadows collapse at 16px display - keep shapes simple
• Beyond color switching, stroke width adjustments are effective (thin lines become invisible in dark mode)

Testing method:

Use Chrome DevTools' "Rendering" panel to emulate prefers-color-scheme and verify both modes. On macOS, switch via "System Settings → Appearance"; on Windows, via "Settings → Personalization → Colors". Always verify actual appearance in browser tabs - SVG previews alone cannot judge visibility at actual tab display size (16x16px).

Favicon Design Best Practices

Since favicons display at an extremely small 16x16px, they require a different approach than standard logo design.

Design principles:

• Simplicity first: Fine details are indistinguishable at 16px. Focus on the single most distinctive element of your logo
• High contrast: Ensure clear differentiation from background colors. Light colors and thin lines are invisible
• Utilize the square: Favicons fit in a square canvas. Don't simply shrink horizontal logos - use only the symbol mark
• Moderate padding: Don't fill the canvas edge-to-edge. 1-2px padding improves visibility

Common failure patterns:

• Shrinking full logos (text + symbol) directly → produces illegible crushed images
• Heavy gradient use → color transitions are indistinguishable at 16px, creating blurry impressions
• Thin lines or outline-only designs → lines disappear at small sizes
• Background-dependent designs → become invisible when dark mode or browser themes change the background

Production workflow:

1. Start designing on a 32x32px canvas (2x of 16px for easier work)
2. Verify visibility when reduced to 16x16px
3. Create SVG vector version (include dark mode CSS)
4. Export 16x16 and 32x32 bitmaps for ICO
5. Export 180x180px PNG for Apple Touch Icon (rounded corners are auto-applied by iOS)

Find web design introductory books on Amazon

Favicon Generation Tools and Implementation Automation

Manually creating each favicon format and size is tedious, so leveraging auto-generation tools is efficient.

Online tools:

• RealFaviconGenerator: Input SVG or PNG to auto-generate a complete favicon set with HTML code for all platforms. Can generate dark mode SVGs. The most comprehensive tool
• Favicon.io: Generate favicons from text, images, or emoji. Simple and quick
• SVG Favicon Maker: Create and preview SVG-based favicons in the browser

Command-line tools:

• sharp (Node.js): sharp('logo.svg').resize(32, 32).toFile('favicon.png') generates each size
• ImageMagick: convert logo.png -resize 32x32 -resize 16x16 favicon.ico generates ICO files
• png2ico: Dedicated tool for generating ICO files from multiple PNGs

Build pipeline integration:

Frameworks like Next.js, Nuxt, and Astro automatically serve favicon files placed in the public/ directory. Incorporating a build script that auto-generates PNGs at various sizes from SVG means managing only a single SVG source file.

Verification methods:

• Chrome DevTools "Application" panel → "Manifest" section to check icon loading status
• Google's Rich Results Test for structured data consistency
• Device testing: Add to iOS Safari home screen to verify Apple Touch Icon display
• Online tools like favicon-checker.com to preview display across all platforms