Favicon Generator Guide: All Sizes

A favicon seems like a trivial asset, but a correctly configured favicon setup actually requires several differently sized images serving different contexts: a browser tab icon, a bookmark icon, an Android home-screen icon, an iOS "Add to Home Screen" icon, and a PWA install icon, each with different size expectations and sometimes different format requirements. Historically, this meant shipping a single multi-resolution .ico file — a legacy Windows icon container format that bundles several bitmap sizes (16×16, 32×32, 48×48) inside one binary file — because older versions of Internet Explorer required it. Modern browsers, however, fully support PNG favicons declared via a standard <link rel="icon" type="image/png"> tag, which removes the need to construct that more complex .ico container at all. Apple devices look for a separate apple-touch-icon.png, typically 180×180, referenced with <link rel="apple-touch-icon">, used when a user adds the page to their iOS home screen. Progressive Web Apps additionally rely on a site.webmanifest JSON file that declares an array of icon sizes and purposes, which the browser or OS uses to pick the appropriate icon when installing the site as an app. Getting all of these sizes right, generated from a single square source image, ensures the site looks correct in every context — a tab, a bookmark bar, a mobile home screen — rather than falling back to a browser-generated default icon or a stretched, blurry version of a mismatched source image.

[!TIP] Need a full favicon set right now? Try our free, local Favicon Generator to generate every standard PNG size, an apple-touch-icon, and a web manifest from one image, completely offline.

The Standard Favicon Set

A complete, modern favicon package typically includes:

favicon-16x16.png       — browser tab (small displays)
favicon-32x32.png       — browser tab (standard displays)
apple-touch-icon.png    — 180×180, iOS home screen
android-chrome-192.png  — Android home screen / PWA
android-chrome-512.png  — PWA splash screens, app stores
site.webmanifest        — JSON descriptor tying icons together

Wiring It Into Your `<head>`

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

A Minimal site.webmanifest

{
  "name": "My App",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Source Image Best Practices

Start with a square image, ideally 512×512 or larger, so downscaling to every smaller size stays sharp.
Avoid fine detail or small text in the source — at 16×16 pixels, anything intricate collapses into an unreadable blur.
Use a transparent background (PNG) if the icon needs to sit cleanly on both light and dark browser chrome.
Test the smallest sizes first. A logo that looks great at 512×512 can become an indistinguishable smudge at 16×16 if it relies on subtle color gradients or thin line work rather than a bold, simple silhouette.

Why the Legacy .ico Format Is Less Necessary Now

Constructing a proper multi-resolution .ico file is non-trivial — it's a binary container format bundling several separate bitmap images with their own header structure, and reliably building one client-side in the browser adds meaningful complexity for shrinking benefit. Since every actively maintained browser supports <link rel="icon" type="image/png">, shipping a full PNG size set alongside a manifest achieves the same visual result across tabs, bookmarks, and home screens without that legacy format. The only realistic gap is very old versions of Internet Explorer, which most projects no longer need to support.

Conclusion

Modern browsers have made favicon setup simpler than it used to be — a full PNG size set plus a manifest covers essentially every context that mattered a decade ago that required a legacy .ico container. Generating the whole set from one properly sized square source, rather than hand-resizing each variant, is the fastest way to avoid a blurry or oddly cropped icon showing up in a browser tab or home screen.

Developer's Guide to Favicon Generator: Best Practices and Examples