Favicon Sizes & Dimensions

Favicon size reference

A quick reference for favicon sizes, supported formats, and how your icon scales across each dimension.

Categories: Browser · Apple · Android / PWA · Search. Search engines often prefer a multiple of 48×48 (see Google Search below).

Where favicon sizes are used

Compare the most common favicon sizes and see how your icon looks in each context.

16×1632×32

Your site

Docs

yoursite.com

Your Site

https://yoursite.com

Example search result title

A short description that would appear under the result…

Your App

App

App

App

Your App

Installed · PWA

Pixel inspector

At 16×16 and 32×32, fine detail collapses. Zoom to see which strokes and shapes survive as favicon image size shrinks.

16×16 · nearest-neighbor ×8

ICO, PNG and SVG

Pick formats for how they behave not for marketing labels. Most sites ship SVG + ICO (or PNG) together.

Deeper format notes: Favicon Formats guide (coming soon)

How favicon.ico works

An ICO is a container. Browsers pick the best embedded bitmap for the display - so one favicon.ico can hold 16×16, 32×32, and 48×48 without separate files.

favicon.ico
├── 16×16
├── 32×32
└── 48×48

SVG favicons

SVG is resolution-independent: one file stays sharp from 16×16 to 128×128 and beyond. Keep a PNG or ICO fallback for older clients and some crawlers.

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico">

Declare SVG first, then ICO/PNG as fallback. Safari and Chromium handle SVG icons well; always test your mark at tab size - thin strokes still vanish when painted small.

What favicon files do I need?

Choose a preset. The tree updates with the usual filenames and dimensions.

public/
├── favicon.ico  # 16 + 32 (+ optional 48)
├── favicon.svg  # scalable
└── apple-touch-icon.png  # 180x180

HTML <head> builder

Toggle what you ship. The snippet stays framework-neutral <head>.

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

Google Search favicons

Browser tab icons and Google Search favicons are related but not identical. Search crawls a square favicon you declare (or /favicon.ico) and may show it next to results.

• Prefer a square icon; Google recommends a size that is a multiple of 48×48 (48, 96, 144, …). Larger is fine if it downscales cleanly.
• Your 32x32 tab icon is not a substitute for Search guidelines - keep a clear mark that remains readable when shown ~16-24px in the SERP UI.
• Stable URL, crawlable file, and matching <link rel="icon"> help more than inventing exotic sizes.

FAQ

What size should a favicon be?

Ship 32x32 for browser tabs, 180x180 for Apple Touch, and 192x192 plus 512x512 for PWA/Android. Add an SVG when you can - it scales cleanly. A multi-size favicon.ico (16 and 32) remains a solid fallback.

Is a favicon 16x16 or 32x32?

Both. Tabs historically used 16x16; most modern UIs prefer 32x32 on HiDPI displays. Provide both (often inside one ICO) or let the browser pick from PNG/SVG sources.

Can a favicon be 512x512?

Yes for PWA and installable icons. Browsers will not show a 512x512 file in the tab - they downscale or use a smaller declared icon. Keep a dedicated small size for the tab.

Does a favicon have to be square?

Yes. Favicons and touch/PWA icons are square. Non-square sources are cropped or letterboxed; design on a square canvas with safe padding for rounded masks.