Favicon & Icon Sizes Cheat Sheet: Every Platform Explained
“Favicon” covers a lot more ground than it used to. Browsers, phones, and app launchers all ask for slightly
different sizes and formats. Here is a quick reference for what actually gets used where.
Classic browser favicon
| Size | Used for |
|---|
| 16x16 | Browser tab, address bar, bookmarks list |
| 32x32 | Taskbar shortcuts, higher-density browser tabs |
| 24x24 / 48x48 | Desktop shortcuts on Windows |
These sizes are traditionally packed together into a single .ico file, which is exactly what X-Icon Editor
exports: one file containing the 64x64, 32x32, 24x24 and 16x16 versions of your icon, so the browser can pick whichever
resolution fits.
Apple touch icon (iOS / iPadOS)
| Size | Used for |
|---|
| 180x180 | Home screen icon on modern iPhones |
| 167x167 | Home screen icon on iPad |
| 120x120 | Home screen icon on older iPhones |
Referenced with <link rel="apple-touch-icon" href="/apple-touch-icon.png"> — note this one is a
plain PNG, not an .ico file, and should not have transparency (iOS fills transparent areas with black).
Android / Chrome & Progressive Web Apps
| Size | Used for |
|---|
| 192x192 | Home screen icon, app launcher |
| 512x512 | Splash screen, app stores, high-density displays |
These are declared in a manifest.json web app manifest rather than a <link> tag, and are
also PNG files.
Windows tiles
| Size | Used for |
|---|
| 150x150 | Medium tile when a site is pinned to the Windows Start menu |
| 310x150 | Wide tile |
| 310x310 | Large tile |
Safari pinned tab
Safari uses a single-color SVG (via <link rel="mask-icon">) for the pinned-tab icon, redrawn in
whatever color the user has chosen. This is the one format on this page that is not a raster image.
So which one do I actually need?
If you only do one thing, ship a classic favicon — it is still requested by essentially every browser. X-Icon
Editor’s .ICO export covers the 64x64, 32x32, 24x24 and 16x16 sizes in one file, which is exactly this case. If your
site also needs to look right when saved to a phone’s home screen or installed as a PWA, pair that .ico with
separate 180x180 and 192x192 / 512x512 PNGs sized from the same design, so the look stays consistent everywhere your icon
shows up. See our guide to designing a favicon for tips on making a
design that holds up across all of these sizes.