The favicon is the single smallest, most-rendered piece of branding you ship. It appears in every browser tab, every bookmark bar, every iOS home screen, every search-result row. Get it wrong and your site quietly looks broken — a fuzzy 16-pixel blob next to competitors with crisp logos. Get it right and you spend zero time thinking about it again for two years.
Most favicon advice on the open web was written between 2014 and 2019 and has not aged well. Browsers changed, Apple standardized, Windows tile pinning died, and a half-dozen historical edge cases stopped mattering. This is the practical 2026 update.
From text, emoji, or an image. ICO + SVG + PNG + apple-touch-icon + manifest.json, bundled in a ZIP. Free, no signup.
Try the Favicon Generator free →The PNG-at-every-size shotgun approach (16, 32, 48, 64, 96, 128, 144, 152, 167, 180, 192, 256, 384, 512) was solving for browser bugs that no longer exist. The 2026 minimum is five files and covers roughly 99% of real-world traffic:
| File | Size | Format | What it covers |
|---|---|---|---|
favicon.ico | 16 + 32 + 48 multi | ICO | Legacy IE, Edge tab, address bar fallback |
favicon.svg | any (vector) | SVG | All modern browsers — sharp at every zoom level |
apple-touch-icon.png | 180×180 | PNG | iOS home screen, Safari pinned tab |
icon-192.png | 192×192 | PNG | Android home screen, PWA install prompt |
icon-512.png | 512×512 | PNG | Android splash, PWA store, social-card fallback |
If you only ship those, every modern device picks the closest match and downscales. Browsers are good at downscaling. Browsers are not good at upscaling 16×16 ICOs to 512×512 launcher icons, which is why you need both ends of the range.
Designers tend to mock up the favicon at 512×512 and assume it will look fine when scaled. It will not. At 16×16 you have roughly 200 effective pixels of canvas, and any stroke thinner than 2 actual pixels disappears or flickers between frames.
The reliable workflow:
If your brand color sits in the muddy middle (gray, beige, sage, dusty pink), the 16-pixel favicon will be unreadable. Pin the icon to your accent color or use white-on-accent. If you don't have an accent yet, the Color Palette Generator ships AAA-contrast palettes you can lift from directly.
SVG favicons have been universally supported since 2023, and they are objectively better at every size — one file, vector-perfect, ~1KB. The 2026 power move is embedding a dark-mode variant inside the same SVG using prefers-color-scheme:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
.icon { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
.icon { fill: #ffffff; }
}
</style>
<path class="icon" d="..."/>
</svg>Now your favicon flips automatically when the user is in dark mode. No second file, no JS, no CSS variable plumbing. Chrome, Firefox, Safari, and Edge all honor this in 2026.
The canonical 2026 favicon block — copy this verbatim into <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Three things to notice. First, no sizes attribute on the SVG line — vector means "any size". Second, no sizes attribute on the apple-touch-icon — Apple has only requested 180×180 since iOS 8 and the multi-size declarations from 2014 just bloated the head. Third, the sizes="any" on favicon.ico tells modern browsers to prefer the SVG when both are listed, while still falling back gracefully.
The Web App Manifest is what makes your site installable as a PWA, controls Android splash screens, and feeds icon hints to the OS. The minimum 2026 manifest:
{
"name": "Your Site Name",
"short_name": "YourSite",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
],
"theme_color": "#0a0a0f",
"background_color": "#0a0a0f",
"display": "standalone",
"start_url": "/"
}The one thing most older guides miss: the maskable icon variant. Android 12+ crops launcher icons into circular, squircle, or teardrop shapes depending on the device skin. A non-maskable icon gets cropped at the edges and your logo loses its corners. A maskable icon has a 20% safe zone of padding around the logo and looks correct on every Android skin.
Browsers cache favicons aggressively. Once a user has loaded /favicon.ico, they may not refetch it for weeks even after you push a new file. The clean fix is to include a version string in the path:
<link rel="icon" href="/favicon.svg?v=3" type="image/svg+xml">Bump ?v= any time the favicon changes. Query params are usually enough — but Safari has a known bug where it ignores favicon query strings and you may need to actually rename the file (favicon-v3.svg) to force a refetch.
A complete favicon set should weigh well under 10KB. If yours is bigger, something is wrong:
Favicons are loaded on every single page view across your entire site. Saving 30KB here is worth more than saving 300KB on a hero image only loaded once per session.
The two free tools worth bookmarking:
If you're publishing a blog post about your launch, also generate a matching Open Graph image and verify your meta tags render correctly — bare-minimum on-page SEO that compounds with backlinks.
A short list of historical favicon practices that no longer earn their keep:
browserconfig.xml — almost nobody pins sites to the Start menu anymore. Windows 11 silently ignores it.<link rel="apple-touch-icon"> block with sizes 57, 60, 72, 76, 114, 120, 144, 152, 167, 180. Apple only requests 180×180 since iOS 8.rel="mask-icon"). Safari deprecated this with the unified SVG favicon support.Strip those out. Your <head> shrinks, your manifest gets readable, and nothing breaks.
Type a letter, drop an emoji, or upload a logo. We output ICO + SVG + PNG (180, 192, 512, maskable) + manifest.json + the canonical HTML block. Free, no signup, no email gate.
Open the Favicon Generator →If you only have two minutes, run this checklist on your live site:
favicon.ico, favicon.svg, apple-touch-icon.png, and manifest are all present in <head>.prefers-color-scheme block from above.Five checks. Ten minutes total. Ship it once, forget it for two years.