How to create a favicon for your website in few seconds?

There are a lot of online services generating a favicon from an image. But what if you need to create a simple temporary text-based icon for your new web project? Favicon.io works nicely for that purpose. Let's see how it works.

Overview
Settings
Download
Convert image to the favicon

Overview

At the upper part, you can see a preview of the favicon in different sizes. The most right one is actual favicon with 16x16 px size. Then you can see properties to change the look of the icon. And in the lower part download buttons.

Settings

Text. I recommend using one symbol because favicon is pretty small and a visitor will not be able to recognize two or more symbols. You can also use special symbols. In my case, I used > symbol, which is often seen in consoles and terminals which is related to the theme of the website.

Shape. You can set square, circle or rounded option to define a shape of the icon. White space will be set as transparent in the generated file.

Font Family. You may choose from one of the Google Web Fonts. The list is pretty long and one symbol may look absolutely different with different font family. Take a time to select the right one.

Colors. You can set font and background color with corresponding settings.

Transparent background. You can remove the whole background and leave only text part. Make sure you have selected bold font family and dark fill color.

Download

To generate and get your custom favicon click on the ICO button.

Convert image to the favicon

If you already have an icon image you can use favicon.io to generate favicon. Make sure you saved your image in .png format with transparent pixels to save custom shape in the converted file. Also, you need to provide a square-shaped image, not a rectangle because you will get stretched favicon. Press Choose File button, select an image. Next click on Download ICO.

Tutorials

1 April 2018 14 July 2019 1491