How to Make a Favicon from Your Logo (Step by Step, No Photoshop)
So you have a logo. Maybe a beautiful one. Maybe one your designer charged you 800 bucks for. And now you need to shove it into a 16 by 16 pixel square that sits next to your tab name in Chrome. Cool. Cool cool cool.
Here's the part nobody tells you: most logos look terrible as favicons. They were never designed to. A favicon is a totally different beast. It needs to be readable at the size of a fingernail clipping, work in dark mode, render on retina displays, install on iPhones, and not turn into a fuzzy gray smudge when Google Search shows it next to your link. That's a lot of jobs for one tiny picture.
Good news. You can do this in two minutes without opening a single design tool. I'll walk you through what works, what fails, and the part where browsers gaslight you into thinking the favicon broke (it didn't, your cache is just being a brat).
The 30 second version, for the impatient
Open the favicon generator. Drop your logo. Download the ZIP. Unzip it into the public folder of your site. Paste a couple of link tags in your HTML head. Hard refresh. Done. The full guide below is for people who want to know why each step matters and how to dodge the common traps.
Step 1: Pick the right part of your logo
Most logos have two parts. The wordmark (the words) and the symbol (the icon, monogram, or shape). At 16 by 16 pixels, the wordmark dies. Five letters become two pixels of brown smear. Don't even try.
Use one of these instead:
- The symbol, if you have one. The Apple. The Twitter bird. The Nike swoosh.
- A single letter from the wordmark. Pick a distinctive one. The G in Google works. The lowercase d in Dropbox works. The W in WordPress works.
- A simplified silhouette. Strip detail until only the recognizable shape remains.
Squint at your logo. If you can't tell what it is when blurry, your favicon won't work either. That's literally how a 16px tab looks on a regular monitor.
Step 2: Square it up with a bit of breathing room
A favicon is square. 1:1. Always. If your logo is wide or tall, you need to either crop it down to a square portion or pad it. Padding is usually the right call.
Add about 10 to 15 percent padding around the edges. So if your design is 1024 by 1024, the actual logo content should fit inside roughly the middle 800 by 800. Why? Because Apple Touch Icons get rounded corners on iOS, and Android may put your icon inside a circle or a squircle. If your logo touches the edges, the corners get chopped off. Sad face.
Also pick a background. Two options here. Transparent (good for SVG and PNG) or a solid brand color (better for Apple Touch Icon and Android, where transparency looks weird against the system wallpaper). I usually do both, and the favicon generator handles it for you.
Step 3: Upload to a favicon generator that does the whole thing
Here's where most tutorials fail. They tell you to export a single favicon.ico and call it a day. That was fine in 2007. In 2026, you need at least seven files for proper coverage across browsers and devices.
The set you actually need:
That looks like a lot. It is. But you don't make them by hand. Our free favicon generator takes one logo image and spits out all of these in a ZIP, plus the exact HTML you need to paste. It runs in your browser. Nothing uploads anywhere. Two minutes, no signup, no watermark.
Step 4: Drop the files into your public folder
Wherever your static files live, that's where these go. For Next.js it's the /public folder. For React with Vite it's the /public folder. For plain HTML, drop them next to your index.html.
Then put these tags in your <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">For Next.js App Router users, you can also drop the files in /app with specific names (icon.png, apple-icon.png) and Next will wire up the tags automatically. The favicon generator gives you a Next-ready folder if you pick that option.
Step 5: Hard refresh, then check
This is where people lose their minds. You upload everything. You reload the page. The old favicon is still there. Or worse, no favicon. Did it break? Probably not.
Browsers cache favicons more aggressively than almost any other resource. Sometimes for days. To force a refresh:
- Hard reload: Ctrl+Shift+R on Windows or Linux, Cmd+Shift+R on Mac.
- Open the page in incognito mode. Fresh cache, see what new visitors see.
- Clear browser cache for your site specifically. In Chrome devtools: Application tab, Storage, Clear site data.
- Add a query string:
/favicon.ico?v=2. Bumps the version, forces re-fetch. - If you're behind Cloudflare, also purge the Cloudflare cache for those file paths.
Common things that go wrong
The favicon looks blurry or grainy
You probably exported a small PNG and let the favicon generator scale it up. Always start from the highest resolution version of your logo. Vector source (SVG, AI, EPS) is best. Or a PNG that's at least 1024 by 1024. Generators downsample beautifully but upscale terribly.
Apple Touch Icon shows a black background
iOS doesn't respect transparency on Apple Touch Icons. If yours has a transparent background, it'll fall back to black, which usually looks bad. Use a solid background color that matches your brand. White or your primary brand color is usually safe.
Google still shows the old favicon in search results
Google caches separately from your browser. Google Search Console can take days to weeks to refresh. The fix: make sure your favicon is at least 48 by 48, served at a clean URL (no redirect), accessible to Googlebot, and let it sit. There's no manual purge. Patience is your friend here.
Dark mode favicon flashes white
If you have a dark logo on a transparent SVG, it disappears against dark browser themes. The fix is a media query inside the SVG that switches color based on prefers-color-scheme. Our favicon generator can produce dark mode SVGs out of the box.
What about animated favicons?
Old Firefox supported animated GIFs in tabs. Brief moment in time. Modern browsers killed it for performance and accessibility reasons (rapid flashing icons are a seizure risk for some users). The closest you get today is a dark mode SVG that swaps colors based on system preference. That's actually nicer than animation. Subtle, polished, doesn't make your tab look like a Vegas casino.
The size question, settled
People ask this constantly: what is THE size for a favicon. There is no single answer. There are six. But you don't need to memorize them. You just need a tool that produces all of them from one source image. That's what favicon generators do, and that's why you don't make them by hand in 2026.
Worth knowing for context though: Google's been recommending at least 48 by 48 for search results since 2022. Their official guidance bumped from "any size as long as it's square" to "at least 48 by 48 pixels" because tiny favicons made search results harder to scan. Sites with proper favicons see a measurable click-through bump in SERPs. Not huge, but real.
One favicon, every device
Here's the dream: one source image, one drop, full coverage. That's the whole point of the favicon generator we built. You upload your logo, set background colors and padding for the iOS and Android variants, preview what each one looks like in Chrome, Google Search, iOS, and Android. Then you download a ZIP with every file you need plus the HTML snippet to paste.
Everything happens in your browser. No upload, no signup, no watermark. Your logo never leaves your computer. We built it because the existing free options either had ugly watermarks, required you to make an account, or skipped the dark mode SVG. Now you don't have to choose.
Worth doing right once
A favicon is one of those small details that quietly tells visitors whether you care. A blurry or missing favicon makes a site feel unfinished, even if everything else is polished. A crisp favicon does the opposite. It's worth ten minutes of your time once and then you forget about it forever.
That's the whole post. Go make your favicon. Then send the link to that one friend who still has the default React logo on their startup site after eight months. They need this more than you do.
Make Your Favicon Now
Drop your logo, get a complete favicon package with ICO, SVG (light + dark), Apple Touch, Android, and a manifest. All in one ZIP, all in your browser, all free.
Open Favicon Generator →