A favicon is the small icon that appears in browser tabs, bookmarks, history lists, and — on mobile — home screen shortcuts and app switchers. Despite being one of the smallest visual elements on a website, the favicon plays an outsized role in branding, recognition, and perceived professionalism. A missing or poorly designed favicon signals neglect; a sharp one reinforces trust in every browser tab.
This guide covers everything you need to create production-ready favicons: the required sizes for every platform, the right file formats, HTML markup, manifest.json integration, dark mode support, and the most common mistakes developers make.
What Favicons Are and Why They Matter
The term "favicon" is short for "favorites icon" — it originally appeared only in Internet Explorer's favorites (bookmarks) bar. Today, favicons show up everywhere:
- Browser tabs: The most visible location. Users with many tabs rely on favicons to identify sites at a glance.
- Bookmarks and reading lists: A recognizable icon helps users find your site in a crowded list.
- History and autocomplete: Browsers show favicons alongside URL suggestions, reinforcing brand recall.
- Mobile home screens: When users add your site to their phone's home screen, the favicon (or apple-touch-icon) becomes the app icon.
- PWA splash screens: Progressive Web Apps use the 512×512 icon from manifest.json during app launch.
- Search results: Google and Bing display favicons next to search result URLs in mobile and desktop SERPs.
A well-designed favicon is a micro-branding asset. It reinforces your visual identity in contexts where your full logo can't appear. Investing fifteen minutes to get it right pays off across every user touchpoint.
Required Favicon Sizes
Different platforms and contexts require different icon sizes. Here's the complete list you need to cover all major use cases:
16×16 — Browser Tabs
The classic favicon size. This is what appears in browser tabs and the address bar. At this scale, only the simplest shapes and highest-contrast colors survive. If your icon isn't legible at 16×16, it needs to be simplified.
32×32 — Taskbar & Shortcuts
Used by Windows taskbar shortcuts, macOS dock, and some desktop bookmark bars. This size is also used as a high-DPI version of the 16×16 icon on Retina displays.
48×48 — Windows Tiles
Windows uses the 48×48 icon for site tiles and shortcut icons. The ICO format traditionally bundles 16, 32, and 48 sizes into a single file for Windows compatibility.
180×180 — Apple Touch Icon
When iOS users add your site to their home screen, Safari uses the apple-touch-icon. Apple requires exactly 180×180 pixels. iOS automatically rounds the corners — don't add rounded corners yourself or you'll get double-rounded results.
192×192 — Android Home Screen
Android Chrome uses the 192×192 icon from your web app manifest for home screen shortcuts. Provide it as a PNG with a transparent or solid background. Android may mask the icon into a circle or rounded square depending on the launcher.
512×512 — PWA Splash Screen
Progressive Web Apps require a 512×512 icon for splash screens during app launch. This is the largest favicon asset you need. It's also used by the Chrome install prompt and some app stores. Make sure it looks clean at this large size — artifacts from upscaling a small icon will be very visible.
File Formats: ICO vs PNG vs SVG
Three formats dominate the favicon landscape. Each has distinct strengths.
ICO (Legacy Standard)
The ICO format is a container that bundles multiple image sizes into a single file. A typical favicon.ico holds 16×16, 32×32, and 48×48 versions. ICO has universal browser support — it's been around since Internet Explorer 5. However, it doesn't support transparency as well as PNG, the file size is larger, and the format is archaic. Use ICO only as a fallback.
PNG (Modern Standard)
PNG is the most widely supported modern format for favicons. It offers full alpha transparency, excellent compression, and is natively supported by all browsers released after 2015. The downside: you need separate PNG files for each size, since PNGs can't bundle multiple resolutions. PNG is required for apple-touch-icon and web app manifest icons.
SVG (Best Modern Choice)
SVG is the ideal favicon format for modern browsers. A single SVG file scales perfectly to any resolution — no need for multiple sizes. SVGs support CSS media queries, enabling dark mode adaptation. They're also extremely lightweight (often under 1 KB). The limitation: Safari doesn't support SVG favicons on iOS home screens, and some older browsers don't support them at all. Always pair SVG with an ICO or PNG fallback.
Design Tips for Effective Favicons
Designing for 16×16 pixels is a unique challenge. Standard logo design rules don't apply at this scale.
Simplify Ruthlessly
Your favicon should be the simplest recognizable element of your brand — typically a single letter, a monogram, or an abstract mark. Full logos with wordmarks, taglines, or fine details will be an unreadable blob at 16 pixels. Reduce your design to its absolute essence.
Maximize Contrast
Low-contrast favicons disappear against browser chrome and tab bars, especially in dark mode. Use bold colors with high luminance contrast. Test your favicon on both light and dark tab bars. If it vanishes against either, adjust the colors or add a subtle outline.
Test at Actual Size
Design at a larger canvas (64×64 or 128×128) for precision, but always preview at 16×16 to verify legibility. Zoom to 100% on your screen. If you can't identify the icon instantly, simplify further. Check it in a real browser tab alongside other sites' favicons.
Use a Transparent Background
For browser tabs and bookmarks, transparent backgrounds look cleanest. For apple-touch-icon and Android home screens, use a solid background color — transparent areas get filled with white or black depending on the platform.
Don't Forget Padding
Leave a small safe zone (about 10% of the canvas) around the icon edges. Icons that bleed to the edge feel cramped, and some platforms add their own padding that may clip edge pixels.
HTML Link Tags
Place these tags in the <head> of every page to ensure all platforms find the right icon:
<!-- SVG favicon (modern browsers) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- ICO fallback (legacy browsers) -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Optional: explicit 32×32 PNG -->
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">Order matters: browsers use the last matching icon, so place the most preferred format (SVG) first and the fallback (ICO) after. The type attribute helps browsers that don't recognize the file extension.
Web App Manifest (manifest.json)
For PWA support and Android home screen icons, reference your icons in a manifest file:
{
"name": "Your App Name",
"short_name": "App",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icons/icon-512-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#4f46e5",
"background_color": "#ffffff",
"display": "standalone"
}The maskable purpose tells Android that the icon has a safe zone and can be cropped into any shape (circle, squircle, etc.) by the launcher. A maskable icon should have important content within the inner 80% of the canvas — the outer 20% may be clipped.
Link the manifest in your HTML:
<link rel="manifest" href="/manifest.json">Dark Mode Favicons
With dark mode adoption above 80% on many platforms, your favicon needs to work on both light and dark tab bars. SVG favicons handle this elegantly with embedded CSS:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
.icon { fill: #1a1a2e; }
@media (prefers-color-scheme: dark) {
.icon { fill: #e0e0e0; }
}
</style>
<rect class="icon" width="32" height="32" rx="6" />
<text x="16" y="23" text-anchor="middle"
font-family="sans-serif" font-size="20"
font-weight="bold" fill="#fff">S</text>
</svg>The prefers-color-scheme: dark media query inside the SVG swaps colors automatically when the user's OS is in dark mode. No JavaScript required, no extra files. This is the single best reason to use SVG favicons.
For PNG/ICO favicons, you can't respond to dark mode dynamically. The workaround is to choose a design that has sufficient contrast on both light and dark backgrounds — typically a colored icon on a transparent background, or an icon with a built-in background shape.
Common Favicon Mistakes
Even experienced developers stumble on these:
- Using the full logo: A detailed logo with text is illegible at 16×16. Extract a single mark or initial instead.
- Renaming a PNG to .ico: An ICO file has a specific binary format. Simply changing the extension doesn't convert it. Browsers may reject a renamed PNG with an .ico extension. Use a proper ICO conversion tool.
- Missing apple-touch-icon: Without it, iOS shows a blurry screenshot of your page as the home screen icon. Always provide a 180×180 PNG.
- Huge file sizes: Favicons should be tiny — ideally under 10 KB for PNGs, under 15 KB for ICO. A 200 KB favicon wastes bandwidth on every page load across every tab.
- No fallback for SVG: About 3–5% of browsers don't support SVG favicons. Always include an ICO or PNG fallback alongside your SVG.
- Forgetting to test: Open your site in Chrome, Firefox, Safari, and Edge. Check on iOS and Android. Verify the icon in a bookmark and in Google Search results. Each context may reveal issues.
- Caching problems: Browsers cache favicons aggressively. After updating your favicon, users may see the old one for days or weeks. Version the filename (e.g.,
favicon.svg?v=2) or use cache-busting headers.
Testing Your Favicon
Before deploying, verify your favicon across all contexts:
- Browser tabs: Open your site in Chrome, Firefox, Safari, and Edge. Check both light and dark mode if using SVG.
- Bookmarks: Add the site to your bookmarks bar and verify the icon renders correctly.
- Mobile home screen: On iOS, use "Add to Home Screen" from Safari. On Android, use "Add to Home screen" from Chrome.
- Google Search: Use Google's Rich Results Test or search for your site and check the favicon in results.
- DevTools: Open the Network tab, filter by "img" or "icon", and verify each favicon file loads with a 200 status and correct MIME type.
- Online validators: Tools like RealFaviconGenerator's checker test all platforms and report missing sizes.