# Favicon Size Reference Chart: Every Platform (2026)

Generate one master icon at 512x512 or larger, then export the sizes below. File names follow the most widely supported conventions.

## The size chart

| Platform | File | Size(s) | Notes |
|---|---|---|---|
| Browsers (classic) | favicon.ico | 16x16, 32x32, 48x48 in one ICO | Multi-size ICO covers old and new browsers |
| Browsers (modern) | favicon-32x32.png, favicon-16x16.png | 32x32, 16x16 | PNG pair referenced via link tags |
| Apple iOS / iPadOS | apple-touch-icon.png | 180x180 | Used for home-screen bookmarks; no transparency gloss added by iOS anymore |
| Android Chrome | android-chrome-192x192.png | 192x192 | Referenced in site.webmanifest |
| Android Chrome (splash) | android-chrome-512x512.png | 512x512 | Splash screens and install prompts |
| Maskable (Android adaptive) | maskable-icon-512x512.png | 512x512 | Keep key artwork inside the central 80% safe zone |
| Windows tiles | mstile-150x150.png | 150x150 (also 310x310, 70x70 optional) | Referenced via browserconfig.xml / meta tags |
| Safari pinned tab | safari-pinned-tab.svg | SVG, single-color | Monochrome vector; set the theme-color mask |
| macOS Safari tab | favicon.svg | SVG, any size | SVG favicons scale infinitely — preferred where supported |
| Open Graph (social share) | og-image.png | 1200x630 | Not a favicon, but every site needs one for link previews |
| Twitter/X card | twitter-image.png | 1200x600 | Can reuse the OG image if aspect-tolerant |

## Recommended minimal set (covers 99% of cases)

If you only export five files, make it these:

1. `favicon.ico` (16/32/48 multi-size) — every desktop browser
2. `favicon.svg` — modern browsers, infinitely sharp
3. `apple-touch-icon.png` (180x180) — iOS home screen
4. `android-chrome-192x192.png` + `android-chrome-512x512.png` — Android / PWA
5. `og-image.png` (1200x630) — social link previews

## HTML snippet

```html
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
```

## Design tips

- Design at 512x512 minimum; small sizes are generated by downscaling, never the reverse.
- Simplify ruthlessly: fine detail vanishes at 16x16 — bold shapes and 1-2 colors win.
- Test at actual 16x16 in a browser tab; if it's a blur, redesign the small-size version separately.
- Keep transparency in PNGs, but give the ICO a solid background for old browsers.
- For maskable icons, keep all important artwork within the center 80% — Android crops the edges into circles and squircles.
- Name files exactly as above; dev tools and validators expect these conventions.