Favicon Size Guide 2026: Every Size You Need and How to Add Them

Favicon guides used to list twenty sizes. In 2026 you need four files, plus an optional SVG. Here they are, with the HTML and a few rules for designing an icon that still reads at 16 pixels.

The files you need

1. favicon.ico, 32 × 32: at the site root, for old browsers and tools.
2. icon.svg: scales to any size in modern browsers and supports dark mode.
3. apple-touch-icon.png, 180 × 180: for iPhone and iPad home screens.
4. icon-192.png and icon-512.png: for Android and installable web apps, listed in the web manifest.

The HTML

In the head of every page:

• A link with rel="icon" pointing to /favicon.ico with sizes="32x32".
• A link with rel="icon" pointing to /icon.svg with type="image/svg+xml".
• A link with rel="apple-touch-icon" pointing to /apple-touch-icon.png.
• A link with rel="manifest" pointing to /manifest.webmanifest, which lists the 192 and 512 icons.

Most frameworks generate these from a single icon file placed in the right folder.

Designing for 16 pixels

• Use a symbol, not your full logo. Wordmarks become grey smudges.
• Thick shapes, few details. Anything under two pixels disappears.
• Strong contrast against both light and dark browser tabs. Check it with the contrast checker.
• Fill the square. Small icons with lots of padding look tiny next to others.
• Test it in a real tab, at real size, next to other sites.

Creating every size from one image

Design at 512 × 512. Then use the free Image Resizer: the favicon preset gives 512 × 512, and the custom size field exports 180, 192 and 32. Compress the results with the Image Compressor, choosing PNG to keep edges sharp.

Fixing a stuck favicon

Browsers cache favicons for a long time. After changing it, rename the file or add a version query to the URL, then hard refresh. On iPhone, remove and re-add the home screen icon.

For the image sizes that go with it, see the Open Graph image guide.