Favicon Generator
🔒 Runs in your browser — files are never uploaded
One image in, the whole favicon set out — every size modern browsers and phones ask for, a real multi-size .ico, and the HTML to paste.
How it works
- Select a square image — a logo or mark works best. 512 px or larger gives the cleanest results.
- Pick a background and optional padding. Transparency is kept if your source is a PNG.
- Click Generate. You get a ZIP with every size, favicon.ico, a web manifest and a HOW-TO-USE file.
What's in the ZIP
| File | What it's for |
|---|---|
| favicon.ico | A real multi-size icon containing 16, 32 and 48 px. Still the most widely supported, and what browsers look for by default. |
| favicon-16x16.png favicon-32x32.png | Browser tabs and bookmarks on standard and retina displays. |
| apple-touch-icon.png | 180 px. Used when someone adds your site to an iPhone or iPad home screen. |
| android-chrome-192 / 512 | Android home screens and installable web apps. |
| site.webmanifest | Tells the browser which icons to use when your site is installed as an app. |
| HOW-TO-USE.txt | The HTML snippet to paste into your <head>. |
Designing something that works at 16 pixels
This is the part people get wrong. A favicon is often displayed at 16 × 16 — smaller than a full stop on this page. Your full logo, with its wordmark and tagline, becomes an unreadable smudge.
- Use a mark, not a logo. One letter, one symbol, one shape.
- Drop the text. Anything beyond a single character is illegible at tab size.
- Push the contrast. Subtle gradients and thin strokes disappear. Bold and simple survives.
- Check it on dark. Browsers in dark mode put your icon on a dark tab strip. A black mark on transparency vanishes — the preview above shows you before you commit.
- Start square. A rectangular source gets letterboxed. Crop it square first if needed.
The .ico matters more than people think. Browsers request
/favicon.ico from your site root whether or not you link to it, and a real .ico contains several sizes so the browser picks the sharpest. A PNG renamed to .ico is not the same file and can fail.
Installing it
Put every file from the ZIP in your site's root folder — the same place as your homepage — then paste the snippet from HOW-TO-USE.txt into the <head> of your pages. If the icon does not change immediately, that is browser caching rather than a mistake: favicons are cached aggressively. A hard refresh, or opening the site in a private window, shows the truth.
Frequently asked questions
What size should a favicon be?
There is no single size — browsers and devices want several. This generates 16, 32, 48, 64, 96, 128, 180, 192, 256 and 512 px, plus a multi-size .ico, so every case is covered.
Do I still need a favicon.ico?
Yes. Browsers request /favicon.ico from your site root whether or not you link to it, and a real .ico holds several sizes so the sharpest is chosen. The one generated here is a genuine multi-size icon, not a renamed PNG.
What image should I use?
A square mark rather than a full logo, at 512 px or larger. Wordmarks and taglines are unreadable at 16 px, which is where a favicon spends most of its life.
Where do the files go?
All of them in your website's root folder, next to your homepage. Then paste the HTML snippet from the included HOW-TO-USE.txt into your pages' head section.
I installed it but the old icon is still showing.
Favicons are cached aggressively by browsers. Do a hard refresh, or open the site in a private window to see the real state.
Does it keep transparency?
Yes, if your source is a PNG with transparency and you leave the background set to Keep transparency. Check the preview against a dark background first — a dark mark on transparency disappears in dark mode.
Is anything uploaded?
No. Every one of these runs in JavaScript in your browser — nothing is sent to a server. Load the page, disconnect from the internet, and it still works.