Image

Favicon Sizes & Formats Explained

Dev Nexus4 min read

A clear guide to the favicon sizes and formats modern sites need - ICO, PNG, and SVG - and the exact link tags to wire them up.

Ask ten favicon tools what sizes you need and you will get ten different answers - some hand you three files, some hand you thirty. It is easy to end up drowning in icons or missing the one size that actually matters.

This guide cuts through it. Here are the favicon sizes and formats a modern website genuinely needs, what each one is for, and the exact link tags to wire them into your HTML.

The Problem

Favicons carry a lot of history. The original spec was a single favicon.ico at undefinedxundefined. Then came high-resolution tab icons, Apple's home-screen icons, Android's web app icons, and scalable SVG favicons - each with its own expected size and its own link tag. Older tools respond by generating a giant pile of files to cover every case ever invented.

The result is confusion. You do not know which files your site actually uses, your <head> fills with a dozen link tags, and you still worry you have missed something. Meanwhile the wrong choices show up as a blurry icon in the tab or a pixelated square on someone's phone home screen.

The Solution

You do not need thirty files - you need a handful, chosen for where browsers actually look. A modern set is a favicon.ico in the site root, a undefinedxundefined PNG for crisp desktop tabs, a undefinedxundefined PNG apple touch icon, undefinedxundefined and undefinedxundefined PNGs for a web app manifest, and optionally a single scalable SVG.

The practical way to produce them all from one square image is the Favicon Generator, which resizes and encodes each size locally in your browser - nothing uploaded. If your source image is the wrong format or not square, convert it first with Image Converter. Then a short block of link tags in your <head> tells each browser which icon to use, and you are done - no bloated icon dump required.

Step-by-Step Guide

1
Include favicon.ico for compatibility
Keep a favicon.ico bundling undefinedxundefined and undefinedxundefined in your site root. Every browser, old or new, looks for /favicon.ico by default, so it is the safest baseline even before any link tags.
2
Add a 32x32 PNG for the tab
A undefinedxundefined PNG is the crisp icon most desktop browsers actually display in the tab. PNG is lossless and supports transparency, so edges stay clean against any tab colour. Link it with <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.
3
Add a 180x180 apple touch icon
Phones use a undefinedxundefined PNG when someone saves your site to the home screen. Without it, iOS shows a blurry screenshot instead. Reference it with <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.
4
Add manifest icons for web apps
If your site is installable, add undefinedxundefined and undefinedxundefined PNGs and list them in your web app manifest. Android and installable web apps pull their icons from there rather than from a link tag.
5
Optionally add an SVG favicon
A single SVG favicon stays razor sharp at any size and can even adapt to dark mode. Modern browsers use it via <link rel="icon" type="image/svg+xml" href="/favicon.svg">, falling back to the ICO or PNG elsewhere.

Common Mistakes

Generating dozens of unused sizes
A pile of thirty icon files just clutters your project and your <head>. Stick to the handful browsers actually request - ICO, a undefinedxundefined PNG, a undefinedxundefined apple touch icon, and manifest icons.
Using JPG for a favicon
JPG has no transparency and adds compression artefacts that look muddy at tiny sizes. Use PNG for the individual icons and ICO for the root fallback instead.
Skipping the apple touch icon
Leaving out the undefinedxundefined icon means iPhone and iPad users see a blurry screenshot when they save your site. It is one of the sizes most worth including.
Assuming SVG alone is enough
SVG favicons are great but not universal, and older browsers ignore them. Always keep a PNG and an ICO fallback so every browser has an icon to show.

Frequently Asked Questions

What favicon sizes do I actually need?

For most sites: a favicon.ico (16x16 and 32x32) in the root, a 32x32 PNG for tabs, a 180x180 apple touch icon, and 192x192 plus 512x512 PNGs for a web app manifest. An SVG favicon is a nice optional extra.

Should I use ICO or PNG for my favicon?

Use both. Keep a favicon.ico in your site root as a universal fallback, and use PNG for the individual sizes because it is lossless and supports transparency for clean edges.

What size is the apple touch icon?

180x180 pixels. It is the PNG iOS uses when someone adds your site to their home screen. Link it with a rel="apple-touch-icon" tag so phones do not fall back to a screenshot.

Do I still need a favicon.ico in 2026?

Yes, it is worth keeping. Browsers request /favicon.ico by default, so a root ICO gives you a guaranteed fallback even for old software and even if a link tag is missing.

Can I use a single SVG favicon instead of many files?

SVG works in modern browsers and scales perfectly, but older browsers ignore it. Use SVG plus a PNG and ICO fallback so every visitor sees an icon.