⭐ Favicon Generator
Make a favicon from an image, letters or an emoji. A genuine multi-image .ico, the small modern icon set, and four lines of HTML instead of eighteen.
Choose a square image, or drop it here
Built in this tab. Nothing is uploaded.
What Favicon Generator Does
A favicon is one of the few places on the web where you are still designing for a 16-pixel canvas. Two hundred and fifty-six pixels in total, which is why an icon that reads beautifully at 512 can be an unrecognisable smudge in a browser tab. Every preview here is rendered at its own size rather than scaled down from a large one, because rasterizing a glyph at 16 pixels and shrinking a 512-pixel image to 16 pixels produce visibly different results.
The second thing this page exists to fix is the size of the answer. Ask most generators for a favicon and you receive a folder of thirty or forty files — an Apple touch icon at a dozen sizes, Microsoft tile images, a browserconfig.xml — plus a block of markup to paste. Almost none of that is needed now. iOS has taken the largest apple-touch-icon and scaled it for years, and the Microsoft tiles are for a discontinued product. Four files and four lines of HTML do the job.
The third is the .ico itself. ICO is a container format holding several images at different sizes, and the whole point of it is that the browser and the operating system each take the one they want. A significant number of tools emit a single 32-pixel PNG with the extension changed, which works in a tab and looks wrong as a desktop shortcut. This writes a real container with 16, 32 and 48 pixel images inside it.
How to Use Favicon Generator
- Choose an image, or switch to text and type a letter or emoji
- Set the background, corner rounding and padding
- Preview at every size and check the 16-pixel version — that is the one people see
- Download the package and paste the four lines of HTML into your head
What you actually need in 2026
Four files. Everything else in a typical generator package is for a platform that no longer requires it.
| File | What it is for |
|---|---|
| favicon.ico | Browser tabs, bookmarks, desktop shortcuts. A real container with 16, 32 and 48 inside. |
| favicon-96x96.png | The modern PNG favicon; one generous size covers every browser use. |
| apple-touch-icon.png (180) | iOS home screen. 180 is the largest iOS asks for and it scales down for the rest. |
| web-app-manifest-192 / 512 | Android home screen, PWA install and splash, referenced from the manifest. |
What you can safely delete from an older package
| Item | Why it is obsolete |
|---|---|
| apple-touch-icon at 57, 60, 72, 76, 114, 120, 144, 152 | iOS scales the 180 down; the separate sizes stopped being required years ago |
| mstile-*.png and browserconfig.xml | Windows tiles, for a discontinued Microsoft feature |
| A <meta> tag per icon | Four <link> tags cover browsers, iOS and the manifest |
| favicon-16x16.png and favicon-32x32.png as separate files | Those sizes live inside favicon.ico already |
How to Read Your Result
Judge it at 16 pixels
That is the size people see. Fine detail, thin strokes and more than two or three letters all disappear there. If the 16-pixel preview is not recognizable, simplify the artwork rather than adjusting the export — no amount of rendering care rescues a design that needs more pixels than a tab provides.
Padding is usually a mistake
The icon is already tiny, and browsers do not add their own margin. Padding above about 10% throws away pixels you cannot spare. Use it only when the artwork has a strong shape that would otherwise touch a rounded corner.
An SVG favicon is worth adding if you have one
Modern browsers prefer it and it stays sharp at any size, including on high-density displays and in dark mode with a media query inside the file. The generated HTML includes the line; delete it if you have no SVG rather than pointing at a file that does not exist.
Limitations & Accuracy Notes
- The .ico contains 16, 32 and 48 pixel images. Larger sizes inside an .ico are legal but rarely useful, since the PNG files cover modern uses.
- It does not generate an SVG favicon — the HTML references one so you can add your own, and the line should be removed if you do not.
- Text icons render with fonts available on your device. A face your visitors lack does not matter, since the output is a bitmap, but it does mean the preview is what you get.
- No dark-mode variant. That requires an SVG with a prefers-color-scheme media query inside it, which has to be authored by hand.
- The manifest is a starting point with a placeholder name — edit it before shipping.
Frequently Asked Questions
Do I really need forty icon files?
Is this a real .ico file?
Why does each size get rendered separately?
Can I make a favicon from a letter or an emoji?
What about an SVG favicon?
Is my image uploaded?
References & Further Reading
- MDN — Adding custom icons to your site — The link relations used, and why the modern set is small
- MDN — Web app manifest: icons — What the 192 and 512 icons are for, and the maskable purpose