Favicon Generator
Make the little icon for your site's browser tab: from an image, a letter, or an emoji. You get the whole set, zipped, in one click. Runs in your browser, nothing is uploaded.
How to make a favicon
- Choose Letter or emoji and type a character, or switch to From an image and drop a picture.
- Check the preview: it shows the icon at tab size (16px) and big. If it is muddy at 16px, simplify it. Small and bold beats detailed.
- Click Download icon set (.zip), unzip it into your site's root folder, and paste the tag line it gives you into your
<head>.
Everything is generated on your device. There is no upload, so your logo never touches a server. That is why the page keeps working if you lose connection after it loads.
What is in the zip
favicon.ico— the classic file, holding 16, 32 and 48px. Browsers and old Windows shortcuts look for this one at your site root.favicon-16x16.png,favicon-32x32.png,favicon-48x48.png— browser tabs and bookmarks.apple-touch-icon.png(180px) — the icon when someone adds your site to an iPhone or iPad home screen.android-chrome-192x192.pngandandroid-chrome-512x512.png— Android home screen and splash.site.webmanifest— the small file that points Android at those two icons.head.html— the ready-to-paste tags for your page head. (The Copy button gives the same thing.)
Frequently asked questions
What is a favicon?
It is the tiny icon that shows in a browser tab, in bookmarks, in history, and on a phone home screen when someone saves your site. The name comes from "favourites", the old word for bookmarks. It is small, but it is the one image of yours people see on every visit.
What size should a favicon be?
You need more than one. The safe set is a multi-size favicon.ico (16/32/48) for legacy spots, a 32px PNG for modern tabs, a 180px Apple touch icon, and 192px + 512px for Android. This tool makes all of them at once so you do not have to guess.
Is my image uploaded anywhere?
No. The resizing and every file in the zip are built in your browser with the canvas element. Open your browser's network tab and you will see no request carrying your picture. Your logo stays on your machine.
Why does my icon look blurry at 16px?
Because 16px is tiny: roughly a single letter's worth of detail. Fine text, thin lines, and soft gradients disappear. Use a bold shape, a single strong letter, or a simple mark, and keep good contrast against the background. The tab preview above is the honest test.
Can I use an emoji as a favicon?
Yes. Type one emoji into the letter box; it renders as a full-colour icon on the background you pick. Emoji look identical across platforms only in your own browser, so for a brand mark a letter or an uploaded logo is safer. Emoji are great for a personal site or a side project.
Do I need a .ico file, or is a PNG enough?
Modern browsers accept PNG through the <link> tags, and that is what those tags point to. But some old browsers and Windows shortcuts still request /favicon.ico by habit. Shipping the .ico too costs nothing and covers those cases, so the zip includes it.
Where do I put the files?
In the top-level folder of your site (the same folder as your index.html), so the paths /favicon.ico and the rest resolve. Then paste the tag line into the <head> of your pages. If your site is on WordPress, most themes have a "Site Icon" setting that wants the 512px file instead.
Does it work offline?
Once the page has loaded, yes. There is no server round-trip for the generation, so it works on a plane or with the wifi off.