Favicon sizes in 2026: what you actually need

Favicon advice online is full of long lists of sizes, many of them out of date. In practice a small set of files covers every browser, phone and installed web app. This guide explains what each file is for so you can stop guessing.

The short list

• favicon.ico containing 16, 32 and 48 px images, placed at the site root.
• favicon.svg for browsers that support scalable icons.
• apple-touch-icon at 180 px for iPhone and iPad home screens.
• icons at 192 and 512 px, referenced from the web manifest, for Android and installed apps.
• maskable versions of the 192 and 512 px icons.

Why favicon.ico still matters

Some browsers, feed readers and crawlers request /favicon.ico without reading your page. Keeping an ICO at the root means they find something. Because the format can bundle several sizes, one file serves tabs, bookmarks and high-density screens.

SVG for sharp, flexible icons

A vector icon stays crisp at any size and can even adapt to a dark or light browser theme using a prefers-color-scheme media query inside the SVG. It only works if your source really is vector. A logo exported as a raster image should stay a PNG rather than being wrapped in an SVG.

Apple touch icons

When a visitor adds your page to an iPhone or iPad home screen, iOS uses the apple-touch-icon. A single 180 px PNG is enough for current devices. Use a solid background rather than transparency, because iOS fills transparent areas with black.

Android, manifests and maskable icons

Android and installed web apps read icons from the web manifest. Provide 192 and 512 px PNGs. Maskable icons let the system crop your icon into a circle or rounded shape, so keep the important artwork inside the central 80% safe zone, otherwise the edges may be cut off.

Linking them in the head

The files do nothing until your page points at them. Add a link tag for the ICO and the SVG, a link tag for the Apple touch icon and a link to the manifest. A generator that outputs this markup saves a common source of mistakes.

Common problems

• A favicon that does not change: browsers cache aggressively, so hard-refresh or rename the file.
• A blurry icon: the source was too small or too detailed. Start from a simple square mark at 512 px or larger.
• A missing icon on dark tabs: a dark logo on a transparent background disappears. Add a background colour.
• A wrong path: use absolute paths from the site root so nested pages still find the files.

If you want the whole set generated and checked in one step, Onelogo builds every file above from a single logo, in your browser, and gives you the markup to paste.