Favicon Sizes: Which Ones You Actually Need in 2025

Search "favicon size" and you get a wall of conflicting numbers: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. Most of those lists were written a decade ago and never updated. In practice, a modern site needs about four files, and you can make all of them in one pass with the favicon generator — it runs entirely in your browser, so your logo never leaves your machine.

Here's what each size is actually for, and what you can safely skip.

The sizes that still matter

16x16 and 32x32 — browser tabs and bookmarks

This is the classic favicon. 16x16 is what you see in a crowded tab strip; 32x32 is used on high-DPI screens, the bookmarks bar, and some address bar UIs. Both are traditionally bundled into a single favicon.ico file, which can hold multiple resolutions at once. Windows also pulls 48x48 from the same .ico for desktop shortcuts, so including it costs almost nothing.

180x180 — Apple touch icon

When someone taps "Add to Home Screen" on an iPhone or iPad, Safari looks for apple-touch-icon.png at 180x180. If it isn't there, iOS screenshots your page and uses that instead, which looks terrible. This one PNG covers every current iOS device because the system downscales as needed.

192x192 and 512x512 — Android and PWAs

Android Chrome and installable web apps read icons from your site.webmanifest. 192 is the home-screen icon; 512 is used for the splash screen and app listings. If you ever want your site installable, you need both.

SVG — optional but nice

Firefox and Chrome both support an SVG favicon, which stays crisp at any size and can respond to dark mode with a media query inside the file. It's a bonus, not a replacement — Safari and older browsers still want the raster versions.

What you can skip

64x64, 96x96, 128x128, the whole set of Windows tile images, and the dozen legacy apple-touch-icon-76x76-style files. They were needed for devices that are mostly gone. Shipping twenty icon files bloats your repo and gains you nothing measurable.

The HTML

Drop the files in your site root and add this to <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

And in the manifest:

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

Designing for 16 pixels

The hard part isn't the export, it's that a full logo turns to mush at 16x16. A few things that help:

• Use a fragment, not the whole logo. One letter, one glyph, one shape. Wordmarks are unreadable at tab size.
• Start square. If your source is a wide logo, crop it to a square first so the generator isn't letterboxing it with empty space.
• Keep contrast high. Thin outlines vanish. Solid shapes survive.
• Decide on the background. A transparent PNG adapts to light and dark browser chrome; if your mark is dark, consider giving it a solid colored tile instead. You can remove the background from a logo screenshot in seconds if you only have a flat JPG.
• Mind the safe area. Android masks icons into circles and squircles, so leave roughly 10% padding around the edge of your 512 artwork.

If you're matching the favicon's background to your site's brand color, the image color picker will pull the exact hex from an existing screenshot — handy for the theme-color meta tag too.

Generate the whole set at once

Upload nothing: drop a square PNG or SVG into the free browser-based favicon generator and it produces the .ico, the Apple touch icon, and the 192/512 PNGs locally, in your own tab. Nothing is sent to a server, there's no sign-up, and no copy of your unreleased logo ends up sitting in someone else's storage bucket.

Then zoom your browser out, look at the tab, and ask the only question that matters: can you tell what it is?