Favicon Guide & Best Practices — Favicon Generator

1. The Essential Modern Favicon Setup

Historical favicon implementations often required dozens of platform-specific files. Modern web standards have streamlined this process into a focused, high-performance package.

For a typical modern web project, four core files provide complete coverage across desktop browsers, mobile operating systems, and Progressive Web Apps:

favicon.ico

Multi-resolution binary (16×16, 32×32, 48×48) for universal browser tab fallbacks and Windows shortcuts.

favicon.svg

Scalable vector graphic for modern Chrome, Firefox, Safari, and Edge with theme adaptation.

apple-touch-icon.png

180×180 PNG for iOS Safari home screen bookmarks and iPad web clips.

site.webmanifest

Web app manifest referencing 192×192 and 512×512 icons for Android launchers & PWAs.

2. Complete Favicon Sizes Matrix

Different browsers and operating systems consume distinct icon resolutions based on display density and context:

Size (px)	Target Platform & Usage	Format
16×16	Standard desktop browser tab strip, address bar, bookmarks menu	Inside .ico & PNG
32×32	Retina/HiDPI browser tabs, Windows taskbar pinned shortcuts	Inside .ico & PNG
48×48	Windows desktop shortcut icons, taskbar preview thumbnails	Inside .ico
180×180	iOS Safari Add to Home Screen (Apple Touch Icon)	PNG
192×192	Android Chrome home screen web shortcut, PWA install prompt	PNG (Manifest)
512×512	Progressive Web App splash screen, high-DPI Android launcher	PNG (Manifest)

3. HTML & Framework Implementation

Add the generated assets to your website's root or public/ folder, then link them in your HTML <head>:

Standard HTML5 / Astro / Static Sites

<link rel="icon" href="/favicon.ico" sizes="any" />
<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" />

Next.js App Router (app/layout.tsx)

import type { Metadata } from 'next';

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: 'any' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
    ],
    apple: '/apple-touch-icon.png',
  },
  manifest: '/site.webmanifest',
};

4. SVG Vector Favicons & Automatic Dark Mode

One of the primary benefits of modern SVG favicons is native support for CSS media queries. By embedding a <style> block inside your SVG, the browser tab icon can automatically adapt its color based on the user's operating system theme:

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

This ensures clear visual contrast on both light and dark browser tab chrome.

5. Troubleshooting: Why is my favicon not updating?

Browsers cache favicon files aggressively to avoid repeated network requests. If you recently replaced your favicon but still see the previous version, try the following steps:

Step 1: Use a Version Query Parameter

Add a version query parameter to your HTML link tag, such as <link rel="icon" href="/favicon.ico?v=2">. Browsers treat changed query strings as a new URL and request the updated asset immediately. If you change it again in the future, increment the number (e.g. ?v=3).

Step 2: Test in a Private / Incognito Window

Open a new private or incognito window to verify if the server is serving the new file without relying on your main profile's cached icon database.

Step 3: Clear Browser Cache

Perform a hard refresh (Ctrl+F5 or Cmd+Shift+R) or clear cached images and files in your browser settings.

6. Design Tips for 16×16 Pixel Clarity

Simplify details: Complex gradients, thin 1px lines, and multi-word text become unreadable at 16×16 pixels. A bold silhouette or 1–2 letter monogram yields the crispest result.
Check optical contrast: Test your icon against both dark and light tab backgrounds.
Maintain padding: Leave 10–15% padding around the artwork so the symbol does not touch canvas edges when clipped by circular or rounded browser badges.
Do not pre-clip Apple Touch Icons: iOS automatically applies squircle corner rounding to home screen bookmarks. Provide full-bleed square artwork.

The complete guide to modern website favicons