How to Create a Favicon for Your Website (Full Pack, Free)
MumenLabs
To create a favicon for your website, upload one square image (at least 512×512px) to a browser-based favicon generator, choose a transparent or solid background, and download the full pack. With the MumenLabs Favicon Generator, that pack includes every size browsers expect, a real multi-size favicon.ico, and a site.webmanifest — generated locally, with no sign-up.
Last updated: July 2026
Most people picture a favicon as a single tiny icon. In 2026 it's actually a small set of files, because browsers, iOS, Android, and PWA installs each ask for a different size and format. Skip one, and your site shows a broken icon on that platform. Below is the exact process, the sizes you need, and the reasons a favicon sometimes refuses to update after you've done everything right.
How to create a favicon for your website, step by step
Here's the full process, start to finish. It takes about a minute with a source image ready.
- Start with a square source image. A PNG, JPG, WebP, or SVG at 512×512px or larger works best — the largest icon in the pack is generated from it, so a bigger source stays sharp at every size.
- Upload it to a browser-based generator. Open the MumenLabs Favicon Generator and drop your image in. It's processed with the Canvas API on your own device — nothing is sent to a server.
- Choose a transparent or solid background. Transparent PNGs look cleanest in browser tabs; a solid background is safer for the Apple touch icon (see why below).
- Name your site for the manifest. Enter the site or app name that should appear when someone adds the page to their phone's home screen.
- Download the pack. You'll get a ZIP containing every PNG size, a genuine multi-size
favicon.ico,site.webmanifest, and an HTML snippet — or you can grab any single file on its own. - Upload the files and paste the snippet. Copy the files into the folder your site serves at its root (so
/favicon.icoresolves), then paste the provided<link>tags into your page's<head>.
That's the whole job. No design software, no command-line ICO packer, and no guessing which sizes you're missing.
What favicon sizes do you actually need in 2026?
A single favicon.ico used to be enough. Today, a favicon that actually covers browsers, iOS, and Android means shipping this set:
favicon.ico— a real ICO container embedding 16, 32, and 48px icons, for legacy browsers, Windows, and feed readers.favicon-16x16.pngandfavicon-32x32.png— what modern Chrome, Firefox, and Edge display in the browser tab.apple-touch-icon.pngat 180×180px — the icon iOS uses when someone adds your site to their home screen.android-chrome-192x192.pngandandroid-chrome-512x512.png— referenced by the web manifest for Android and PWA installs.site.webmanifest— ties the Android icons to your site name and theme colour.
Generating each of these by hand in an image editor is realistically 20-30 minutes of resizing and exporting. A generator that builds all six from one upload turns that into a single pass.
Why doesn't my favicon show up after I upload it?
Almost always, it's caching, not a broken file. Browsers cache favicons aggressively — often for a week or more — so a freshly uploaded icon can keep showing the old (or blank) one until that cache clears. Before assuming something's wrong:
- Hard-refresh the page (or open it in a private/incognito window, which skips the cache entirely).
- Confirm the file actually resolves by visiting
yoursite.com/favicon.icodirectly in a new tab. - Check the path in your
<link>tags matches where you actually uploaded the files — a favicon referenced from the wrong folder will silently fail. - Give it a day. Some CDNs and browsers cache favicons independently of the rest of the page, so a stubborn icon sometimes just needs time to expire.
If /favicon.ico loads correctly in a new tab but the tab icon still looks wrong, it's the cache — not your setup.
What image should you use for a favicon?
Favicons are viewed at tiny sizes, so the source image matters more than its resolution:
- Go square, at least 512×512px, so the largest generated icon (the 512px Android one) stays sharp.
- Keep the mark bold and simple. A detailed logo with fine text or thin lines turns to mush at 16×16px — a favicon needs to read as a shape, not as text.
- PNG or SVG with transparency gives the most flexibility, since you can always add a solid background afterward if a platform needs one.
If your only source is a logo file that needs resizing or format-converting first, an image compressor handles that in the same private, in-browser way.
Transparent or solid background — which should you pick?
Transparent favicons look clean in a browser tab against light or dark themes. But two files in the pack often don't handle transparency well: the Apple touch icon and the .ico file frequently render a transparent background as solid black on iOS and some other platforms. If your source image is transparent, it's worth generating a version with a solid background specifically for those two files — most generators, including the one above, let you toggle this per-download so you can compare before you commit.
A favicon.ico that's actually a favicon.ico
A common shortcut some tools take is exporting a PNG and simply renaming it to .ico. That renders fine in some modern browsers, but it isn't a valid ICO file — and it breaks in exactly the places .ico still matters, like older browsers, Windows Explorer, and some RSS readers. A real ICO is a binary container with a directory entry per embedded size (commonly 16, 32, and 48px in one file) — a different format from a PNG with a different extension, not just a rename. If your favicon looks fine in Chrome but blank or blurry in Windows Explorer, that's usually the tell.
Building a favicon vs. a typical online generator
| A browser-based favicon pack | A typical online favicon generator | |
|---|---|---|
| Where it processes | Locally, in your browser | Uploaded to their server |
Real multi-size .ico |
Yes | Often just a renamed PNG |
site.webmanifest included |
Yes | Sometimes an extra step or paid tier |
| Sign-up required | No | Often, to unlock the full pack |
| Works offline once loaded | Yes | No |
| Cost | Free | Varies — free tier plus upsells is common |
The gap that matters most for anyone handling client work or an unreleased brand mark is the first row: local processing means the logo you upload never leaves your machine.
Who needs a complete favicon pack?
Anyone shipping a website or app benefits from doing this properly once instead of patching it later:
- Developers who just want the files and the HTML snippet, without hand-resizing six PNGs.
- Designers turning a finished brand mark into the platform-specific icon set it needs.
- Agencies and freelancers working with client logos they'd rather not upload to a third-party server.
- Indie and side-project builders who want a real favicon in a minute rather than an afternoon.
Frequently asked questions
How do I make a favicon for free?
Upload a square source image to a browser-based favicon generator, pick a background, and download the pack. The MumenLabs Favicon Generator does this with no watermark, no cap on how many packs you generate, and no sign-up required — the processing happens on your device, not a server.
What size should a favicon be?
There isn't one size — a complete pack covers several: 16×16 and 32×32px PNGs for browser tabs, 180×180px for the Apple touch icon, 192×192px and 512×512px for Android and PWA installs, plus a multi-size favicon.ico embedding 16, 32, and 48px. Generating from a 512×512px (or larger) square source covers all of them from one file.
Why is my favicon blurry or missing on my phone's home screen?
It's usually a missing apple-touch-icon.png (180×180px) for iOS, or a missing android-chrome-192x192.png/site.webmanifest reference for Android — the plain favicon.ico isn't used for home-screen icons on either platform. Adding the full set, not just favicon.ico, fixes this.
Do I need to upload my logo to a server to make a favicon?
No — not with a browser-based generator. Tools that use the Canvas API process the image locally, so the file never leaves your device. You can confirm this yourself: disconnect from the internet after the page loads and generate anyway — it still works, because nothing needs to be sent anywhere.
Ready to build your favicon pack?
You now know exactly what a modern favicon requires and how to generate the whole set in one pass. Build your complete favicon pack for free — every size, a real favicon.ico, a manifest, and the HTML snippet, generated privately in your browser with no sign-up.
More browser-based dev utilities are on the way on MumenLabs, including a free word counter for writers checking length against a limit, a JSON formatter for cleaning up messy API responses, and a case converter for quickly reformatting text between cases.
Keep reading
Get all your tools in one free account
You came here to get something done — now keep the whole toolbox handy. QR codes, a link-in-bio page, PDF and image tools, all on one wallet. Pay only for what you use.
Free account · takes a few seconds · no subscriptions
Back to blog