Text Favicon Generator
Make a favicon from a letter or initials — choose the font, colours and shape, and take away the whole set with the markup to paste. No image needed.
Contrast 17.9 to 1 — this will stay legible down to 16 pixels.
In a tab
What you get
- favicon.ico16, 32, 48 px
- favicon-16x16.png16 px
- favicon-32x32.png32 px
- apple-touch-icon.png180 px
- android-chrome-192x192.png192 px
- android-chrome-512x512.png512 px
- maskable-icon-512x512.png512 px
- safari-pinned-tab.svgsvg
- site.webmanifestjson
After a launcher cuts it
Everything important sits inside the circle the specification guarantees will survive.
A monochrome SVG for the Safari pinned tab is included.
Paste into <head>
<link rel="icon" href="/favicon.ico" sizes="32x32">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0f172a">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0f172a">Most sites that need a favicon do not have a logo yet. They have a name, a colour and a deadline, and the usual answer is to open a design tool to draw one square with one letter in it. This does that part: type a letter or two, choose the colours, and take away the whole set. The one thing worth getting right is contrast — at 16 pixels a pale letter on a mid-tone background stops being a letter and becomes a smudge, so the ratio is measured here and told to you before you download anything.
How it is calculated
contrast = (lighter + 0.05) / (darker + 0.05)
The ratio compares the relative luminance of the two colours, so it has no direction — swapping the letter and the background gives the same number. Below 4.5 the pair is flagged, which is the same threshold WCAG uses for body text, and it is a reasonable floor for a glyph drawn at sixteen pixels.
Source: W3C WCAG 2.2 — contrast ratio, defined as (L1 + 0.05) / (L2 + 0.05) over relative luminance
Questions people ask
- How many letters should I use?
- One if you can live with it, two at a push. Three fit only because the tool shrinks them, and at 16 pixels three characters are around five pixels wide each. Initials work when they are the initials people already use for you.
- Which font is safest?
- A grotesque like Inter, at a heavy weight. Thin strokes are the first thing to disappear when an image is scaled down, which is why the serif option looks best on the large sizes and worst on the small ones. The preview shows both, so compare before deciding.
- Why does the circle shape crop my letter?
- It does not crop it, it clips the background to a circle, and a letter that reached the corners of the square now touches the edge. Add padding until it sits comfortably inside.
- Can I use the same colours as my site?
- Usually yes, but check the ratio the tool reports. Brand colours are chosen against large areas of white, and a pair that reads well on a landing page can fail completely inside a sixteen pixel square.
- Do I get the same files as the image version?
- Exactly the same: the ICO, the tab PNGs, the apple-touch-icon, the two android icons, the manifest and the markup. Only the way the picture is made differs.
Related tools
Favicon Generator
Turn one image into the whole favicon set — ICO, PNGs, web manifest and the markup to paste. Crop and position the image first, and nothing leaves your browser.
Emoji Favicon Generator
Pick an emoji and take away a complete favicon set — ICO, PNGs, manifest and markup. Browse the symbols instead of hunting for the keyboard shortcut.
Found a problem, or want more?
A number that disagrees with its source is a defect, not a rounding preference.
What did you enter, what did the tool show, and what did you expect instead? If you have a source that disagrees with ours, a link to it is the most useful thing you can send.
Opens your mail app with the page and tool already filled in.