how-to · 5 min read

Favicon and ICO guide: sizes, formats and HTML that work

A complete favicon needs a 16 × 16 icon for tabs, 32 × 32 for high-density screens, 48 × 48 for Windows shortcuts and 256 × 256 for large displays and app shortcuts; favicon.ico carries those frames in one file.

Modern browsers also accept PNG and SVG icons, and installable web apps need maskable icons, so most sites end up shipping an ICO fallback plus a small set of PNGs.

By FormatFlow EditorialUpdated October 19, 2026More Image Tools →

Where a favicon actually appears

The obvious place is the browser tab, which is usually 16 pixels square and becomes 32 device pixels on a high-density screen. The same icon shows in bookmarks, history, tab groups and the address bar's suggestion list. Windows draws it in shortcuts and taskbar previews, phones use it on the home screen, and search engines sometimes show it beside a result.

Because each surface asks for a different size, one huge image scaled down by the browser is not enough. A 256 pixel icon squashed to 16 pixels loses the detail that made it recognisable, so the file needs purpose-built small frames rather than one master resized on the fly.

Safari pinned tabs are the odd one out: they tint the icon to a single colour, so a detailed multicolour logo can turn into a grey smudge. If pinned tabs matter, add an SVG favicon that draws with currentColor so the shape is masked cleanly, and keep the ICO for everything else.

How the ICO container works

An ICO file is a small directory followed by one or more images. Each entry records the frame's dimensions, colour depth and offset, and a consumer such as a browser or Windows Explorer picks the frame closest to the size it needs. Modern ICO files store PNG-compressed frames, which is why a six-size icon stays reasonably small.

The format's limitations are worth knowing. It tops out at 256 pixels per frame, it is tied to older Windows conventions, and macOS and design tools treat it as a secondary citizen. ICO remains valuable because it is one file that covers tabs, bookmarks and shortcuts without any HTML, and browsers request /favicon.ico automatically even when no link tag exists.

PNG, SVG and the link tags

PNG icons are declared explicitly in the page head, for example a link element with rel icon, type image/png and sizes 32x32. You can list several sizes, and browsers choose one. PNG supports transparency and is easy to generate, but it carries no multi-size container, so you need a separate file for every size you care about.

SVG favicons scale perfectly and can even respond to dark mode, but support is uneven across browsers and older versions fall back to nothing without a raster icon. The durable recipe is an ICO fallback in the site root, PNG icons at 32 and 192 pixels, and an apple-touch-icon at 180 pixels for iOS home screens.

Designing something that works at 16 pixels

At 16 pixels an icon is 16 little squares across. Thin strokes, small text, fine gradients and detailed illustrations all disappear or turn into noise. A strong favicon is usually a single bold shape with high contrast, generous margins and no text; a monogram can work if the letter is very simple.

Test the icon at actual size on both a light and a dark tab bar before shipping. Icons with transparent backgrounds inherit the browser theme behind them, so a dark logo can vanish in dark mode and a white logo can vanish in light mode. A subtle outline or a filled background solves both cases.

Some designers generate a dedicated simplified mark for the smallest sizes instead of shrinking the full logo. The favicon set can then use a bolder, text-free shape at 16 and 32, and the detailed logo at 256 and above. That is more work than one file for all sizes, but it is why large brands still look recognisable in a crowded tab bar.

Maskable icons for installable web apps

Android does not just shrink a favicon: it masks the icon to a shape such as a circle or a squircle, which can crop the edges of your artwork. Maskable icons solve this by expecting a full-bleed background with the important content inside a central safe zone. The specification defines that safe zone as a circle with a diameter of about 80 percent of the icon's width.

Declare maskable icons in the web app manifest with purpose maskable at 192 and 512 pixels. Keep a separate icon with purpose any for surfaces that do not mask, and make the maskable version opaque: transparency in the corners looks broken once Android clips the shape.

Putting the files on your site

Upload favicon.ico to the site root so the default request resolves, add PNG and apple-touch-icon links in the head, and reference the manifest icons. Favicons are cached aggressively, so if a new icon does not appear, try a hard refresh first, then clear the browser cache; renaming the file or adding a version query forces a fresh fetch.

favicon.ico with 16, 32, 48 and 256 pixel frames in the site root.
PNG icons at 32 x 32 and 192 x 192 linked from the page head.
apple-touch-icon at 180 x 180 for iOS home screens.
Manifest entries for 192 and 512 pixel icons, plus maskable variants.
Opaque background for maskable icons; transparency is fine for tabs.

Frequently asked questions

What size should a favicon be?

The classic set is 16, 32, 48 and 256 pixels packed into favicon.ico, with PNG links at 32 and 192 pixels and a 180 pixel apple-touch-icon. Installable web apps also need 192 and 512 pixel manifest icons, including a maskable version.

Do I still need favicon.ico in 2026?

It is still the safest fallback because browsers request /favicon.ico automatically and Windows shortcuts expect the container. Even sites that use PNG and SVG icons benefit from keeping a small ICO file in the site root.

Why is my new favicon not showing?

Browsers cache favicons far longer than most people expect, and some keep them per profile. Hard-refresh first, then clear the cache; if that fails, rename the file or add a version query string to the link so the browser sees a new URL.

Should a favicon have a transparent background?

For browser tabs, transparency is usually fine and often better, but a logo that relies on dark colours disappears on a dark tab bar. Test both themes and add a subtle outline or filled shape if needed; maskable app icons should be opaque instead.

What makes a good 16 pixel icon?

One bold, high-contrast shape with generous margins and no small text. Detail that reads well at 256 pixels almost never survives at 16, so simplify until the silhouette alone is recognisable at actual size on a real tab.

Tools for this job

All Image Tools