Free Favicon Generator: Make Perfect Favicons for Every Device in 2026
Why favicons still matter (way more than people think)
Okay, real talk. Favicons are the tiny little icons sitting in your browser tab. You barely notice them when they're there. But the second they're missing? That sad, generic globe icon makes a site look abandoned. Like, "is this thing even online" abandoned.
Here's the thing. In 2026, a favicon isn't just a 16 by 16 pixel doodle anymore. It's a whole little army of files, manifests, and meta tags that have to play nice with iPhones, iPads, Androids, Windows tiles, dark mode, light mode, pinned Safari tabs, PWA splash screens, and that one weird Samsung Internet user who somehow still matters. Honestly? It's gotten kinda ridiculous.
And yet, most people I talk to (founders, indie devs, even some agencies) are still uploading a single 32x32 PNG and calling it done. Then they wonder why their site looks pixelated on a Retina MacBook, or why their Progressive Web App won't install on Android, or why iOS shows a weird zoomed-in screenshot when someone hits "Add to Home Screen." All preventable. All annoying.
So I'm gonna walk you through what actually works in 2026. The sizes you really need (spoiler: it's around 12 files), the HTML tags that cover 99% of devices, the dark mode trick that takes 30 seconds, and yeah, I'll mention that we built a free favicon generator at /tools/favicon-generator that handles all the boring parts. But you don't need it to follow along. The principles matter more than the tool.
All the favicon sizes you actually need in 2026
Buckle up. There are roughly 12 sizes that cover 99%+ of devices in 2026, and they range from a tiny 16x16 (for browser tabs) all the way up to 512x512 (for PWA splash screens and Lighthouse audits). Skipping any of them won't always break things, but it will make your site look kinda half-baked on certain devices.
Here's the full breakdown. I made this table because honestly trying to remember which iPad uses which size makes my brain hurt:
The favicon size cheat sheet
| Size (px) | Format | Where it shows up | Why you need it |
|---|---|---|---|
| 16x16 | ICO/PNG | Browser tabs, bookmarks (every browser) | The classic. Standard resolution tabs everywhere. |
| 32x32 | ICO/PNG | High-DPI tabs, Windows taskbar | Retina MacBooks, 4K displays. Looks sharper. |
| 48x48 | PNG/ICO | Desktop shortcuts, small Android contexts | Windows site icons, Android Chrome small views. |
| 72x72 | PNG | Legacy iPad home screen | Older iPads, still appears in some docks. |
| 96x96 | PNG | Older Android Chrome bookmarks, Google TV | Niche, but covers 1 to 2% of Android. |
| 120x120 | PNG | Older iPhone home screen (SE/6/7/8) | iOS legacy. Auto-downscales from larger if missing. |
| 144x144 | PNG | Windows 8/10 Start tiles, older Android | IE10 Metro tiles, some launchers. |
| 152x152 | PNG | iPad home screen (non-Pro) | Older iPad retina. |
| 167x167 | PNG | iPad Pro 12.9" home screen | Specific to Pro models. Skip and your icon looks fuzzy. |
| 180x180 | PNG | Current iOS home screen, Spotlight | The big one for iOS. Most important Apple size. |
| 192x192 | PNG | Android home screen, PWA install | PWA minimum. Lighthouse will yell at you without it. |
| 512x512 | PNG | PWA splash screens, Android app drawers | Required for Lighthouse PWA audits. Highest DPI. |
Twelve files. That's the magic number. Generate them all from a single 1024x1024 master PNG and you've got 99%+ device coverage. The research backs this up, every modern guide lands on roughly the same set.
Pro tip: Always design your master at 1024x1024. Downscaling is easy and lossless-ish. Upscaling a 256x256 to 512 looks awful and pixelated. Start big, shrink down. Same rule as photography.
ICO vs SVG vs PNG: the eternal debate
Every few years someone declares "ICO is dead, just use SVG!" And every few years they're wrong. Or partially right. Honestly the answer is: use all three, because they each cover gaps the others don't. Let me explain.
PNG: the workhorse
PNG is the gold standard in 2026. Like, 99% compatibility across Chrome, Firefox, Safari, Edge. All 100% support. It's lossless, supports transparency, and high-DPI looks great. Use PNG for every size in that table above. Done.
ICO: the stubborn survivor
The .ico format is a multi-size container (usually packs 16x16, 32x32, and 48x48 into one file). It's been around since like, the dinosaur era of the web. And it's still required for Windows taskbar pinning and some legacy browser tabs. Roughly 95% desktop browser support. The catch? Chrome has mishandled ICO files on high-DPI displays since v20 (way back in 2013), so they pixelate on Retina. That's why you pair ICO with PNG fallbacks. The ICO is for legacy stuff, the PNGs do the heavy lifting.
SVG: the future (mostly)
SVG favicons scale infinitely. One file, perfect at 16x16 or 512x512. Supported by Chrome 80+, Firefox 83+, Safari 15.4+ (partial), and Edge 80+. Roughly 92% of Chromium-based browsers render them, with some gaps in older Safari/iOS. Zero legacy IE support, but I mean, who's coding for IE in 2026? (If you are, I'm so sorry.)
The verdict: ship all three. ICO for Windows taskbar and old tabs, a stack of PNGs for platforms and PWA, and SVG for modern browsers that benefit from scalability. The good news is that our free favicon generator spits out all three in one shot. You upload one image, you get the whole package.
The exact HTML link tags you need (copy paste this)
Alright, here's the part everyone messes up. You've got your 12 PNG files, your ICO, your SVG. Now what? You need to tell the browser they exist. Drop these into your <head> section and you're set:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3b82f6">
<meta name="msapplication-TileColor" content="#3b82f6">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#3b82f6">
That's about 10 tags and it covers basically every platform. The sizes="any" attribute on the ICO tells the browser to pick the best resolution from the multi-size container. The apple-touch-icon at 180x180 will auto-scale down for smaller iPhones and iPads, so you don't strictly need every iOS size as a separate tag (though it doesn't hurt to include them).
The theme-color meta tag is underrated. It changes the color of the browser chrome on mobile (the bar at the top), which makes your site feel a bit more "app-like." Tiny detail, big perceived polish. Match it to your brand color. Speaking of brand consistency, if you're picking colors for your favicon and theme, our themes page at /themes has a bunch of pre-made color palettes that work well together. Saves the "what color should this be" debate with yourself.
Heads up: Don't put these tags in the<body>. They have to be in<head>. I've seen people drop them right before</body>and then wonder why nothing works. Browsers parse the head first and bail on icon stuff if it shows up too late.
The PWA manifest (where things get weirdly important)
If you want your site to be installable as a Progressive Web App (the kind users can add to their home screen and have it open in standalone mode without the browser bar), you need a manifest.json file. It's basically a tiny JSON file that tells the browser everything it needs to know about installing your site as an app.
The minimum viable manifest looks like this:
{
"name": "Your App Name",
"short_name": "App",
"description": "What your app does",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#3b82f6",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
The 512x512 is mandatory for Lighthouse to give you a passing PWA score (we're talking like a 48 point boost in the audit, not nothing). And serve it with the right MIME type, application/manifest+json, or some browsers will refuse to parse it. I've debugged that one at 2 AM. Not fun.
Maskable icons (the Android adaptive thing)
Android launchers love to crop your icon into circles, squircles, rounded squares, whatever shape the OEM decided was trendy that year. So Android wants you to provide a "maskable" icon: a 512x512 PNG where your actual logo lives inside a central 409x409 circle (about 80% of the canvas). The launcher crops the rest. If you don't provide one, your icon might get its edges chopped off, which looks awful.
Maskable icons boost install rates by something like 20 to 30% on adaptive launchers, according to PWA audits. So yeah, worth doing. There's a tool called maskable.app that lets you preview how your icon will look after cropping. Or, again, our generator handles it automatically.
Dark mode favicons (the 30-second trick)
OLED screens are everywhere now. Roughly 40%+ of Android devices in 2026 default to dark mode, and a huge chunk of macOS/iOS users keep it on permanently. If your favicon is a dark logo on a transparent background, it's basically invisible on a dark browser tab. Bad.
The fix is dumb easy. Use the prefers-color-scheme media query on your <link> tags:
<link rel="icon" href="/favicon-light.ico" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.ico" media="(prefers-color-scheme: dark)">
<link rel="icon" href="/favicon.ico" media="(prefers-color-scheme: no-preference)">
Make a dark-mode variant of your icon (usually the same logo with inverted colors, or a white version on transparent), and the browser will swap automatically based on the user's OS preference. 90%+ of modern browsers support this (Chrome 76+, Firefox 96+, Safari 15.4+).
If you're using SVG, there's an even cooler trick: embed a media query inside the SVG itself.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
.logo { fill: #000; }
@media (prefers-color-scheme: dark) {
.logo { fill: #fff; }
}
</style>
<path class="logo" d="..." />
</svg>
One file, two themes. Pretty slick. Test it in Chrome DevTools under Rendering, there's a "Emulate CSS media feature prefers-color-scheme" dropdown.
Common favicon mistakes that make designers cry
I've audited a bunch of sites over the years (sometimes for fun, sometimes because someone paid me to) and the same favicon mistakes show up over and over. Here are the big ones:
1. Designing too much detail at 16x16
16 by 16 pixels is 256 total pixels. That's it. Your beautifully detailed logo with the gradient and the tiny tagline? Disappears completely. Mush. Stick to 1 or 2 colors and a simple shape. Test by zooming your design to 100% (or just squinting). If you can't tell what it is, neither can anyone else.
2. Ignoring safe zones and padding
iOS auto-crops about 10 to 15% from the edges of your apple-touch-icon. Android maskable icons need that 409x409 central circle inside a 512x512 canvas. If your logo goes right to the edge of the file, it's getting chopped. Always leave breathing room. Use the maskable.app validator to check.
3. Uploading one file and calling it done
A single 32x32 PNG used to be enough back in like, 2010. Now it'll fail Lighthouse's PWA audit, look pixelated on Retina, and won't install as an app on Android. PWAs specifically require 192x192 AND 512x512, no exceptions.
4. Pre-rounding corners on Apple touch icons
iOS automatically rounds the corners of apple-touch-icons. If you pre-round them, iOS rounds them again on top of your rounding. Result: weird double-rounded corners that look broken. Just supply a square icon. Apple does the rest.
5. Skipping the ICO file entirely
"PNG handles everything!" Yeah, except Windows taskbar pinning, where ICO is still king. About 25% of desktop users will see a pixelated tab if you skip it. Takes 2 seconds to generate, just include it.
6. No dark mode variant
Already covered above. Just do it. Takes 30 seconds. Your OLED users will silently appreciate it (or, more likely, just not notice your site looks broken to other people).
Apple touch icon: the one that matters most for iOS
iOS handles favicons differently than every other platform, because of course it does. The apple-touch-icon is what shows up when someone hits "Add to Home Screen" in Safari. It also appears in iOS Spotlight search results, which is a surprisingly common discovery surface in 2026 (something like 40%+ of mobile web app usage involves Add to Home Screen at some point).
The primary spec is dead simple:
- Size: 180x180 PNG
- Format: PNG only (no ICO, no SVG, just PNG)
- Padding: 10 to 15% inside the canvas (so your logo doesn't crash into the rounded corners iOS adds)
- Background: Solid color preferred (transparent works but looks weird on some home screen wallpapers)
- No pre-rounding: Don't round the corners yourself, iOS does it
iOS auto-scales the 180x180 down to 152x152 for non-Pro iPads, 167x167 for iPad Pro 12.9", and 120x120 for older iPhones. So if you only ship one Apple icon, make it 180x180. Want full coverage? Ship 120, 152, 167, and 180 separately. The auto-scale is fine but discrete files render slightly crisper.
There's also apple-touch-icon-precomposed, which was a way to skip the gloss effect Apple used to add automatically. It's only relevant for iOS 2 through 6. So unless you're targeting flip phones, ignore it.
Why this whole favicon thing actually affects user trust
Okay let me get a little philosophical for a sec. Why does any of this matter? Why are we writing 2500 words about what is, fundamentally, a tiny picture?
Because the favicon is part of your site's first impression, and first impressions in 2026 happen in literal milliseconds. A pixelated favicon, or a missing one, signals "this site isn't well maintained" before a user has even read a word of your content. It's the same psychology that makes a website with broken HTTPS feel sketchy, even if the rest looks fine. Tiny details add up.
I think a lot about this in the context of live chat widgets too. We wrote a whole post on why live chat gets ignored, and a big chunk of it comes down to trust signals. Same idea. Users are pattern-matching on a hundred tiny cues, mostly unconsciously. Get the cues right and they trust you. Get them wrong and they bounce. Favicons are one of those cues.
Also, brand consistency is a thing. Your favicon should match your logo, your theme color, your overall vibe. If your site uses a blue gradient brand and your favicon is some random orange shape from 2017, you're confusing people. Same goes for the in-app stuff (we wrote about this a bit when comparing live chat widgets for small business, where consistent branding across the chat bubble and the favicon is what makes a site feel "real").
How to actually test your favicon worked
You generated your icons. You added the link tags. You feel good. But did it actually work? Here's how to check, because trust me, it doesn't always work the first time.
Manual checks
- Hard refresh in Chrome: Cmd+Shift+R (Mac) or Ctrl+Shift+F5 (Windows). Browsers cache favicons aggressively. Aggressively.
- Check on Retina: Look at the tab on a high-DPI display. If it looks blurry, your 32x32 isn't loading.
- Add to Home Screen on iPhone: Open Safari, tap Share, tap Add to Home Screen. Does the icon look right? Or is it a tiny screenshot of your page (the dreaded fallback)?
- Lighthouse audit: Chrome DevTools > Lighthouse > Run a PWA audit. If you get a "manifest doesn't have icons" warning, your manifest.json is broken.
- realfavicongenerator.net/favicon_tester: Drop in your URL, see how every platform sees your icon. Free, useful, no signup.
Dark mode testing
Open DevTools > Rendering tab > scroll down to "Emulate CSS media feature prefers-color-scheme" > switch between light and dark. Does your tab favicon swap? If yes, congrats. If no, double check your media query syntax.
Common gotcha: Cloudflare and other CDNs will cache your old favicon for ages. If you updated it and it's not showing up, purge the CDN cache. Sometimes you also need to wait a few hours for browsers to give up on their cached version. Annoying but normal.
Use our free favicon generator (CTA time)
Look, you can do all of this manually. Open Photoshop, export 12 sizes, generate an ICO with some online converter, hand-write your manifest.json, copy the link tags into your head. It's like a 30-minute job if you know what you're doing. Maybe an hour if you don't.
Or you can hit our free favicon generator at /tools/favicon-generator, upload one 1024x1024 PNG, and download a zip with all 12 PNGs, the ICO, the SVG (if you uploaded an SVG source), the manifest.json, and a snippet of the exact HTML tags to paste into your head. Takes about 30 seconds. No signup, no email gate, no watermark, no "premium" upsell. Just the files.
Honestly, we built it because we needed it ourselves for our own sites and the existing tools were either bloated, paywalled, or generated stuff in weird formats. If you find it useful, cool. If not, all the info above will let you do it by hand. Either way, please don't ship a single 32x32 PNG and call it a favicon.
You can also check out our homepage if you want to see what TGLiveChat does (spoiler: live chat for Telegram, but our blog covers all sorts of web dev stuff because we're nerds).
FAQ: the questions everyone asks
Do I really need 12 different favicon sizes?
For 99%+ device coverage in 2026, yeah, basically. You can get away with fewer if you're cool with some platforms looking pixelated or showing the wrong fallback. But the actual file size of all 12 PNGs combined is usually under 50KB total, so there's no real cost to including them all. Generate once, ship forever.
What's the difference between a favicon and an apple-touch-icon?
The favicon (16x16, 32x32 ICO/PNG) is what shows in browser tabs. The apple-touch-icon (180x180 PNG) is specifically for when iOS users add your site to their home screen. They serve different purposes and you need both. iOS literally ignores the regular favicon for home screen stuff and falls back to a screenshot of your page if there's no apple-touch-icon, which looks terrible.
Can I just use an SVG favicon and skip everything else?
Almost, but not quite. SVG covers Chrome 80+, Firefox 83+, Safari 15.4+, and Edge 80+. That's roughly 92% of Chromium browsers. But you still need an ICO for Windows taskbar pinning, and a 180x180 PNG for iOS home screen. So minimum viable favicon set in 2026 is: SVG + ICO + 180x180 PNG + 192x192 + 512x512 (for PWA). Five files. Still better than 12, but not as bulletproof.
Why isn't my new favicon showing up after I uploaded it?
Browser cache, almost always. Hard refresh (Cmd+Shift+R or Ctrl+F5). If it's still not showing, purge your CDN cache (Cloudflare, Vercel, whatever you use). If it's STILL not showing, check that the file path in your link tag actually resolves (open the URL directly in a new tab). Like 90% of "favicon won't update" issues are caching.
Do I need a maskable icon if I'm not building a PWA?
Nope. Maskable icons are only used by Android launchers when your site is installed as a PWA. If you're a regular website (no manifest.json, no install prompt), you can skip maskable icons entirely. But honestly, adding a manifest and the maskable icon takes like 5 extra minutes and makes your site installable, which is a nice option to give users. Why not.
Alright, that's the whole favicon picture for 2026. Twelve sizes, three formats, ten link tags, one manifest, and a dark mode trick. It sounds like a lot, but once you've done it once (or run your image through our generator), it's pretty automatic. Now go fix that pixelated tab. You'll feel better. Promise.