Favicon Sizes Explained: One Image, Every Device, Correct HTML

By the Super Simple Digital Tools Team · Updated June 2026 · File & PDF

A favicon looks like a trivial detail, but the reason it is fiddly is that there is no single favicon. Desktop browsers, iOS, Android, and Progressive Web Apps each pull from a different file at a different resolution, and they each look in slightly different places. The job of a favicon generator is to hide that complexity: you give it one square image and it produces every variant plus the markup that tells each platform where to find its copy. Understanding what those variants are for makes it much easier to confirm everything is working.

Start with the desktop browser tab. This is the classic favicon, rendered tiny at 16x16 and, on higher-density displays, 32x32. Because the canvas is so small, anything intricate disappears, so a tab icon should be a bold mark or a single letter, not your full horizontal logo. Historically these sizes lived inside a favicon.ico file, a container format that can hold several resolutions at once. Today you can also serve them as plain PNGs, but keeping a favicon.ico at your site root remains a safe fallback that tools and older browsers request automatically.

Mobile is where the sizes jump. When an iPhone or iPad user taps Add to Home Screen, iOS grabs the apple-touch-icon, expected at 180x180 pixels, and renders it as an app-style tile. Android and PWA installs instead read a web app manifest, a small JSON file that lists icons at 192x192 (the minimum for the home screen) and 512x512 (used for the splash screen and the install dialog). Because these come from the manifest rather than a link tag, forgetting the manifest is the most common reason a site installs with a generic icon despite having all the image files present.

Wiring it together is a handful of lines in your page head: link tags for the 16 and 32 PNGs, one for the 180 apple-touch-icon, and one pointing at site.webmanifest. The manifest then references the 192 and 512 icons. Drop the generated files in your project's public root so paths like /favicon.ico and /apple-touch-icon.png resolve, deploy, and test in a real browser. Because favicons are cached hard, you may need a forced refresh or a version query string before you see the change, which is normal rather than a sign the setup is broken.

Once it is live, verify on more than one surface. Look at a desktop tab, then a pinned tab, then add the site to an iPhone home screen and an Android device or the install prompt to confirm the larger icons render crisply. If any version looks blurry, the usual cause is starting from a source image smaller than 512x512, which forces the generator to upscale. Regenerating from a larger, simple, square master image fixes almost every quality problem and keeps one consistent mark across every place your site appears.

Quick tips

• Begin with a square source image of at least 512x512 pixels so the largest icon is never upscaled and the small ones downscale cleanly.
• Keep the design simple and high-contrast; logos with fine text or thin lines become unreadable at 16x16, so use a symbol or single letter for the tiny sizes.
• Always include the web manifest and its 192 and 512 entries, otherwise Android and PWA installs fall back to a generic icon even when the PNGs exist.
• If a favicon change does not appear, hard-refresh or append a version query string (favicon.ico?v=2) to bypass the browser's aggressive favicon cache.

The Favicon Generator is free to use as often as you like — no signup required.