Favicon Sizes
A modern favicon set is more than one file. Ship a multi-resolution favicon.ico (16×16, 32×32, 48×48), a 180×180 apple-touch-icon for iOS home screens, 192×192 and 512×512 PNGs for Android/PWA, and ideally a scalable SVG favicon. Here are the exact sizes and where each is used.
| Placement | Pixels | Ratio | |
|---|---|---|---|
| favicon.ico (multi-res) Browser tab and bookmarks; pack all three into one .ico |
16×16, 32×32, 48×48 | 1:1 | |
| SVG favicon Sharp at every DPI; modern browsers prefer it |
any (scalable) | 1:1 | |
| Apple touch icon iOS/iPadOS home-screen shortcut |
180×180 | 1:1 | |
| Android / PWA icon Android home screen, manifest icons |
192×192 | 1:1 | |
| PWA maskable / splash High-res manifest icon; mark one as maskable |
512×512 | 1:1 |
Start with a multi-res .ico
The classic favicon.ico should contain 16×16, 32×32 and 48×48 versions in a single file. Browsers pick the size that fits the tab, bookmark bar or Windows taskbar. Design at 32×32 first — most tabs render there on standard displays.
Add an SVG favicon
A single SVG favicon stays crisp on any screen density and supports light/dark variants via media queries. Reference it with <link rel="icon" href="/icon.svg" type="image/svg+xml"> and keep the .ico as a fallback.
Home-screen and PWA icons
iOS uses a 180×180 apple-touch-icon. Android and installable PWAs read the web manifest, which should list 192×192 and 512×512 PNGs, with one flagged maskable so it fills adaptive icon shapes without clipping. Keep artwork simple — favicons render tiny, so bold shapes beat fine detail.
FAQ
What size should a favicon be in 2026?
Ship a multi-resolution favicon.ico with 16×16, 32×32 and 48×48, plus an SVG favicon for sharpness at any DPI.
What size is an Apple touch icon?
180×180 pixels. It is used when someone adds your site to their iOS or iPadOS home screen.
What favicon sizes do PWAs need?
192×192 and 512×512 PNGs listed in the web manifest, with one marked maskable for Android adaptive icons.