Design & Media · Guide · Developer Utilities
How to design a favicon
Create favicons that render perfectly from 16×16 to 512×512 with dark mode support. Learn the right HTML tags and web manifest setup free online.
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.
Use these while you read
Tools that pair with this guide
- Favicon GeneratorConvert an uploaded image into favicons in every needed size instantly. Get 16x16 to 512x512 PNGs plus ICO free, no sign-up.Developer Utilities
- Image ResizerScale JPG, PNG, or WebP photos by exact pixels or percentage while keeping the aspect ratio. A free, instant online resizer that works offline with no signup required.File & Format Converters
- Image Format ConverterSwap between JPG, PNG, and WebP formats instantly in your browser for quick edits before sharing. A free, online tool with no upload required and no sign-up needed.File & Format Converters
- JSON FormatterPaste JSON to beautify, validate, and minify with clear error messages, all in your browser without sign-up—free instant tool for developers.Developer Utilities
Advertisement
Continue reading
- Design & MediaHow to use placeholder textReplace greeked text with realistic data using modern alternatives. Compare variants and avoid accessibility pitfalls with this free online guide.
- Design & MediaHow to work with aspect ratiosCalculate the right aspect ratios like 16:9 and 1:1 for your web layouts instantly. Prevent layout shifts with a free online guide to CSS and social media requirements, no sign-up.
- Design & MediaHow to choose border radius valuesDetermine perfect border radii with design-system scales and the nested-radius formula. Free, online guide for shaping buttons, cards, and squircles.
- Design & MediaHow to use box shadows effectivelyBox-shadow values decoded, Material-style elevation, multi-layer shadows, color and hue tinting, filter drop-shadow, dark mode, performance.
- Design & MediaHow to use CSS gradients effectivelyBuild CSS gradients that ship. Free guide to stops, OKLCH interpolation, mesh via stacked radials, animation, and accessibility — no signup required.
- Design & MediaHow to Choose Image DimensionsIdentify correct dimensions for blog hero, Open Graph, Instagram, and LinkedIn posts instantly. Free guide with tips to keep file sizes low, no sign-up needed.