How to Create a Favicon for Your Website (Free, Every Size, 2026)
Your site is live. The design is clean, the copy is tight — and then you look at the browser tab and see a blank sheet of paper where your logo should be.
The favicon is the smallest asset on your website and, reliably, the last one anyone remembers. It's also the one that shows up in browser tabs, bookmarks, history lists, search results, phone home screens and Google's mobile snippets. A missing favicon quietly makes a site look unfinished everywhere it gets shared.
This guide covers what a favicon actually is in 2026 (spoiler: it's not one file), which sizes you genuinely need, and how to generate the whole package free in your browser.
What Is a Favicon?
A favicon ("favorite icon") is the small square image that represents your site. It started life in 1999 as a single 16×16 pixel favicon.ico file sitting at the root of your domain — browsers requested /favicon.ico whether you asked them to or not, and many still do.
That one-file era is over. Today the same icon has to look right in:
So a modern "favicon" is really a small package of files plus five lines of HTML.
Which Favicon Sizes Do You Actually Need?
You'll find lists online demanding 20+ sizes, most of them left over from Windows 8 tiles and long-dead browsers. Here's the honest 2026 shortlist:
| File | Size | What it covers |
|---|---|---|
favicon.ico | 16 + 32 + 48 combined | Legacy browsers, bookmarks, the automatic /favicon.ico request |
favicon-16x16.png | 16×16 | Standard browser tab |
favicon-32x32.png | 32×32 | Retina tabs, bookmark bar, Google search results |
favicon-48x48.png | 48×48 | Windows shortcuts, some Android surfaces |
favicon-96x96.png | 96×96 | Desktop shortcuts, higher-DPI displays |
apple-touch-icon.png | 180×180 | iOS "Add to Home Screen" |
android-chrome-192x192.png | 192×192 | Android home screen, PWA install |
android-chrome-512x512.png | 512×512 | PWA splash screens, app listings |
site.webmanifest | — | Tells Android/PWA which icons to use |
Method 1: Generate the Whole Package in Your Browser (Fastest)
The quickest route is to let a generator produce every size at once, correctly named, in a single ZIP.
Step-by-Step
The ZIP contains all seven PNG sizes, a real multi-size favicon.ico, a ready site.webmanifest, and a README with the exact HTML snippet.
✅ No signup, no watermark, no upload limit
✅ Your image never leaves your device — rendering, ICO packing and ZIP creation all happen locally in your browser
✅ Works on any device with a browser
Why local matters: a logo is often the first asset of an unannounced product or rebrand. Generating it client-side means the file is never transmitted anywhere — open your network tab and check.
Method 2: No Logo Yet? Make One From a Letter or Emoji
For a side project, a docs site, an internal tool or an MVP, a wordmark-free icon is perfectly respectable — a single bold letter on a brand color reads better at 16×16 than a detailed logo ever will.
In the generator's Text & Emoji tab:
A 🧰 or a bold K on a deep indigo circle will look more intentional than a stretched screenshot of your logo. You can always swap the files later — the filenames and HTML stay identical.
Method 3: Export From Your Design Tool Manually
If you already work in Figma, Illustrator or Photoshop, you can export sizes by hand. Two things to watch:
.ico from a standard export; Photoshop needs a plugin, and renaming a PNG to favicon.ico is not the same file formatHonestly, this is the slow path. Even designers who build the artwork by hand usually run the final PNG through a generator to get the ICO and manifest.
Design Rules for Something That's 16 Pixels Wide
A favicon is a logo problem, not an image problem. At 16×16 you have 256 pixels total — roughly the resolution of a single letter in this paragraph.
A useful test: squint at the 16px preview from arm's length. If you can still tell whose site it is, you're done.
Where to Put the Files
Drop every file from the ZIP into the root folder of your site — the same level as your homepage, so they resolve at https://yoursite.com/favicon.ico.
| Stack | Folder |
|---|---|
| Static HTML | the site root, next to index.html |
| Next.js | public/ |
| Vite / React / Vue | public/ |
| WordPress | theme root, or use Appearance → Customize → Site Identity |
| Hugo / Jekyll | static/ or the site root |
Finally, open site.webmanifest and fill in the two empty fields:
{
"name": "Your Full Site Name",
"short_name": "YourSite",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
short_name is what appears under the icon on an Android home screen — keep it under about 12 characters so it doesn't get truncated.
"I Uploaded It and Nothing Changed" — Fixing Favicon Caching
This is the single most common favicon complaint, and it's almost never a broken file. Browsers cache favicons far more aggressively than any other asset — often ignoring a normal hard refresh entirely.
Work through these in order:
https://yoursite.com/favicon.ico directly. If the icon loads there, your file is fine and it's purely a cache issue. If you get a 404, the file isn't at the root.Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac).href="/favicon-32x32.png?v=2". Bump the number whenever you change the icon.If the icon shows on desktop but not on an iPhone home screen, the culprit is almost always a missing or misnamed apple-touch-icon.png — iOS only looks for that exact name and size.
Does a Favicon Affect SEO?
Not as a ranking factor. Google has never treated favicons as a signal of quality or relevance.
It does affect click-through rate, which is a different and more practical thing. Google shows your favicon next to your result on mobile search. A result with a crisp brand icon reads as an established site; a result with a generic globe placeholder reads as an abandoned one — and users decide which link to tap in about a second.
Google's requirements are simple: the icon must be a multiple of 48px square (which is why 48×48 and 96×96 are in the package), must live at a stable URL, and must not be a generic placeholder or anything offensive.
Related reading: finish the rest of your launch checklist with our Robots.txt & Sitemap Generator — the other boring-but-critical files every new site needs.
Frequently Asked Questions (FAQ)
Q: What favicon sizes do I need in 2026?
A: The essentials are favicon.ico (16/32/48 combined), 16×16 and 32×32 PNGs for browser tabs, 48×48 and 96×96 for shortcuts and Google, 180×180 for the iOS home screen, and 192×192 plus 512×512 for Android and PWAs. Our generator produces all of them in one click.
Q: Do I still need favicon.ico, or are PNGs enough?
A: Modern browsers accept PNGs, but browsers and tools still request /favicon.ico automatically, and some bookmark managers and older clients only understand ICO. It costs you a few kilobytes — keep it.
Q: Can I make a favicon from an emoji or a letter? A: Yes. Switch to the Text & Emoji tab, type up to two characters or a single emoji, pick your colors and shape, and download the same full package. It's ideal for projects that don't have a logo yet.
Q: Why is my new favicon not showing up?
A: Almost always browser caching. Load the file's URL directly to confirm it exists, then hard-refresh, try incognito, or add ?v=2 to the URL in your HTML while testing. Google search results update only on the next crawl, which can take days.
Q: Does a favicon help SEO? A: It isn't a ranking factor, but Google displays it beside your result on mobile, so it affects click-through rate and how trustworthy your listing looks.
Q: Is it safe to upload my logo to an online favicon generator? A: With our tool, your image never leaves your device — the rendering, ICO packing and ZIP creation all run in your browser. For other tools, check whether they upload to a server before you use an unreleased logo.
Q: What size should my source image be? A: Start with at least 512×512, square, ideally with a transparent background. Larger is fine; anything smaller than 512 will look soft on PWA splash screens.
Wrapping Up
A favicon takes about two minutes and then works silently for the life of your site. Get the full set once — ICO, PNGs, touch icon, manifest — paste five lines into your , and every browser, phone and search result has something to show.
Start here: free Favicon Generator — upload a logo or type a letter, and download the complete package. No signup, nothing uploaded.
Setting up a new site? Pair it with the Robots.txt & Sitemap Generator, and browse the rest of our free tools. Got a tool idea? Tell us — plenty of these started as user requests.