Standard Favicon Sizes Explained
A practical list of favicon dimensions browsers and platforms expect, and how to bundle them in one ICO file.
Quick answer
Most sites include 16×16 and 32×32 px for browser tabs, plus 48×48 px for Windows shortcuts. Many teams also prepare 180×180 for Apple touch icons and 192×192 or 512×512 for PWA manifests—often as separate PNG files rather than inside ICO.
Overview
Favicon requirements vary by browser, operating system, and install context. Bundling the most common sizes in an ICO covers classic desktop tabs and Windows shell integration; modern sites add PNG link tags and manifest entries for high-DPI displays, iOS home screens, and Android install prompts. This reference lists the sizes teams actually ship, explains which belong inside ICO versus standalone PNG files, and shows the HTML patterns that wire them together. Treat favicon sizing as a small accessibility and brand touchpoint—users may not comment on a crisp tab icon, but they notice when yours is missing or blurry next to competitors.
Sizes to include in an ICO
16×16 pixels remains the baseline browser tab size on standard-density displays. 32×32 serves high-DPI tabs, bookmark bars, and some extension UI slots where the browser doubles the logical size. 48×48 supports Windows site shortcuts, certain pinned-tab contexts, and legacy shell views that request a mid-size icon.
Many generators also embed 64×64, 128×128, or 256×256 for larger Windows icon views and taskbar pinning. You do not need every size—covering 16, 32, and 48 is a solid minimum, and adding 256×256 future-proofs Windows shell rendering. Each additional embedded frame increases file weight slightly, but a well-compressed multi-size ICO under 50 KB is typical for simple logos.
Desktop browser and Windows platform sizes
Chromium-based browsers (Chrome, Edge, Brave) read favicon.ico from the root and honor link rel="icon" declarations with explicit sizes. Firefox follows the same pattern and caches favicons aggressively—correct sizes prevent blurry rescaling in the tab strip. Safari on macOS uses tab icons near 16×16 logical pixels but benefits from a 32×32 source on Retina displays.
Windows 10 and 11 pull from ICO files for pinned site shortcuts, taskbar buttons, and Jump List thumbnails. Supplying 48×48 and 256×256 inside the ICO avoids Windows upscaling a favicon meant only for tiny tabs. Linux desktop environments vary, but they generally accept the same favicon.ico conventions as Chromium.
Mobile and touch icon sizes
Apple recommends a 180×180 PNG for apple-touch-icon, referenced with link rel="apple-touch-icon". iOS applies rounded corners automatically; do not pre-round the artwork unless brand guidelines require it. Older documentation cited 152×152 for iPad, but a single 180×180 asset covers modern iPhone and iPad home-screen bookmarks.
Android Chrome and installable PWAs rely on icons declared in the web app manifest: 192×192 for home-screen icons and 512×512 for splash screens and Play Store–style install banners. These PNG files should not be stuffed into favicon.ico—they are separate assets with distinct paths in HTML and JSON manifest files.
HTML link tag examples
A minimal modern head might include: link rel="icon" href="/favicon.ico" sizes="any" for the ICO bundle, link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" for explicit PNG tabs, and link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" for iOS. Each tag should live in the document head before body content.
For PWAs, the manifest.json icons array lists src, sizes, type, and purpose (any, maskable). Example entry: { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }. Browsers pick the closest manifest icon when users install the app; missing 512×512 entries produce soft or cropped install icons.
Recommended production workflow
Design one square master at 512×512 or export from SVG at that resolution. Generate favicon.ico with 16, 32, 48, and 256 px frames. Export standalone PNGs at 32×32, 180×180, 192×192, and 512×512 from the same master so colors and padding stay consistent.
Place favicon.ico at the domain root, put PNG variants in /icons or /assets, wire link tags in your layout template, and reference manifest icons in site metadata. After deploy, verify in Chrome DevTools Application panel, Safari Responsive Design Mode, and an actual iOS home-screen add to confirm each size resolves. Clear CDN caches when replacing favicons—browsers cache them heavily.
PWA maskable icons and safe zones
Maskable icons for installable PWAs require extra padding so Android adaptive icons do not crop logo edges. Google recommends keeping critical artwork inside a central safe circle roughly 80% of the canvas. Export maskable 512×512 PNGs separately from favicon.ico; the ICO format does not express maskable purpose flags that manifest.json expects.
Teams sometimes reuse one 512×512 PNG for both manifest purpose "any" and "maskable" to save time. Dedicated maskable artwork reduces install-icon clipping on Samsung and Pixel launchers. Test installs on real Android hardware—not just desktop Chrome—before launching a campaign that promotes "Add to Home Screen."
Examples
Minimal ICO bundle for a marketing site
From a 512×512 master PNG, generate favicon.ico containing 16, 32, and 48 px frames. Add one apple-touch-icon at 180×180 and skip PWA manifest icons until the product ships install prompts.
Full-stack favicon head markup
Deploy favicon.ico at root plus favicon-32x32.png, apple-touch-icon.png (180×180), and manifest icons at 192×192 and 512×512. Head includes icon, apple-touch-icon, and manifest link tags pointing to each asset.
Rebranding without broken bookmarks
Keep filenames stable (/favicon.ico, /apple-touch-icon.png) and swap file contents during a rebrand. Users who bookmarked the site pick up the new icon on cache expiry instead of broken image placeholders from renamed paths.
Common mistakes and edge cases
- Relying on favicon.ico alone on mobile—add apple-touch-icon and manifest icons or home-screen installs show a generic screenshot thumbnail.
- Uploading a 1024×1024 single-size ICO without downscaled frames, wasting bandwidth while tabs still render a poorly scaled icon.
- Omitting sizes="any" or explicit sizes attributes, causing browsers to guess and occasionally fetch the wrong asset.
- Using different artwork across ICO and PNG variants so tabs and home-screen icons look like different brands.
- Forgetting to invalidate CDN caches after a favicon update, making production appear stuck on an old icon for days.
Related resources
Related tools
Last reviewed: 2026-05-23