Favicon Best Practices in 2025: Drop the PNGs
Learn exactly which favicon files you actually need today, and which legacy formats you can safely drop. Hint: It's mostly just SVG and Apple Touch Icons now.
For years, generating favicons meant creating dozens of files—PNGs in every conceivable resolution, Windows Metro tiles, Apple Touch Icons, and favicon.ico. In 2025, you can safely drop 90% of them.
The TL;DR - What you actually need:
favicon.ico(32x32) for legacy browsersicon.svgfor modern browsers (infinitely scalable)apple-touch-icon.png(180x180) for iOS devicesmanifest.webmanifest(with 192x192 and 512x512 icons) for Android
The SVG Revolution
Modern browsers (Chrome, Firefox, Edge, Safari) all support SVG favicons. This means instead of rendering a dozen PNGs, you can provide a single, tiny vector file that looks perfect at 16x16 on a desktop tab, and flawlessly sharp at 256x256 on a high-DPI new tab page.
Using an SVG also allows for clever CSS tricks. You can embed a <style> block directly inside your icon.svg that utilizes @media (prefers-color-scheme: dark) to automatically swap your favicon colors based on the user’s OS theme!
Apple iOS Home Screen
Apple devices still prefer a specific PNG for “Add to Home Screen” bookmarks. You should always include an apple-touch-icon.png sized at 180x180 pixels. It must not have transparency (the background should be a solid color) and must not be a vector file. Safari uses this for bookmarks, reading list items, and home screen icons.
Android and Web App Manifests
Android devices rely on the Web App Manifest (site.webmanifest or manifest.json) to define home screen icons. It should reference a 192x192 PNG and a 512x512 PNG, along with theme colors. This manifest is essentially a JSON file that tells Android how your Progressive Web App (or standard website) should look when installed.
Dropping Legacy Formats
You do not need Windows Metro Tile XML files anymore. You do not need Coast icons. You do not need 16x16, 32x32, 48x48, 64x64, 128x128 PNGs explicitly linked in the <head>. The modern web is smart enough to scale SVGs and rely on the manifest for everything else.