Favicon from Text / Emoji
Type a letter or emoji, pick shape and colors, and download the complete modern favicon set — generated entirely on this device.
HTML head block
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Download builds ICO, PNG and manifest files from the live design.
Press ? for shortcuts
Do it offline:$ magick -background '#0B57D0' -fill white -font Helvetica -gravity center label:G -resize 512x512 icon.png
How to use it
- Type up to three characters into the icon text field — one emoji counts as one character even when assembled from several joined code points.
- Pick square, rounded or circle, then set the background and text colors. A warning chip appears when the pair falls below 3:1, the floor for a glyph that stays legible in a tab strip.
- Choose one of the six system font stacks and a weight, then drag the glyph-size slider until the tiles look balanced.
- Press Download favicon set, copy the files into your site root, and paste the printed head block into each page's <head>.
Type a letter, a short monogram, or an emoji, pick a shape, two colors and a system font stack, and the icon builds as a crisp vector, live. Download hands you the complete modern set: favicon.ico holding 16, 32 and 48 px entries, the SVG itself, Apple touch and PWA icons, site.webmanifest and the matching HTML head block, zipped. Everything renders on this device — the network panel stays silent while it works.
How it works
The pipeline is SVG-first: your choices become a small vector document — one background rect or circle plus one centered text element — and that exact markup is both the live preview and the favicon.svg in the download. Raster files exist only after you press Download, when the vector is drawn onto a canvas at each target size, so a 16 px icon is rendered at 16 px rather than shrunk from a bitmap.
favicon.ico survives in the set because address bars, pinned tabs and older integrations still request that path by name. The container is a directory table over three complete PNG payloads; browsers that prefer vectors take the SVG link instead, and the head block declares both.
The three-character cap counts what you see, not what the string stores. A family emoji or a flag is one glyph built from several code points fused by zero-width joiners or paired regional indicators, so the counter segments your input into grapheme clusters — the units Intl.Segmenter defines. 👨👩👧 spends one slot, not five.
Examples
G<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="20" fill="#0b57d0"/><text x="50" y="50" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-size="70" font-weight="600" fill="#ffffff">G</text></svg>The seeded letter icon: a white semibold G on a rounded blue tile, filling 70 percent of the edge.
🦋<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="#111827"/><text x="50" y="50" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-size="80" font-weight="400" fill="#ffffff">🦋</text></svg>The butterfly stays in the markup as text and takes its palette from the emoji font — the engine flags the white text color as having no effect here.
IT<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="#fef3c7"/><text x="50" y="50" text-anchor="middle" dominant-baseline="central" font-family="Georgia, 'Times New Roman', Times, serif" font-size="55" font-weight="800" fill="#92400e">IT</text></svg>An extra-bold serif monogram on a warm square — glyph size 0.55 lets both letters fit without touching the edges.
Every example on this page is executed against the same engine that powers the tool, on every build.
Gotchas worth knowing
Emoji and font stacks resolve on each device
Nothing is downloaded to draw your icon — the SVG names font families and each machine supplies its own: Apple Color Emoji on macOS and iOS, Segoe UI Emoji on Windows, Noto Color Emoji on Android. The PNG and ICO files freeze how this device drew the glyph; favicon.svg re-resolves on every viewer's system.
Tabs are dark half the time
The 3:1 warning compares glyph against background, but the tile sits on browser chrome you do not control: a near-black fill melts into a dark tab strip just as white does into a light one. The paired tab mocks let you judge both before shipping.
The maskable icon pads your glyph into the safe zone
Launchers cut installed icons into circles, squircles and teardrops; the Web App Manifest spec promises survival only inside a centered circle whose radius is 40 percent of the edge. icon-maskable-512.png draws your design into the central 80 percent of the canvas over the background color — that box's inscribed circle is the safe zone. Square artwork corners can still cross it; previewing the actual crop is a job for a dedicated maskable-icon checker.
Why the cap stops at three characters
A favicon spends most of its life 16 pixels wide. Three characters leave roughly five pixels per glyph — the legibility floor — and anything longer becomes texture. One strong letter or emoji beats a squeezed word; a monogram is the middle ground.
Common errors
Icon text is 4 characters long — this tool draws at most 3, counting a joined emoji as one.- The refusal prints the cap and your actual count, measured in grapheme clusters after trimming outer spaces — shorten the text and it renders.
Background is not a valid color — use hex (3/4/6/8 digits), rgb(), hsl(), oklch(), or a CSS color name.- The color fields accept the listed grammars; a five-digit hex — usually a truncated paste — matches none. Fix the text or use the swatch picker beside it, which only emits valid opaque hex.
FAQ
Is anything uploaded while I build a favicon here?
No. The SVG is assembled in this page, the PNG, ICO and zip bytes come from canvases on this device, and the download is a local Blob. Verify it: with the DevTools Network panel open, typing, previewing and downloading add zero requests.
Can I use any emoji as the icon?
Any emoji your device can draw, including joined family or flag sequences — each counts as one character against the cap of three. A glyph this machine's emoji font lacks previews as a placeholder box, and the files ship that way too.
What exactly is inside the download?
Eight files: favicon.ico with 16, 32 and 48 px entries, favicon.svg, the 180 px apple-touch-icon.png, icon-192.png, icon-512.png, the safe-zone icon-maskable-512.png, site.webmanifest wiring the PWA entries, and a README that repeats the install steps with the head block.
Why did my emoji ignore the text color I picked?
Color emoji glyphs carry their own palette inside the font, so the SVG fill has no effect on them — a note says so whenever the text is emoji-only. To control the color, use a letter or symbol instead.