About the Favicon Generator from Text
This favicon generator creates a site icon from text — a single letter, two or three initials, or an emoji — on a colored square, rounded square or circle. Choose the background and text colors, the font style and size, and the tool draws a live preview at real favicon sizes. You can then download a multi-size favicon.ico (16, 32 and 48 px), PNG files for Apple touch icons and Android/PWA manifests (180, 192 and 512 px), and a crisp scalable SVG icon.
It is ideal for new projects, side projects, documentation sites and internal tools that need a recognisable tab icon right now, without opening a design app. The tool also writes the HTML <link> tags and web app manifest entry for you, following the modern minimal favicon set that covers every current browser and device.
Everything is generated in your browser — nothing is uploaded. Text is rendered with common system fonts so the SVG looks the same everywhere; emoji are drawn with your operating system’s emoji font, so their exact look in the PNG files depends on the device you create them on.
How to use the favicon generator from text
- 1Type a letter, initials or paste an emoji.
- 2Pick background and text colors, a shape and a font style.
- 3Check the live previews at 16, 32 and 180 px.
- 4Download favicon.ico, the PNG sizes and icon.svg.
- 5Upload the files to your site root and paste the HTML tags into <head>.
Formula and method
The icon is drawn as an SVG on a 100 × 100 unit canvas: a full-size rectangle (with 20-unit corner radius for the rounded style) or a circle of radius 50, then the text centred both horizontally and vertically. The font size depends on how many characters you enter — 70 units for one, 52 for two and 38 for three — multiplied by your size setting, so initials still fit inside the shape. Characters are counted as user-perceived graphemes, so a flag or skin-tone emoji counts as one.
PNG and ICO files are produced by rendering that SVG onto a canvas at each pixel size. The .ico file packs 16, 32 and 48 px PNG images into one icon directory, a format supported by every current browser. Contrast is the WCAG 2 ratio between the text and background colors.
- n
- Number of characters (graphemes), 1–3
- scale
- Text size setting ÷ 100
Worked examples
Blue rounded "M" icon
One character gets the full 70-unit font size on a 100-unit canvas. White on #2563EB has a 5.17:1 contrast ratio, so the letter stays readable even at 16 × 16 px.
Two-letter initials in a circle at 90% size
Two characters use a base size of 52 units; at 90% that is 52 × 0.9 = 46.8. Yellow #FACC15 on near-black #111827 gives a strong 11.58:1 contrast.
Emoji favicon with no background
With the transparent option there is no background shape, just the emoji at 70 units. Emoji ignore the text color, so the rocket is drawn in full color by the system emoji font.
Frequently asked questions
What favicon sizes do I need?+
A modern minimal set is a 32 px favicon.ico (this tool packs 16, 32 and 48 px), an SVG icon for current browsers, a 180 × 180 px apple-touch-icon.png for iOS, and 192 and 512 px PNGs listed in a web app manifest for Android and PWAs.
Can I use an emoji as a favicon?+
Yes. Paste an emoji as the text and choose no background or a colored shape. The SVG version uses the visitor’s own emoji font, while the PNG and ICO files capture the emoji as it looks on the device where you generate them.
Where do I put the favicon files?+
Upload them to the root of your website (the same folder as your home page) and add the generated <link> tags inside <head>. Many frameworks such as Next.js also pick up favicon.ico and icon files placed in their app or public folder automatically.
Why is my new favicon not showing?+
Browsers cache favicons aggressively. Hard-refresh the page, open it in a private window, or add a version query such as /favicon.ico?v=2 to the link tag to force browsers to fetch the new icon.
Does an SVG favicon work in every browser?+
Chrome, Edge, Firefox and Opera support SVG favicons, but Safari support has historically been limited. That is why the generated tags list favicon.ico (with sizes="32x32") as a fallback alongside icon.svg — each browser picks the format it supports.