Favicon Generator: Create Favicons for All Devices & Browsers (2026 Guide)

There is no single “favicon size.” In 2026, a complete favicon implementation requires at minimum 4–5 different files across 3 formats to cover browser tabs, iOS home screens, Android home screens, and PWA installations. According to StatCounter’s April 2026 data, mobile devices account for 56.4% of web traffic globally — meaning your favicon will be seen on a home screen as often as in a browser tab. Getting it wrong means a pixelated or incorrectly masked icon on half your users’ devices.

This guide covers exactly what files to create, the correct sizes, the HTML to add, and how to implement dark mode favicons — with complete code examples and a comparison of generation tools.

Key Takeaways

✓ Minimum set (3 files): favicon.ico (16+32px), apple-touch-icon.png (180×180), icon-192.png and icon-512.png for Android manifest.
✓ SVG is optional but powerful — infinitely scalable, supports dark mode via CSS, Chrome/Firefox/Edge only (not Safari).
✓ Maskable icons are required for correct Android adaptive icon display — keep content in the inner 80% of the canvas.
✓ Browser caching is aggressive — use cache-busting versioning during development, content-hash filenames in production.
✓ Next.js 13+ App Router — place favicon.ico, apple-touch-icon.png, and icon.svg in the app/ directory for zero-config serving.

Why favicon implementation is more complex than it looks

The history of the favicon starts with Internet Explorer 5 in 1999, which introduced the favicon.ico file at the site root. For the next decade, a single 16×16 ICO file was sufficient. Then the iPhone arrived.

Apple introduced apple-touch-icon in 2007 for the original iPhone — a separate high-resolution PNG for “Add to Home Screen.” Google followed with Android manifest icons for Chrome home screen shortcuts. Then came PWA (Progressive Web Apps), requiring even larger icons (512×512) for splash screens. SVG favicons arrived in Chrome 89 (2021), enabling vector-perfect rendering at any size. Android 8’s adaptive icon system added maskable icons in 2017.

The result: in 2026, “add a favicon” means a structured set of 4–7 files. According to the HTTP Archive Web Almanac 2025, 89.3% of websites serve a favicon.ico, but only 44.1% serve an apple-touch-icon, and just 27.8% include a properly configured PWA manifest. That means 55% of websites show a blank icon when iOS users add them to their Home Screen.

Complete favicon size reference

Size	Format	Usage	Required	Notes
16×16	ICO/PNG	Browser tab (classic)	✅	Most common browser tab size. Minimum for browser compatibility.
32×32	ICO/PNG	Browser tab (Retina), Windows taskbar	✅	Recommended for sharp display on high-DPI monitors.
48×48	ICO	Windows desktop shortcut	—	Include in ICO file for Windows add-to-desktop behavior.
180×180	PNG	Apple Touch Icon (iOS/iPadOS)	✅	Used when user adds site to Home Screen on iPhone/iPad. No transparency.
192×192	PNG	Android home screen (PWA manifest)	✅	Referenced in site.webmanifest for Android Chrome home screen icon.
512×512	PNG	Android splash screen / PWA install	✅	Referenced in site.webmanifest. Used for PWA splash screen and install dialog.
SVG (any)	SVG	Modern browsers (scalable)	—	Chrome 89+, Firefox 86+, Edge 89+. Supports dark mode via prefers-color-scheme.
96×96	PNG	Google Android (legacy)	—	Older Google services. Superseded by 192×192 in modern manifests.
270×270	PNG	Microsoft Windows tiles	—	Used in browserconfig.xml for Windows 10+ live tiles. Rarely needed.

Rows highlighted in green are recommended for all websites in 2026.

Browser and platform support matrix

Browser	ICO	PNG	SVG	Manifest	Dark mode
Chrome 89+	✅	✅	✅	✅	✅ (SVG)
Firefox 86+	✅	✅	✅	✅	✅ (SVG)
Safari 15+	✅	✅	❌	✅	✅ (maskable)
Edge 79+	✅	✅	✅	✅	✅ (SVG)
IE 11	✅	⚠️	❌	❌	❌
iOS Safari (home screen)	❌	✅ (180×180)	❌	❌	⚠️
Android Chrome (home screen)	❌	✅ (192×192)	❌	✅	✅ (maskable)

The minimal production-ready implementation

The Evil Martians engineering team popularized the “3-file approach” in their widely-cited 2021 article, later updated for 2026. The philosophy: avoid generating 20+ files for edge cases no one will notice, and focus on the files that actually matter for real-world browser and platform support.

File structure

public/
  favicon.ico              # Multi-size: 16×16 + 32×32 + 48×48 in one file
  favicon.svg              # SVG for modern browsers (Chrome, Firefox, Edge)
  apple-touch-icon.png     # 180×180 — iOS/iPadOS home screen
  icon-192.png             # 192×192 — Android Chrome home screen
  icon-512.png             # 512×512 — PWA splash screen and install dialog
  site.webmanifest         # Links the manifest icons

HTML head tags

<!-- In <head> — order matters, browser uses first match -->

<!-- 1. ICO fallback: universal browser support (IE, legacy) -->
<link rel="icon" href="/favicon.ico" sizes="48x48">

<!-- 2. SVG: modern browsers, supports dark mode -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- 3. Apple Touch Icon: iOS/iPadOS home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- 4. Web App Manifest: Android and PWA -->
<link rel="manifest" href="/site.webmanifest">

<!-- Optional: theme color for Chrome mobile address bar -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">

site.webmanifest

{
  "name": "My Application",
  "short_name": "MyApp",
  "description": "Brief description of your application",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#6366f1",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Note the third icon entry with "purpose": "maskable". Android 8+ uses adaptive icons that apply a platform-defined shape (circle, squircle, teardrop) to the icon. Without a maskable icon, Android falls back to a white background square — often ugly. Ideally, create a separate maskable 512×512 PNG with your logo centered in the inner 80% (408px safe zone) surrounded by background color.

Dark mode SVG favicon: the right way

SVG favicons support CSS @media queries including prefers-color-scheme, making them the only favicon format with true automatic dark mode support. Chrome and Firefox both support this — with a combined global market share over 70% per StatCounter (April 2026).

<!-- favicon.svg — dark mode aware -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    /* Light mode (default) */
    .bg { fill: #ffffff; }
    .fg { fill: #6366f1; }

    /* Dark mode: inverts colors automatically */
    @media (prefers-color-scheme: dark) {
      .bg { fill: #1a1a2e; }
      .fg { fill: #818cf8; }
    }
  </style>

  <!-- Background circle -->
  <circle class="bg" cx="16" cy="16" r="16"/>

  <!-- Your logo/letter/icon here -->
  <text
    class="fg"
    x="16" y="21"
    text-anchor="middle"
    font-family="system-ui, sans-serif"
    font-size="18"
    font-weight="700"
  >B</text>
</svg>

<!-- In HTML: reference both ICO (fallback) and SVG (enhancement) -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Keep SVG favicons simple. Complex SVGs (gradients, filters, detailed illustrations) render poorly at 16×16. The best approach: start with a simple geometric shape or single letter that reads clearly at tiny sizes. Use your primary brand color as .fg. For color palette work, use our Color Picker to find the right hex values and their dark-mode equivalents.

Framework-specific favicon setup

Next.js 13+ App Router

// Next.js App Router auto-serves these files from app/ directory:
// app/favicon.ico        → served at /favicon.ico automatically
// app/apple-icon.png     → served at /apple-touch-icon.png
// app/icon.svg           → served at /icon.svg

// For programmatic generation:
// app/icon.tsx
import { ImageResponse } from 'next/og'
export const size = { width: 32, height: 32 }
export const contentType = 'image/png'

export default function Icon() {
  return new ImageResponse(
    <div style={{
      fontSize: 24,
      background: '#6366f1',
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: 'white',
      borderRadius: '50%',
    }}>
      B
    </div>,
    { ...size }
  )
}
// Next.js generates the PNG and serves it — no image files needed

Vite / plain HTML

<!-- index.html: Vite processes these during build -->
<head>
  <link rel="icon" href="/favicon.ico" sizes="48x48">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
  <meta name="theme-color" content="#6366f1">
</head>

<!-- Place all favicon files in public/ directory:
  public/favicon.ico
  public/favicon.svg
  public/apple-touch-icon.png
  public/icon-192.png
  public/icon-512.png
  public/site.webmanifest
Vite copies public/ contents to dist/ on build -->

Favicon generator tools compared

Starting from a high-resolution PNG or SVG (512×512+), you can generate the full favicon set with online tools or CLI utilities. The right tool depends on your workflow.

Tool	Type	Pros	Cons	Best For
RealFaviconGenerator	Web tool	Most comprehensive — 11 platforms, live preview, HTML code	Online only, uploads your image to server	Production sites needing all-platform support
favicon.io	Web tool	Fast, free, generates ICO+PNG+JSON. Can create from text/emoji	Less control over sizes, no SVG output	Quick generation from PNG or text
sharp (npm)	Node.js library	Programmatic, scriptable, CI-friendly, high performance	Requires Node.js, no ICO output natively (use ico-converter alongside)	Build pipelines, automated workflows
Inkscape CLI	CLI tool	SVG → PNG at any DPI, vector-perfect output	Large install, command-line only	Generating PNGs from SVG source at multiple sizes
ImageMagick	CLI tool	Creates multi-size ICO files from PNGs, all formats	Syntax can be tricky, large dependency	Creating ICO files from existing PNGs in CI/CD

Automated generation with sharp (Node.js)

// scripts/generate-favicons.mjs
// Run: node scripts/generate-favicons.mjs
// npm install sharp

import sharp from 'sharp'

const SOURCE = 'assets/logo-1024.png'  // High-res source image

const sizes = [
  { file: 'public/apple-touch-icon.png', size: 180 },
  { file: 'public/icon-192.png', size: 192 },
  { file: 'public/icon-512.png', size: 512 },
]

for (const { file, size } of sizes) {
  await sharp(SOURCE)
    .resize(size, size, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 1 } })
    .png()
    .toFile(file)
  console.log(`✓ ${file}`)
}

// For ICO: use the 'ico-converter' or 'png-to-ico' npm package
// or use ImageMagick: convert -resize 16x16,32x32,48x48 logo.png favicon.ico

Design principles for effective favicons

A favicon viewed at 16×16 pixels contains just 256 pixels total. Most design details vanish. Effective favicons follow these constraints:

→
Single letter or simple symbol. The most recognizable favicons are a single bold letter (Google’s “G”, Facebook’s “f”, GitHub’s octocat) or a simple geometric shape. At 16px, complex logos become unreadable blobs.
→
High contrast, solid colors. Avoid gradients and subtle shadows at 16×16 — they disappear. Use your primary brand color as a solid fill with high contrast text or icon on top. Test on both white and gray browser chrome.
→
Design at 512px, test at 16px. Create your design at 512×512 for quality, but preview it at 16×16 before finalizing. Many design tools let you zoom out. What looks elegant at 512px may be illegible at 16px.
→
Round vs square vs transparent. Browsers render favicons in a rounded-square on some OS (macOS dock), circular on some Android launchers, and square in others. Design a version that works in all three shapes. Transparent backgrounds work for SVG, but apple-touch-icon.png should have a solid background (iOS doesn’t apply rounding to transparent corners nicely).
→
Test the maskable safe zone. Use the free maskable.app/editor to preview your 512×512 icon through every Android mask shape before shipping. The safe zone is the inner 40% of the canvas area (80% of the radius).

For color selection and accessibility contrast checking, use our Color Picker and Color Formats guide to ensure your favicon colors meet WCAG contrast requirements when overlaid on the browser’s chrome.

Debugging common favicon problems

🔴 Favicon not showing in browser tab

✅ Confirm the file exists at /favicon.ico. Open browser DevTools → Network → reload → filter for "favicon" — check for 404 errors. Verify the link tag is inside <head>, not <body>.

🔴 Favicon not updating after change

✅ Hard refresh (Ctrl+Shift+R), clear browser cache, or open /favicon.ico directly and hard refresh. In development, add ?v=2 to the link href. In production, use content-hash filenames.

🔴 Blurry favicon on high-DPI (Retina) screens

✅ Your ICO file only contains 16×16. Add 32×32 to the ICO (ImageMagick: convert 16.png 32.png favicon.ico) or use an SVG favicon for modern browsers.

🔴 iOS home screen shows grey box instead of icon

✅ The apple-touch-icon.png file is missing, wrong size, or has transparency. iOS requires exactly 180×180 PNG with solid background (no transparency). Check: <link rel="apple-touch-icon" href="/apple-touch-icon.png"> is in <head>.

🔴 Android shows white square instead of icon

✅ Missing or incorrect site.webmanifest. Check JSON syntax with our JSON Formatter, verify icons array has 192×192 and 512×512 entries, and add a maskable 512×512 icon with "purpose":"maskable".

🔴 Favicon works in Chrome but not Safari

✅ Safari does not support SVG favicons. Ensure you have the ICO fallback: <link rel="icon" href="/favicon.ico" sizes="48x48"> before the SVG link.

Use our JSON Formatter to validate your site.webmanifest syntax — a single comma error silently breaks the entire manifest.

Frequently asked questions

What is a favicon and why do websites need one?▼

A favicon (short for "favorite icon") is a small icon that represents a website in browser tabs, bookmarks, browser history, and on mobile home screens. Browsers look for a file at /favicon.ico by default — if none is found, the browser tab shows a blank or generic icon. A professional favicon increases brand recognition and trust: studies by Nielsen Norman Group show users spend 0.3–0.6 seconds looking at browser tabs when switching, making a recognizable favicon a subtle but meaningful UX signal. In 2026, a favicon also serves as the icon when users add a PWA (Progressive Web App) to their home screen on Android or install it as a desktop app via Chrome.

What size should my favicon be?▼

The minimum modern favicon set requires 4 files at specific sizes: (1) favicon.ico — a multi-size ICO containing 16×16, 32×32, and 48×48 pixel versions. (2) apple-touch-icon.png — exactly 180×180 pixels, no transparency, used by iOS/iPadOS when users tap "Add to Home Screen." (3) icon-192.png — 192×192 pixels for the Android Chrome home screen icon. (4) icon-512.png — 512×512 pixels for the Android PWA splash screen and install dialog. Optionally, add an SVG favicon for Chrome/Firefox/Edge (infinitely scalable, supports dark mode). This 4-5 file set covers 97%+ of users in 2026 per StatCounter data.

What is the difference between ICO, PNG, and SVG favicons?▼

ICO (Windows Icon format): A container that can hold multiple sizes (16×16, 32×32, 48×48) in a single file. Browsers still request /favicon.ico first by default. Every browser supports it. PNG: Standard bitmap format with transparency. Required for Apple Touch Icon (180×180) and Android manifest icons (192×192, 512×512). PNGs at small sizes (16×16, 32×32) may appear blurry due to nearest-neighbor scaling if not designed at the exact size. SVG: Vector format — infinitely scalable, smallest file size for simple logos (often 1–5KB vs 20–50KB for ICO), and supports dark mode via CSS media queries (prefers-color-scheme: dark). Supported by Chrome 89+, Firefox 86+, Edge 89+, but not Safari. Use SVG as an enhancement with ICO as the universal fallback.

How do I implement dark mode favicons?▼

Dark mode favicons are possible via SVG using CSS media queries inside the SVG file. Example: inside your favicon.svg, add: <style>@media (prefers-color-scheme: dark) { .icon-bg { fill: #1a1a2e; } .icon-fg { fill: #ffffff; } } .icon-bg { fill: #ffffff; } .icon-fg { fill: #1a1a2e; }</style>. Then link it: <link rel="icon" href="/favicon.svg" type="image/svg+xml">. Browsers that support SVG favicons (Chrome, Firefox, Edge) will switch between light/dark automatically. Safari ignores SVG favicons and uses the ICO fallback, which does not support dark mode — design your ICO to work on both light and dark browser chrome (most browser UIs use a neutral gray tab background). Always include the ICO fallback after the SVG link.

What HTML code do I need for favicons?▼

The minimal favicon HTML for 2026: <link rel="icon" href="/favicon.ico" sizes="48x48"> (for IE and legacy browsers), <link rel="icon" href="/favicon.svg" type="image/svg+xml"> (for modern browsers — Chrome, Firefox, Edge), <link rel="apple-touch-icon" href="/apple-touch-icon.png"> (iOS/iPadOS home screen, 180×180), and <link rel="manifest" href="/site.webmanifest"> (for Android Chrome home screen and PWA install). The order matters: Chrome uses the first matching link element, so place the ICO before the SVG if you want ICO as primary for Chrome (or reverse to prefer SVG). For Next.js 13+ App Router, place a favicon.ico in the app/ directory and it is served automatically at /favicon.ico.

What is site.webmanifest and what does it contain for favicons?▼

The Web App Manifest (site.webmanifest) is a JSON file that tells browsers and Android Chrome about your app's name, theme color, and icon set. For favicon purposes, the critical section is the icons array: {"name":"My App","short_name":"App","icons":[{"src":"/icon-192.png","sizes":"192x192","type":"image/png"},{"src":"/icon-512.png","sizes":"512x512","type":"image/png"},{"src":"/icon-512.png","sizes":"512x512","type":"image/png","purpose":"maskable"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}. The 192×192 icon is used for the Android home screen icon. The 512×512 is used for splash screens. The purpose: "maskable" tells Android to apply a platform-specific shape mask (circle, rounded square, etc.) to the icon — required for proper appearance on Android 8+ with adaptive icons.

Why is my favicon not updating after I changed it?▼

Browsers cache favicons aggressively — often for 24 hours to 7 days regardless of Cache-Control headers. Force-clearing: (1) Hard refresh: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac). (2) Clear browser cache in Settings → Privacy → Clear browsing data → Cached images and files. (3) Open favicon.ico directly in a new tab and hard refresh that tab. (4) Add a cache-busting query string to the link tag during development: <link rel="icon" href="/favicon.ico?v=2">. In production, use a content-hash in the filename (favicon.abc123.ico) and update the HTML reference — this forces all browsers to fetch the new file. Note: mobile Safari caches apple-touch-icon even more aggressively. Users may need to delete and re-add the home screen bookmark to see an updated icon.

How do I create a maskable icon for Android?▼

Maskable icons are PNG images designed for Android's adaptive icon system. Android 8+ applies a shape mask (circle, rounded square, teardrop, etc.) to home screen icons, clipping anything outside the "safe zone." The safe zone is a circle inscribed within the icon — specifically, the center 80% of the icon (by diameter). Design rule: keep all important content (logo, text, main symbol) within the inner 80% of the canvas. The outer 20% can be filled with background color and will be partially clipped. At 512×512, the safe zone is a circle with 205px radius centered at (256, 256). Use maskable.app/editor to preview how your icon looks with different mask shapes. In site.webmanifest, include a separate entry with "purpose":"maskable" pointing to a version of your icon with extra padding.

Related BytePane tools

Check your site.webmanifest JSON syntax with our JSON Formatter. Pick favicon colors and check contrast ratios with the Color Picker. Convert SVG to Base64 data URIs for inline CSS with the Base64 Encoder. Generate unique icon filenames with cache-busting hashes using the Hash Generator.

Open Color Picker

Favicon Generator: Create Favicons for All Devices & Browsers