Favicon from text

1. 1Type one to three letters, for example your initials.
2. 2Pick a typeface, the colors and a shape. Watch the live preview.
3. 3Download the ZIP, or copy the HTML snippet.

Make a favicon from text without a logo

A new blog or small project often has no logo. A letter on a colored background is a quick way to have an icon that people can find among their tabs. This page draws it for you in a few taps.

You can use one to three characters. Choose a typeface (Brush, Mincho or Gothic), a background color, a letter color and a shape: square, rounded or circle. The padding control sets how much space surrounds the letters.

Letters that stay readable at 16 pixels

A browser tab shows the icon very small. One letter is the clearest choice. Two short letters can still work. Three letters are better kept for large home screen icons.

Use strong contrast between the text and the background. Dark text on a light color, or white text on a deep color, is easy to see. Look at the small previews below the large one, because those show the real sizes.

• Pick one clear letter for the tab icon.
• If the letters look thin, try another typeface.
• Use less padding to make the letter larger.

Which files you get, and why there is no SVG

The ZIP has favicon.ico and PNG icons for browser tabs, Apple and Android home screens, plus a site.webmanifest file. Text icons do not include an SVG file. The typefaces are loaded by this page and would not exist on your own site, so an SVG could show a different font.

The PNG and ICO files keep the exact look you see in the preview. The HTML snippet links to all of them, so you do not need to choose. If you want to place the files on your site, read how to do it on the Favicon Generator page.

Tips

• Match the background color to your site header, so the tab and the page look like one brand.
• The icon is drawn in your browser, so your text and files never leave your device.

Frequently asked questions