Best Practices for Generating Production-Ready Favicons and App Icons

The Evolution of the Humble Favicon

In the early days of the web, a favicon was simply a 16x16 pixel favicon.ico file placed in the website root directory. Today, a website's icon is displayed across an immense array of contexts: 4K desktop browser tabs, pinned bookmarks, mobile search results, iOS home screen app shortcuts, and Android Progressive Web App (PWA) splash screens.

Failing to configure modern favicons causes browser console 404 errors, blurry icons on Retina displays, and a generic default globe icon in Google search results.

---

The Minimal Production Favicon Set (Modern Standard)

You no longer need to generate 20 different icon sizes. Modern web standards have converged around a clean, streamlined set of assets:

1. favicon.ico (Multi-resolution container): Contains both 16x16 and 32x32 pixel bitmaps for legacy desktop browsers.
2. favicon.svg (Scalable Vector Icon): Crisp, infinitely scalable icon for modern browsers that support SVG favicons (Chrome, Firefox, Safari). Supports dark mode theming via CSS media queries!
3. apple-touch-icon.png (180x180 pixels): Used by iOS Safari when a user taps "Add to Home Screen".
4. icon-192.png & icon-512.png: High-resolution icons declared in manifest.json for Android and desktop Progressive Web Apps.

---

Standard HTML Header Implementation

Add the following clean tags inside your document's <head>:

<!-- 1. Standard Fallback Icon -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- 2. Modern Scalable Vector Icon -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

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

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

---

Supporting Dark Mode in SVG Favicons

One of the coolest modern web features is dark mode adaptive favicons. If your logo has dark lines, it can disappear against a dark browser tab bar. By embedding CSS directly into favicon.svg, your icon adjusts its colors automatically:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #1C1212; }
    @media (prefers-color-scheme: dark) {
      path { fill: #FF3737; }
    }
  </style>
  <circle cx="50" cy="50" r="45" />
</svg>

---

Instant Generation in Your Browser

Manually resizing icons into multiple dimensions and packaging multi-layer .ico containers requires specialized design software.

With our in-browser Favicon Suite Generator, you can upload a single high-resolution square logo and automatically generate the complete, production-ready package with ready-to-paste HTML code.

Want to give your app icons modern rounded aesthetic borders? Pair your assets with our Rounded Corner Mask or compress outputs for fast loading using the WebP Optimization Suite and Image Resizer & Cropper.