A favicon is no longer one image — it's a set of at least six to ten sized assets plus an ICO container, a web manifest, and several lines of HTML. Getting all of them right is essential for a site that looks polished across browser tabs, Apple devices, Android home screens, Windows start menu tiles, and PWA launch screens. The sections below cover why modern favicons need multiple sizes, the differences between PNG, ICO, and SVG icon formats, and the specific HTML and manifest pieces that make everything work together correctly across platforms.
Why Modern Favicons Need Multiple Sizes
The single-file favicon days ended around 2010 when iOS and Android started promoting websites as first-class home-screen citizens. Today, different platforms request different sizes for different contexts, and serving the wrong size produces visibly poor results — blurry pixel-doubling on retina displays, cropped artwork on iOS home screens, or missing icons entirely on Windows start menu tiles. The minimum coverage set for a modern site: 16×16 for browser tabs (the original favicon use case), 32×32 for browser bookmarks and retina tabs, 48×48 for Windows desktop shortcuts, 180×180 for iOS home screens (Apple Touch Icon, cropped to a rounded square automatically), 192×192 for Android home screens (not cropped, use transparent or solid backgrounds intentionally), and 512×512 for PWA splash screens on first launch. Each size is an independent PNG file rather than a single image scaled — at 16×16 the browser's default resampling produces soft, mushy icons that don't read cleanly. This tool generates every size as an independent PNG with optional sharpening for the smallest sizes, which dramatically improves clarity on browser tabs compared to a single scaled file. The cost is a few dozen kilobytes of additional assets, which is negligible compared to the visual polish improvement.
PNG vs ICO vs SVG: When to Use Which
Three favicon formats coexist in modern browsers, and each has specific use cases that matter for a complete implementation. PNG is the default modern choice: it supports transparency, it's universally rendered, and browsers can select from multiple `` tags at different sizes. Use PNG for every per-size icon in your HTML. ICO is a legacy format that bundles multiple sizes in one container file, and it remains important for one specific reason: browsers automatically request `/favicon.ico` at the site root regardless of whether you include a `` tag in your HTML. Place a 2-size ICO (16×16 and 32×32) at your site root as an ultimate fallback so even pages that don't include favicon links still get a proper icon. SVG favicons are a newer addition (Chrome supported them in 2021) that theoretically solve multi-size scaling by providing vector graphics — but SVG support in browsers is still inconsistent for icon rendering, and iOS Safari in particular does not support them yet. Use SVG as an optional enhancement via a `type="image/svg+xml"` link tag, but always ship PNGs and an ICO as the canonical set. Best practice: use PNG for your primary favicon set, include a favicon.ico at the root for legacy and no-markup fallback, and optionally add SVG as progressive enhancement for browsers that support it.
The HTML and Manifest Pieces That Tie It Together
The generated icons are useless without the correct HTML and manifest tags pointing browsers to them. The minimum HTML block for complete coverage: `` and similar for other sizes, `` for iOS home screens, `` for the web app manifest, and `
` plus `` for Windows tiles. This tool generates all of these in the HTML Snippet tab so you can paste the complete block directly into your page head. The `site.webmanifest` file itself is a JSON document with fields for app name, short_name (for icons with limited text space), icons array (paths + sizes + mime types), theme_color (influences browser UI chrome), background_color (used on PWA splash screen), display (`"standalone"` for PWA-like appearance), and start_url. Without this manifest, Chrome on Android won't offer the "Add to Home Screen" PWA install prompt with your custom icon — it will fall back to the browser default. The Manifest tab in this tool generates a correct manifest automatically from your icon set and design choices.