Letters · SVG paths · ICO
Text favicon generator
One to three letters on a coloured tile, in a font that suits your brand. The letters are converted to vector outlines, so favicon.svg looks the same everywhere without loading a web font.
1Letters
2Preview
Light tabs1× · 2×
Dark tabs1× · 2×
Real pixelszoomed
Download
-
favicon.svg
-
favicon.ico
-
apple-touch-icon.png
-
icon-192.png
-
icon-512.png
Paste into <head>
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">favicon.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><defs><clipPath id="fp-box"><rect x="0" y="0" width="64" height="64"/></clipPath><clipPath id="fp-shape"><rect width="64" height="64" rx="14.08"/></clipPath></defs><rect width="64" height="64" rx="14.08" fill="#ec4a2b"/><g clip-path="url(#fp-shape)"><g clip-path="url(#fp-box)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" x="0" y="0" width="64" height="64"><path fill="#ffffff" d="M140 666.56L140 203.548L454.786 203.548L454.786 293.043L249.694 293.043L249.694 410.505L434.588 410.505L434.588 498.136L249.694 498.136L249.694 666.56L140 666.56ZM512.274 796.452L512.274 319.145L619.482 319.145L619.482 378.809L623.211 378.809Q629.737 362.961 642.322 348.356Q654.907 333.751 674.329 324.273Q693.751 314.795 721.407 314.795Q758.075 314.795 789.616 333.906Q821.157 353.017 840.578 392.637Q860 432.257 860 493.164Q860 552.205 841.355 591.826Q822.71 631.446 791.014 651.489Q759.318 671.532 720.785 671.532Q694.372 671.532 674.95 662.676Q655.529 653.82 642.788 639.836Q630.047 625.852 623.211 610.315L620.725 610.315L620.725 796.452L512.274 796.452ZM683.807 587.009Q704.627 587.009 719.076 575.356Q733.526 563.703 740.984 542.417Q748.442 521.131 748.442 493.164Q748.442 464.886 740.984 443.91Q733.526 422.935 719.232 411.282Q704.937 399.629 683.807 399.629Q662.987 399.629 648.382 410.971Q633.776 422.313 626.008 443.289Q618.239 464.264 618.239 493.164Q618.239 521.442 626.008 542.572Q633.776 563.703 648.537 575.356Q663.297 587.009 683.807 587.009Z"/></svg></g></g></svg>How it works
Type up to three letters, pick a font and colours, and the preview shows the icon at real tab sizes. Every bundled font is under the SIL Open Font License, which allows using its letters in a logo or icon. You can also load your own TrueType or WOFF font; it is read in your browser and never uploaded.
- Letter size sets how much of the tile the letters fill along their longer side.
- Letter spacing tightens or opens up two- and three-letter icons; nudge fixes letters that look high or low, such as those with descenders.
- Dark mode adds a media query to favicon.svg so browsers in dark mode swap to your second pair of colours.
At 16 pixels, one bold letter reads far better than three thin ones, so check the zoomed pixel view before you download.
Questions
Why convert the letters to paths?
A favicon SVG is shown as an image, and images cannot load web fonts. With text left as text, each visitor would see their own default font. Outlines look identical everywhere and keep the file small.
Which font files can I use?
TTF files and WOFF 1 files with TrueType outlines. WOFF2 and PostScript-flavoured OTF fonts are not supported; most font sites also offer a TTF download.
Do the files include the font?
No. Only the outlines of your letters end up in the SVG, ICO and PNG files, so nothing else from the font is embedded or redistributed.