Every browser and phone needs a different favicon size. Here's the complete 2026 cheat sheet — 16×16, 32×32, 180×180, 192×192, 512×512 — and how to generate them in one click.

Favicon Sizes Guide (2026): Everything You Need

A favicon is the little icon next to your site's title in the browser tab. It sounds trivial — until you notice your site showing a generic globe next to your carefully designed brand. The tricky part: there isn't one favicon size. Browsers, taskbars and phones each request a specific size, and using the wrong one means a blurry or missing icon.

The Favicon Sizes That Actually Matter

Size	Where it's used
16×16	Browser tabs, bookmarks, history
32×32	Windows taskbar, hi-DPI tabs
48×48	Legacy Windows shortcuts
64×64	High-DPI Windows taskbar
128×128	Chrome Web Store (older)
180×180	Apple touch icon (iOS home screen)
192×192	Android / PWA icon
512×512	PWA manifest (required)

The safest approach: generate the full set. Browsers silently pick the size they need — provide them all and your icon always looks crisp.

Why a Single 16×16 Icon Isn't Enough

If you only provide 16×16, tablets and phones will upscale it and blur it, and iOS will refuse it entirely for the home screen. A single high-res PNG doesn't work either — tiny tabs downscale it, losing the sharp edges. The correct pattern is a set, not one file.

How to Create a Favicon (2 Minutes)

Open our Favicon Generator tool
Upload your logo (a transparent PNG works best) — or pick an emoji to start instantly
Set padding so the mark sits centered, and choose a background (transparent or solid)
Download the pack or individual sizes (16 → 512 px)
Add the files to your site

Everything runs in your browser — no upload, no account, no watermark.

Installing the Favicon Files

Place favicon-16x16.png and favicon-32x32.png in your site root, then add these lines to your HTML `<head>`:

`link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png"`
`link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"`
`link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"`
`link rel="icon" href="/android-chrome-192x192.png" sizes="192x192" type="image/png"`

Next.js / React apps: export the PNGs, then add `favicon` or `icons` in your `metadata` — the framework injects the correct `link` tags for you.

Favicon Design Rules That Actually Matter

Bold shapes, not fine detail — your mark must read at 16×16, where a 2px line is already huge
Contrast — test against white, dark and colored tab themes
Padding — a few pixels of breathing room keep the mark centered and legible
No tiny text — anything smaller than a quarter of the canvas disappears at 16×16

Should You Export .ico or .png?

Modern browsers accept PNG favicons via `<link rel="icon">` — PNG covers Chrome, Edge, Firefox, Safari and Android. The old `.ico` format is only needed for legacy Internet Explorer scenarios. For almost every site today, a clean PNG set is the right answer.

Step Up Your Site Icon Game

Start from your existing logo — turn any image into a full favicon set in seconds:

Create your favicon →

Learn more: Favicon Generator Basics

Favicon Sizes Guide (2026): 16×16 to 512×512, Explained