Favicon Generator / Generate from Text

Quickly generate your favicon from text by selecting the text, fonts, and colors. Download your favicon in the most up to date formats.


Installation

First, use the download button to download the files listed below. Place the files in the root directory of your website.

  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • apple-touch-icon.png
  • favicon-16x16.png
  • favicon-32x32.png
  • favicon.ico
  • site.webmanifest

Next, copy the following link tags and paste them into the head of your HTML.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">


Why favicon.io?

Whether you want to generate a favicon from text, from an existing image, or from an emoji we've got you covered. The favicon generator is completely free and extremely easy to use. The generated favicon will work for all browsers and multiple platforms.

Getting started with the favicon generator

The tool above will allow you to generate a favicon from text. Start by choosing one to two letters for the favicon generator. Since the favicon generator outputs very small images it's important to use few characters for maximum legibility. Once cool feature with this favicon generator is that you can copy and paste both unicode characters and emojis into the text box. This is useful for when an emoji isn't listed on the emoji favicon page. Here's an example keeping it 💯

Making the background simple

Next, select the shape of the background. There are three simple shapes available: square, circle, and rounded. These are the most common shapes used to generate a favicon. You can see examples of these shapes with ProductHunt, IndieHackers, and HackerNews.

Selecting the font for your favicon

The favicon generator uses Google Fonts which has 800+ fonts available. This is useful to match the font used on your own website. In the future there will be a dedicated font page to help you select your font. It will have filters for languages, styles, and commonly used fonts. You can edit the font size once you've selected your font. Try to take up as much space as possible.

Tailoring the colors

The last step is to select the colors. If you have the HEX values of the colors you want then you can just enter them into the input box. Otherwise you can use some of the colors that we suggest using the color picker below each input box. One cool feature is that you can use transparent backgrounds. Simply type "transparent" into the background color box. Here's an example of a favicon generated with a transparent background .