Favicon Best Practices: A Complete Guide for 2026
Everything you need to know about favicons in 2026 — sizes, formats, where to put them, how to make them look crisp on every device, and how to ship them in five minutes.
Favicons are tiny — 16×16 or 32×32 pixels in most contexts. They appear in browser tabs, bookmarks, history lists, share previews, and PWA installs. They're also one of the most consistently overlooked branding details on the web. A polished favicon set takes ten minutes to produce and makes a site look finished in every place a favicon appears. A missing or broken favicon makes a site look unmaintained.
The reason favicons are fiddly is that there is no single favicon. Different platforms expect different sizes and formats, and the right setup includes them all. This guide is the complete checklist as of 2026 — what sizes you need, what formats, where to put them, and how to make them crisp.
The full favicon set you actually need
favicon.ico — the legacy fallback every browser will request by default if you don't tell it otherwise. Usually contains 16×16, 32×32, and 48×48 sizes embedded in one file. Goes in the root of your domain (yoursite.com/favicon.ico).
favicon-16x16.png and favicon-32x32.png — referenced from your HTML <head> for browsers that prefer PNG over ICO. These are what appears in modern browser tabs and bookmarks.
apple-touch-icon.png at 180×180 — the iOS home-screen icon when someone bookmarks your site to their home screen. iOS uses this same image for share previews and other contexts.
icon-192x192.png and icon-512x512.png — used by Android home screens and Progressive Web App installs. Referenced from your web manifest (site.webmanifest).
site.webmanifest — a small JSON file that tells PWA-aware platforms about your site's icons, name, and theme color. Goes in your root alongside the icons.
Optional: maskable icons (a special variant for Android adaptive icons) and SVG favicons (a modern alternative that scales perfectly but isn't universally supported yet).
Where everything goes
All icon files go in the root of your public directory. The URLs should be: yoursite.com/favicon.ico, yoursite.com/favicon-32x32.png, yoursite.com/apple-touch-icon.png, etc. Some tools nest icons in a /favicons/ folder, which works but adds a layer of indirection — the root convention is simpler.
The site.webmanifest also goes at the root. Reference it from your HTML <head> with <link rel="manifest" href="/site.webmanifest">.
Reference the rest from your HTML <head>: <link rel="icon" type="image/x-icon" href="/favicon.ico">, <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">, <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">, and <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.
Our favicon generator produces all the files plus a ready-to-paste HTML snippet, so you don't have to type any of this by hand.
Design rules for small icons
Favicons are displayed at very small sizes. A 16×16 icon has 256 pixels total — there is no room for fine detail. The design rules are different from designing a logo for any other context.
Use bold, simple shapes. A single letter, a monogram, a stylized symbol, or a high-contrast geometric mark all work. Detailed illustrations, gradients, fine text, or thin strokes will turn to mush at 16×16.
Use high contrast. Subtle pastels and low-contrast gradients disappear against typical browser tab backgrounds (white in light mode, dark gray in dark mode). Strong saturated colors with high contrast read crisply against both.
Test against light and dark backgrounds. Modern browsers have both light and dark tab colors. A favicon that's perfect against white may be invisible against dark gray, and vice versa. Pick a design that reads against both — usually by having strong contrast on at least one edge.
Pad slightly. Some platforms (notably iOS home screens) apply automatic rounded-corner masking and may clip the outer 5–10% of your icon. Leave a small margin around your mark in the source so nothing critical gets clipped.
Source image preparation
Start from the largest source you can produce. 1024×1024 is ideal; 512×512 is the practical minimum. The generator downscales beautifully but cannot invent detail — a 64-pixel source produces blurry 16-pixel icons.
Use a square canvas. Non-square inputs get letterboxed (padded to square) to match favicon expectations. Save yourself the surprise and start square.
Pick the right background. PNG with transparency works well — the favicon then sits cleanly on any tab background color. PNG with a solid background also works, but the background color will be visible around your mark on every tab — make sure it's a brand color you want everywhere.
Export your source as PNG, not JPG. JPG compression introduces artifacts that get amplified when downscaling to small sizes. Lossless PNG keeps every pixel crisp through the rasterization pipeline.
The manifest file
site.webmanifest is a small JSON file that informs PWA-aware platforms (mostly Android, but also some desktop browsers) about your site's branding. A minimal valid manifest:
{ "name": "Your Site Name", "short_name": "Your Site", "icons": [ { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" }
Reference it from your HTML <head>: <link rel="manifest" href="/site.webmanifest">. The favicon generator includes a sensible default manifest in the ZIP it produces, so you don't have to write this from scratch.
theme_color sets the browser UI color when your site is opened in a PWA. background_color is the splash screen color while loading. Set both to colors that match your brand.
Verifying everything is installed correctly
After installing, hard-refresh your site in a private/incognito window. Look at the tab — the new favicon should appear. If it doesn't, the most common cause is favicon caching: browsers cache favicons aggressively and may keep the old one for hours. Try a different browser, or use DevTools to disable cache and reload.
Check the iOS preview: on an iPhone or iPad, open your site in Safari, tap the Share button, and select 'Add to Home Screen'. The preview should show your apple-touch-icon. If it shows a generic screenshot or a low-quality icon, double-check that apple-touch-icon.png is at your site root and exactly 180×180.
Check the Android preview: in Chrome on Android, open your site, tap the menu, and select 'Add to Home Screen' or 'Install App'. The icon you see is your 192×192 (or maskable variant). If it's wrong, verify the manifest is correctly referenced and the icon URLs are accessible.
Run a tool like RealFaviconGenerator's preview or your browser's DevTools Application tab to confirm every favicon URL is reachable. A 404 on any of them is the most common cause of a broken favicon set.
Wrapping up
Favicons are a small detail that consistently signal whether a site is maintained. A complete favicon set that looks crisp in every context takes ten minutes to produce with our favicon generator — upload one square source image, download the ZIP, copy the files to your site root, paste the HTML snippet.
The payoff lasts forever. Every visitor in every tab in every bookmark sees the polished version. Cost: ten minutes. Benefit: every visitor, every visit, every time.
Tools mentioned in this guide
More guides
- PNG vs JPG vs WebP: Which Image Format Should You Use in 2026?
Pick PNG for screenshots and transparency. Pick JPG for photos that need universal compatibility. Pick WebP for everything else — it's smaller, sharper, and works in every modern browser.
- How to Optimize Images for the Web (Without Losing Quality)
Most websites serve images that are 5–20× larger than they need to be. Here's the order of operations that cuts image weight by 80%+ with no visible quality loss: resize first, convert format, compress, then serve responsively.
- EXIF Metadata Explained: What Your Photos Reveal About You
Every photo your phone takes records exactly when, where, and how it was captured. That data travels with the file unless you strip it. Here's what's in there, who can read it, and how to remove it before sharing.