Favicon generator
Turn 1–4 characters, an emoji or an uploaded image into 16/32/48/64/128/180/192/512 PNG favicons with rounded corners, solid or transparent background, plus ready-to-paste <link rel="icon"> markup.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
An uploaded image replaces the text above and is used for every size.
Size previews
Sizes and weight
16×16—32×32—48×48—64×64—128×128—180×180—192×192—512×512—How to use
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"> <link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png"> <link rel="icon" type="image/png" sizes="128x128" href="/favicon-128x128.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
This tool outputs a PNG sequence and does not pack a real .ico binary (modern browsers widely support <link rel="icon" type="image/png">).
What this tool does
- Generate a full favicon set — 16/32/48/64/128/180/192/512 PNG — from one or two characters or a single emoji when you have no designer.
- Bootstrap a new project: copy the ready-made <link rel="icon"> markup into your <head> instead of hand-writing every tag.
- Skip .ico packing for a side project or an internal tool — modern browsers happily use PNG favicons, and the 180×180 file doubles as the iOS home-screen icon.
- Compare corner radii, padding and theme colours to find the version that stays legible in a browser tab, where small sizes blur out.
Example
Input
Text "U", theme colour #6366f1, 22% corner radius, 8% padding, solid background
Output
16×16: font 10px, radius 4px, padding 1px, foreground #ffffff 32×32: font 19px, radius 7px, padding 3px 48×48: font 29px, radius 11px, padding 4px 512×512: font 310px, radius 113px, padding 41px
The output is a PNG sequence, not a packed .ico; files are named like favicon-32x32.png, and the 180 size becomes an apple-touch-icon in the <link> snippet.
Frequently asked questions
Why PNG only, and no .ico?
Modern browsers all accept <link rel="icon" type="image/png">, and PNG keeps transparency and any size you like, which looks sharper than a single .ico. Only if you must support IE11-era clients do you need another tool to combine the 16 and 32 PNGs into an .ico.
How is the foreground colour chosen — can I set it myself?
It is derived from the relative luminance of the theme colour: light backgrounds get #111827, dark backgrounds get #ffffff, so contrast is always sufficient. It follows the theme colour rather than being a separate setting.
The text is unreadable at small sizes — what can I do?
16×16 has room for a single glyph; squeezing 2–4 characters in will always smear. Use one letter or emoji for the small sizes, keep the radius under 30% and padding under 10%, and reserve multi-character marks for the 180+ sizes.
Can I upload my own image?
Yes. An uploaded image replaces the text and is scaled into all eight sizes. The scaling happens through Canvas inside your browser, so the image is never uploaded anywhere.
How many characters can I type?
Up to four user-perceived characters — emoji, skin-tone modifiers, flag pairs and combining marks each count as one. Empty input or more than four characters is reported immediately instead of producing a broken icon.
Keywords：favicon generatorfavicon图标生成icopng faviconemoji faviconapple touch icon网站图标