Design & Generate

Create a minimal favicon in few simple clicks.

Generate favicon from text

Preview your favicon in multiple sizes. Your favicon should still be legible at 16x16 pixels.

Customize your favicon by first selecting the text. I recommend using one character for maximum legibility, but with the right font you should be able to use two or three characters. Next, choose from three shape options: square, circle, and rounded square. Select from any of the Google Web Fonts. The sans-serif fonts work best for displaying at 16x16 pixels. Adjust the size of the font as needed. The text should take up the majority of the space available. Finally, select the colors for the font and background. White text on a bold background color will really make your favicon stand out.

Download your favicon in multiple formats. The ICO file contains 32x32 and 16x16 pixel images and the PNG is 1024x1024 pixels.

Save your work for later or share with your friends on Twitter ❤️

Generate favicon from an image

Upload your image.

Preview your favicon in multiple sizes.
Download your favicon in multiple formats.

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.