Favicon Guide: Sizes, Formats, and How to Add One to Your Website

A favicon (short for "favorites icon") is the small icon that appears in browser tabs, bookmarks, and search results. Getting it right requires more than just a tiny image — modern browsers, mobile devices, and PWAs each have specific requirements.

What Sizes Do You Need?

There is no single favicon size. Different contexts use different sizes, and browsers automatically pick the best fit:

The minimum viable set for most websites: 16×16, 32×32, 180×180, and 192×192. If you're building a PWA, also include 512×512.

ICO vs PNG vs SVG

ICO Format

The favicon.ico file in your root directory is still the most universally supported format. Old browsers (IE, older Edge) only recognize favicon.ico. Modern .ico files can contain multiple sizes in a single file (16×16, 32×32, 48×48), and browsers pick the best one.

Place favicon.ico in the root of your site. Browsers fetch it automatically even without a <link> tag.

PNG Format

PNG favicons have better compression and alpha transparency than ICO. Most modern browsers support PNG favicons when declared with a <link> tag. PNG is the recommended format for sizes above 32×32 and for Apple Touch Icons.

SVG Favicons

SVG favicons are vector-based — they look sharp at any size and on any screen density. Chrome, Firefox, and Safari support SVG favicons, but iOS Safari does not. Use SVG as an enhancement alongside PNG/ICO:

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

Browsers use the first supported format. SVG also supports media queries, so you can have a light and dark mode favicon:

<!-- favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      circle { fill: #ffffff; }
    }
  </style>
  <circle cx="16" cy="16" r="16" fill="#1a1917"/>
</svg>

HTML Tags to Add

A complete, modern favicon setup looks like this:

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

<!-- Apple Touch Icon (iOS home screen) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- apple-touch-icon should be 180×180px -->

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

In your manifest.json:

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

Best Practices for Favicon Design

• Keep it simple. A favicon is displayed at 16×16px. Detailed logos with thin lines or small text become unreadable. Use a symbol, initial, or simplified version of your logo.
• Use a square source image. 1:1 aspect ratio. At least 512×512px as your master file — downscale from there.
• Use PNG with transparency. Transparent background adapts to both light and dark browser chrome.
• Test at actual size. Zoom out your browser to see how the favicon looks at 16×16px before finalizing the design.
• Consider contrast. Dark icons are barely visible against dark browser themes. Use an SVG with dark/light mode variants, or pick an icon color with strong contrast in both contexts.

Where to Place Favicon Files

All favicon files should go in your public root directory (or equivalent static files folder):

public/
├── favicon.ico          ← root (auto-detected by browsers)
├── favicon.svg
├── apple-touch-icon.png ← 180×180
├── icon-192.png
├── icon-512.png
└── manifest.json

In Next.js App Router, placing a favicon.ico in the app/ directory generates the correct <link> tags automatically.

Checking Your Favicon

After deploying, verify your favicon is working:

1. Open your site in Chrome — check the tab icon
2. Bookmark the page — check the bookmark icon
3. On an iPhone: tap Share → Add to Home Screen — check the iOS icon
4. Use browser dev tools Network tab to confirm favicon.ico returns a 200 response, not a 404

Hard-refresh (Ctrl+Shift+R) the page if the old favicon is still showing — browsers cache favicons aggressively.