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.

How do I install a favicon on my website?

If you're using an ICO formatted favicon then place the favicon in the root of your website directory. Web browsers will automatically look for you favicon and it will be loaded by the web browser without the need to edit the HTML on your website.

If you're using a PNG formatted favicon then place the favicon anywhere in your website directory. In the head of your html insert a link tag with a src attribute that points to your PNG formatted favicon. <link rel="icon" href="/favicon.png">

What is a favicon?

A favicon is a small image or collection of small images that are associated with a website or webpage. Favicons are displayed by a web browser next to the title of the website or webpage in the address bar, the browser tab, and the bookmarks bar.

Here are some favicons from a handful of popular websites.

Why do I need a favicon?

A favicon is a finishing touch that helps to differentiate your website from your competitors. Web designers commonly create a small version of the website logo that consistent with the branding of the website. The goal is to create a favicon that's easily identifiable when display in a browser tab or bookmarks bar.

Squarespace uses its logo as its favicon to stay consistent with the company's brand.

What is the size of a favicon?

Modern web browsers are flexible with sizing of your favicon, but they typically prefer 32x32 and 16x16 pixel favicons. For less commonly used web browsers the sizing varies. You can use the favicon generator to create a 1024x1024 pixel image if you need to create additional sizes.