Favicon Sizes and Dimensions
The two sizes almost every site needs are 16×16 and 32×32 pixels for browser tabs. A complete, modern setup adds a few larger sizes for phones and progressive web apps. The full list is in the table below.
Favicon size table
| Purpose | Size | File |
|---|---|---|
| Browser tab (standard) | 16×16 | favicon-16x16.png / inside favicon.ico |
| Browser tab (retina) | 32×32 | favicon-32x32.png |
| Windows shortcut / taskbar | 48×48 | inside favicon.ico |
| Apple / iOS home screen | 180×180 | apple-touch-icon.png |
| Android home screen | 192×192 | android-chrome-192x192.png |
| PWA splash / app store | 512×512 | android-chrome-512x512.png |
| Scalable + dark mode | any | icon.svg |
You don’t need to create these one by one — a favicon generator can export the whole set at once.
favicon.ico size
A favicon.ico isn’t a single size; it’s a container that bundles multiple images in one file. The standard contents are 16×16, 32×32, and 48×48 pixels. The browser reads the file and uses whichever resolution fits the place it’s drawing — a small tab, a larger bookmark tile, or a Windows shortcut.
Apple touch icon size (180×180)
Apple devices use a dedicated icon when someone adds your site to their iOS home screen. The recommended size is 180×180 pixels, served as apple-touch-icon.png. iOS automatically rounds the corners, so design with a full square and let the system mask it.
Android and PWA icon sizes (192×192 and 512×512)
For Android home screens and installable progressive web apps you need two sizes:
- 192×192 — the home-screen icon (android-chrome-192x192.png).
- 512×512 — used for the splash screen and app listings (android-chrome-512x512.png).
Both are referenced from your site.webmanifest, which tells the browser these icons exist and how to use them.
SVG favicon (scalable, dark-mode)
An SVG favicon is a single vector file that stays sharp at any resolution, from a 16-pixel tab to a high-DPI display. It can also adapt to the user’s theme: with a prefers-color-scheme media query inside the SVG, your icon can show one color in light mode and another in dark mode. Support is good in modern browsers, but pair the SVG with an .ico and PNGs so older browsers still render an icon.
favicon.ico format explained
.ico is an icon container format originally created for Windows. Its advantage for the web is that it stores several resolutions in one file, so a single /favicon.ico request covers small and large icon slots. Modern .ico files can even store each image as PNG-compressed data, keeping the file small while supporting full color and transparency.
Generate every size at once
Making seven files by hand — and keeping them consistent — is tedious. Our favicon generator produces the full package in your browser: favicon.ico (16/32/48), the 16×16 and 32×32 PNGs, the 180×180 Apple icon, the 192 and 512 Android icons, and the site.webmanifest — plus the tags to paste into your site.
Frequently asked questions
- What is the standard favicon size?
- 16x16 and 32x32 pixels cover almost all browser tabs. The .ico file usually bundles 16, 32, and 48 px together.
- What size is favicon.ico?
- A favicon.ico is a container, not a single size. It typically holds 16x16, 32x32, and 48x48 versions in one file.
- What size is an Apple touch icon?
- 180x180 pixels. It is served as apple-touch-icon.png for iOS home-screen shortcuts.
- Do I need 192 and 512 favicons?
- Yes if you want a proper Android home-screen icon and PWA support — 192x192 and 512x512 are referenced from your site.webmanifest.
- Should I use an SVG favicon?
- SVG scales to any size and supports dark mode, but pair it with an .ico and PNGs so older browsers still show an icon.