Favicon Generator
Make a complete favicon set — ICO and PNG, every size a browser or phone needs — from text, an emoji, or an image.
A favicon is the small icon browsers show in tabs, bookmarks, and history — and beyond the classic 16px tab icon, phones and app launchers now expect their own larger sizes for home-screen shortcuts and installed web apps. This tool generates that entire set from a single source — bold text, an emoji, or an uploaded image — rendering each size on an HTML canvas right in your browser, packing the smaller sizes into a real favicon.ico, and writing the site.webmanifest and <head> markup you need to wire it all up. Nothing you type or upload leaves your device.
Worked examples
Indie hacker shipping an MVP overnight
A solo developer launching a weekend project needs a favicon before the domain even has a logo, so they generate one straight from the app's initial.
- Source
- Text "N", circle background
- Colors
- Indigo background, white letter
- Font
- System UI, 60% size
≈ 8 files generated: favicon.ico, six PNGs, and site.webmanifest
Blog migrating an existing logo
A blogger already has a rectangular logo file and wants a matching favicon set without opening an image editor to crop it themselves.
- Source
- Uploaded logo.png (1200×800)
- Crop
- Centered square, 800×800
- Output
- Same 8-file set, auto-scaled
Ready to drop into /public and paste the <head> snippet
How it works
Whichever source you pick, the same pipeline runs for every output size: an offscreen canvas is created at that exact pixel dimension, the icon is drawn onto it at full resolution (not scaled up from a smaller render), and the canvas is exported to PNG bytes with canvas.toDataURL(). The 16, 32, and 48px PNGs are then packed directly into a single favicon.ico by writing a small ICONDIR header and an ICONDIRENTRY per image — modern ICO files can embed PNG data as-is, so no legacy bitmap conversion is needed. The "Download all" button writes every file into an uncompressed ZIP archive (the PNGs are already compressed, so no further compression is applied) built the same way: by hand, with a small JavaScript ZIP writer, entirely in your browser.
| Size | File | Used for |
|---|---|---|
| 16×16 | favicon-16x16.png | Browser tab and bookmark bar |
| 32×32 | favicon-32x32.png | Taskbar pin, high-density tabs |
| 48×48 | favicon-48x48.png | Windows desktop shortcut |
| 180×180 | apple-touch-icon.png | iOS "Add to Home Screen" |
| 192×192 | android-chrome-192x192.png | Android home screen / PWA manifest |
| 512×512 | android-chrome-512x512.png | PWA install splash screen |
Frequently asked questions
Why do I need six different PNG sizes instead of just one image?
Every place a favicon shows up expects a different pixel size: a browser tab renders it at 16×16, Windows pins and taskbar icons want 32×32 or 48×48, iOS home screens use a 180×180 apple-touch-icon, and Android/Chrome install prompts pull 192×192 and 512×512 from the web manifest. Scaling one small image up for the larger sizes makes it blurry, and scaling a large image down without care can lose fine detail — generating each size from scratch keeps every one sharp.
What's the difference between favicon.ico and the PNG files?
.ico is a container format that can hold several image sizes in one file, and it is still what some older browsers and Windows shortcuts look for by default. This tool packs the 16, 32, and 48px renders into that single favicon.ico, while also giving you plain PNG files for the modern <link rel="icon" type="image/png"> tags every current browser prefers. Shipping both covers the widest range of browsers and operating systems with no extra work on your part.
Do I actually need the site.webmanifest file?
The manifest is what lets mobile browsers offer “Add to Home Screen” and tells them which icon and colors to use once installed — it's required for that flow on Android/Chrome and recommended for any modern site. If your project has no PWA ambitions at all you can skip linking it, but including it is harmless and future-proofs the site for free.
Why does my uploaded image look cropped strangely?
Favicons are always square, so a non-square upload is automatically cropped to a centered square before it's resized — the crop keeps the middle of the image and trims the longer side evenly from both ends. If your subject isn't centered in the original photo or logo file, crop it to a square yourself in an image editor first and upload that version instead.
Will an emoji favicon look the same in every visitor’s browser?
It will, because the emoji is drawn onto a canvas using your device's emoji font at generation time and then exported as a fixed PNG image — what visitors see is that baked-in picture, not a live emoji character their own device has to render. That's actually more consistent than using the raw emoji character in HTML, which can look different across operating systems.
Where do these generated files actually go on my website?
Upload favicon.ico, the PNG files, and site.webmanifest to the root of your site (in most static site generators and frameworks that’s the "public" folder, which gets published as-is), then paste the generated <head> snippet into every page’s <head> — or once into a shared layout/template if your site has one.