Favicon Design Guide: Sizes, Best Practices, Free Generator

A favicon is the smallest piece of brand real estate you'll ever ship, and one of the most frequently seen. It appears in browser tabs, bookmark bars, history, search results, the macOS Touch Bar, and PWA home screens. A bad favicon doesn't just look bad — it actively damages brand recognition because users see it more often than your full logo.

This guide covers what you actually need to ship in 2026, the sizes that matter (and the ones you can skip), how to add SVG favicons with light/dark variants, and the design rules that make a mark survive at 16 pixels.

What a favicon is, technically

The word "favicon" was coined when Internet Explorer 5 (1999) introduced a single 16×16 `favicon.ico` file. Today "favicon" is a catch-all term for a stack of files at different sizes, served via different `<link>` tags, that browsers and platforms pick from based on context.

The 2026 spec is essentially: a base SVG favicon with light/dark variants for modern browsers, plus an Apple touch icon for iOS, plus a PNG for legacy support, plus a web app manifest for PWAs.

Required sizes for 2026

You don't need every historical size. The actually-required set:

Size	Filename	Purpose
any (SVG)	icon.svg	Modern browsers — auto-scales, supports dark mode
32×32 PNG	icon.png	Fallback for browsers that don't support SVG favicons
180×180 PNG	apple-icon.png	iOS Safari, "Add to Home Screen", Touch ID
192×192 PNG	icon-192.png	Android Chrome PWA install
512×512 PNG	icon-512.png	Android Chrome PWA splash + high-DPI

You can skip: 16×16 (modern browsers downscale SVG), 48×48 (Windows uses 32 or 180), the legacy `.ico` format (browsers that need it are <0.5% of traffic in 2026).

SVG favicons with dark mode support

A single SVG can adapt to the user's browser theme. This is the trick:

```svg

<style>

.bg { fill: #ffffff; }

.fg { fill: #0a0a0a; }

@media (prefers-color-scheme: dark) {

.bg { fill: #0a0a0a; }

.fg { fill: #ffffff; }

}

</style>

</svg>

```

Safari renders favicon CSS media queries; Chrome and Firefox do as well as of mid-2024. If your favicon is on a tab next to others, the user's eye finds yours faster when the contrast matches their theme. Worth the effort.

Design principles for 16 pixels

Simplify ruthlessly. — Anything below 2px stroke disappears. Your logo's nuanced curves, gradient, or wordmark won't survive — and shouldn't be in the favicon. Use the icon portion of a logo system; if your logo is wordmark-only, use the first letter as a standalone mark.

Bold shapes, hard edges. — Aliasing on a 16px canvas blurs soft curves into mud. Geometric shapes with clean angles read better.

High contrast against any background. — Browsers display favicons on light, dark, and colored tab backgrounds. The mark needs to survive all three. Test against `#ffffff`, `#1c1c1c`, and a few brand-colored tabs.

Maximum 2 colors. — A third color usually muddies the rest at small sizes. Black + brand color is the safest combination.

No text — except a single bold letter. "ABC Co." renders as `■` at favicon size. Don't.

Testing

Three checks before shipping:

Zoom your browser to 25% and look at the tab. — That's how it'll look on a 13" laptop.

Stack it. — Open your site in a tab next to 10 unrelated tabs. Can you find yours instantly? If you scan past it, the mark is too quiet.

Dark mode. — Open the same setup in dark mode. The mark should not disappear or look like a mistake.

HTML setup

The full 2026 set looks like this in your `<head>`:

```html

```

In Next.js (15+), the file-based convention handles this automatically. Drop `icon.svg` and `apple-icon.png` (or `apple-icon.tsx` generating via ImageResponse) in your `app/` directory and Next emits the right `<link>` tags.

Common mistakes

Shrinking the full logo. — This is the single most common error. A logo system has separate marks for separate contexts — at favicon size you want the symbol, not the wordmark.

Forgetting dark mode. — A black-on-white favicon disappears against a black tab background. Either use SVG with media queries (above) or pick a mark with enough contrast either way.

Skipping Apple Touch Icon. — Without one, iOS uses a screenshot of your page as the home-screen icon — which looks terrible. The Apple Touch Icon is 180×180 PNG, not SVG.

PNG instead of SVG. — Modern browsers prefer SVG. PNG favicons look slightly blurry on retina displays. Use SVG as primary, PNG only as fallback.

Wrong cache headers. — Favicons get cached aggressively. If you redesign and ship a new favicon at the same URL, users won't see it for days. Either rename (`icon-v2.svg`) or set short cache headers on the favicon route.

How to generate one with AI

LogoQuill's favicon-maker uses the [Recraft V4 Vector](/) model with a prompt explicitly tuned for 16px legibility — bold shapes, two colors, no text. The output is 512×512 SVG that downscales perfectly. Exports come pre-bundled in the sizes above.

If you already have a logo and want a matching favicon: upload it as a reference image and prompt "favicon version of this logo, simplified to one icon for 16px display." The AI extracts the mark from the wordmark and renders it standalone.

Generate a favicon optimized for 16px →