Design & Media · Guide · Developer Utilities
How to design a favicon
The sizes you actually need in 2026, design principles that survive 16×16 rendering, dark mode support, the HTML tags, web manifest, and testing.
The favicon is the 16×16 pixel window your site gets in a browser tab, a bookmark bar, a search result, a push notification, and an app icon. It’s one of the smallest design problems in a product — and one of the most visible. A good favicon is recognizable at 16 pixels and scales cleanly to 512. A bad one is a blurry shrunken logo that no one can identify. This guide covers what sizes you actually need in 2026, the design principles that survive pixel-level rendering, what file formats to ship, and the HTML tags that keep every platform happy.
Advertisement
Why the favicon matters more than it looks like it does
Users scan browser tabs by shape and color before text. A recognizable favicon drops the tab-identification time from ~1.5s (reading a tab title) to ~0.2s (pattern match). For multi-tab users, that compounds to minutes a day.
It also shows up in: bookmark bars, history, search-engine results (Google shows favicons in mobile results), push notifications, PWA icons, iOS/Android home-screen add-to-home. You’re designing for all those contexts with one image set.
The sizes you actually need
In 2026, a complete favicon set covers:
16×16 PNG — browser tab (classic).
32×32 PNG — retina browser tab, Windows taskbar.
48×48 PNG — Windows taskbar high-DPI, ARIA.
180×180 PNG (apple-touch-icon) — iOS add-to-home-screen, Safari pinned tab.
192×192 PNG — Android home screen, PWA.
512×512 PNG — PWA splash screen, Android adaptive icons.
favicon.ico (multi-size ICO) — legacy browsers, desktop shortcuts. Bundle 16 + 32 + 48 inside.
SVG — vector-based tab icon for browsers that support it (Firefox, Safari, Chrome, Edge). Scales infinitely.
You don’t need the old 30+ Apple/Windows tile icons anymore; modern platforms derive them from the above. Favicon.io and our favicon generator produce the full set from one source image.
Design principles — what works at 16 pixels
Simplicity is mandatory. A 16×16 image has 256 pixels total. Detailed logos become mud. Pick one strong element — a letter, a geometric shape, a simplified monogram.
High contrast. Favicons render on light and dark browser chrome. Test on both. A white logo on white background is invisible in a light-mode tab.
Strong silhouette. Squint at the favicon. If you can’t tell what shape it is, it won’t read on a tab either.
Avoid thin lines. At 16×16, a 1-pixel stroke is either there or gone — no smooth scaling. Use bold, thick strokes that survive rasterization.
Use your brand color, not just your logo. A colored square with a single letter often works better than a shrunken logo.
Fill the canvas. Unlike app icons (which have safe-area padding), favicons should fill close to the edges. Whitespace wastes pixels at 16×16.
Color strategies that work
Single letter on colored background: Gmail, Notion, Linear, Vercel. Simple, recognizable, distinctive at any size.
Geometric mark: Stripe’s /, Slack’s hashtag, GitHub’s octocat. Shape-first recognition.
Color + symbol: YouTube’s red play triangle. The color does the heavy lifting; the symbol confirms.
Avoid photorealistic details. Drop shadows, gradients with subtle variations, embossed text — all lost at small sizes.
Dark mode considerations
Browser tabs have light-mode and dark-mode chrome. A favicon with a transparent background that’s dark-colored disappears on dark chrome; a light-colored one disappears on light chrome.
Option 1: use a solid background that works on both. Most brand colors do.
Option 2: media-query SVG favicon that responds to user color scheme. Requires modern-browser SVG favicons:
@media (prefers-color-scheme: dark) { path { fill: white; } }
embedded in the SVG itself. Browsers that support it will honor it; others fall back to the default SVG rendering.
The HTML tags — what to include
In your <head>:
<link rel=“icon” type=“image/ x-icon” href=“/favicon.ico”> — the legacy fallback.
<link rel=“icon” type=“image/ png” sizes=“32×32” href=“/favicon-32x32.png”>— modern browsers, high-DPI displays.
<link rel=“apple-touch-icon” sizes=“180×180” href=“/apple-touch-icon.png”> — iOS add-to-home.
<link rel=“manifest” href=“/site.webmanifest”>— PWA metadata with 192/512 icons referenced inside.
<meta name=“theme-color” content=“#1e293b”>— Android browser chrome color, PWA splash.
The site.webmanifest file
A JSON file that tells PWAs and Android Chrome how to render your site as an installable app:
{ "name": "Free Tool Arena", "short_name": "FTA", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#0f172a", "background_color": "#ffffff", "display": "standalone" }
Keep short_name under 12 characters — it’s what shows on the Android home screen grid.
Testing — where favicons fail silently
Browser tabs. Open the site in Chrome, Safari, Firefox — both light and dark mode chrome.
Bookmark bar. Drag a bookmark. Does it read without text?
Google search results. Mobile Google shows favicons next to results. Test at various zoom levels.
iOS add-to-home. Safari → Share → Add to Home Screen. Is the icon sharp? Correctly padded? Rounded automatically by iOS.
Android add-to-home. Chrome → Install App. Adaptive icons require a safe-area-aware 512×512.
Real devices, not just simulators. Scaling algorithms differ.
Common mistakes
Shrinking a detailed logo. Detailed logos turn to mush at 16×16. Create a simplified mark specifically for small sizes.
Transparent background on light chrome.Designed for dark mode, invisible on light browser tab.
Missing apple-touch-icon. iOS falls back to a screenshot of the site, which usually looks bad.
Only shipping .ico. Legacy. Modern browsers prefer PNGs at specific sizes. ICO remains a fallback, not the main asset.
Not versioning updates. Browsers aggressively cache favicons. Updating the file without cache-busting means users see the old icon for weeks. Add ?v=2 to the href when changing.
Ignoring the manifest. PWA install and Android home-screen depend on it. Missing manifest = missing install prompt.
When to hire a designer
For brand-defining marks, work with a designer or use established typography/iconography. For quick MVP or internal tools, a single-letter monogram on a brand-colored square with a good font is perfectly professional. “Just ship” beats “custom illustration in 3 weeks” for most products.
Run the numbers
Generate a full favicon set (16, 32, 180, 192, 512 + ICO) from one source image with the favicon generator. Pair with the image resizer to preview how your mark survives downsizing, and the image format converter when converting SVG to PNG masters.
Advertisement