The Modern Web Developer's Guide to Favicons and App Icons
Stop generating dozens of redundant icon sizes. Here are the exact favicon and app icon files you need for modern Chrome, Safari, iOS, and Android.
A decade ago, favicons meant generating twenty or more PNG and ICO files for a fragmented landscape of legacy browsers, Windows live tiles, and Android shortcuts. Then cluttering the <head> tag with boilerplate. Modern standards consolidated the stack. A handful of properly formatted assets covers every desktop browser, iOS home screen, Android PWA, and search snippet.
Generating those assets still takes precision, and it is work that often gets outsourced to cloud converters. If the assets are unreleased branding, uploading them anywhere is a risk worth avoiding. This is the minimal modern icon stack and how to generate it locally.
The Minimal Modern Stack
Four assets cover everything for a standard website.
1. favicon.ico (16×16 and 32×32)
The universal fallback. Legacy desktop browsers, RSS readers, and crawlers still request it, and the ICO format holds multiple resolutions in one file. 16x16 for tabs, 32x32 for high-DPI displays. It must live at the root of your site (/favicon.ico), because many crawlers append the path to your domain without parsing your HTML.
2. favicon.svg
The vector favicon scales crisply from a 1080p monitor to an 8K display, and it supports embedded CSS, which unlocks dark mode. An @media (prefers-color-scheme: dark) query inside the SVG changes the icon’s colors with the user’s theme. Files are typically under 2KB, so there is no load penalty.
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />3. apple-touch-icon.png (180×180)
iOS uses this when someone adds your site to the home screen. Search engines and social platforms scrape it for rich snippets, which makes it an SEO asset as much as a branding one. Keep the background opaque. Apple fills transparent areas with black, which ruins the design.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />4. manifest.json with 192×192 and 512×512 PNGs
The web app manifest tells Android Chrome and other PWA-enabled browsers how to render your installed app, including its icons. The 192x192 covers standard displays. 512x512 serves high-density screens and splash screens. The same file carries the app name, theme_color, and background_color, so an installed PWA matches your brand instead of defaulting to white chrome.
{
"name": "Your App",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}The SVG Dark Mode Trick
A vector favicon that responds to the user’s system theme is one of the cheapest polish wins available. Embed a media query directly in the SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
</style>
<path d="..." />
</svg>Dark theme users get a light mark on their dark browser chrome. Light theme users get the inverse. Nothing in file size, and the browser tab feels intentional rather than accidental.
Native App Icon Specs
Building a native app adds stricter rules, and they differ sharply between platforms.
iOS
Apple wants a single 1024x1024 PNG. Square, with no pre-rounded corners. The OS applies its own squircle mask, and pre-rounding results in awkward black borders. Use sRGB or Display P3, and no alpha transparency. Any transparent pixel triggers rejection in App Store review.
Android
Android’s adaptive icons support OEM shapes, so they use two layers. A 432x432 foreground holds your logo on transparency, with the central 288x288 area as the guaranteed safe zone that no manufacturer mask will cut. A 432x432 opaque background carries color or texture. The launcher combines them for depth and parallax effects.
Common Mistakes
Shipping an apple-touch-icon with transparency renders black on iOS. Putting favicon.ico anywhere but the root breaks crawlers that never read your HTML. Cropping the logo too close to the edge of the Android foreground means OEM masks slice the mark. Forgetting the 512x512 manifest icon makes installs render a low-res splash. Skipping the SVG entirely means high-DPI desktop monitors get a fuzzy raster icon instead of a sharp vector.
Each one is a ten-second fix once you know to check for it.
What You’ll Have at the End
After one pass through a local generator, the deliverables are concrete. An ICO covering legacy browsers. An SVG that adapts to dark mode. An apple-touch-icon that renders correctly on iOS. A manifest with its two PNGs for Android. For native apps, the Xcode asset catalog and Android adaptive icon layers.
All generated from one master, verified at size, untouched by any third-party server.
The next logo refresh repeats the same two-minute flow. The assets stay consistent because they always come from the same source.
From Logo to Deployment
The whole pipeline takes a few minutes once the source asset is right. Start with a square, high-resolution logo, ideally a vector export or a 1024px PNG. Generate the four web assets and verify them at their exact sizes. A mark that reads well at 512 pixels can disappear at 16. Check the ICO in a legacy browser, the SVG in both light and dark mode, and the apple icon against a dark background. For a native app, generate the asset catalog and adaptive icon layers from the same master, and spot-check the safe zone.
One master, all outputs. Keeping a single source of truth means a logo refresh regenerates every size and every platform asset consistently, instead of a drawer full of stale sizes that drift apart over time. Version the master, regenerate, re-verify, and deploy.
Why Generate Locally
Turning a master logo into all of these formats traditionally meant uploading brand assets to a cloud converter and downloading a zip. For unreleased branding and client work, that is needless exposure. The server sees your mark before your launch does.
WebAssembly changes the workflow. ImageUp’s Favicon Generator takes a high-resolution logo and produces the ready-to-deploy zip, the ICO container, and the exact <head> tags to paste, all in the browser. The App Icon Generator builds full Xcode asset catalogs and Android mipmap hierarchies with one click. No uploads, no retention, works offline once the page loads.
Generate the icon stack locally, verify the four files and the platform specs, and your branding renders correctly everywhere without ever leaving your machine.