Create favicon

So, what is a favicon? It is a small icon or collection of icons associated with your website. Often, favicon is displayed within the browser tabs and bookmarks bar.

To add some personality to my website, I decided to create a completely custom favicon for it.

So, instead of using already made icon for favicon, I want to design my own one from the ground up. To do so, I am going to use Figma as a tool for designing a favicon for my website.

Below you can find instructions of making a custom favicon.

Create new design file in Figma

To start with, there are several things to note when creating a favicon in Figma.

First, all elements of your favicon should be grouped into a single layer.

Second, your grouped layer should have a square shape, with a recommended dimension of at least 512x512px.

In order to begin designing a favicon, create a new Figma design.

Design favicon in Figma

Use Figma tools to design your favicon.

As for me, I decided to create an abstract favicon, using geometric shapes to create a visual presentation of my initials.

I used Shape tools to create two (2) polygons, where each polygon represents a letter and has its own color.

Polygon 1 has a black color and is used to represent a letter “T”, while Polygon 2 has a blue color and is used to represent a letter “D”.

Export favicon from Figma

Once a design of your favicon is done, select the main (grouped) layer of a favicon and click on Export, located in the sidebar.

Note, there are several formats available for exporting the favicon: .png, .jpg, .svg, .pdf. Choose the one that better fits your needs.

As for me, I have chosen .svg format.

Generate favicons

Once exported, use online generator to make favicons for various platforms. It generates various sizes and formats of your favicon.

To start generting favicons, select your favicon image.

After that, the web app will start generating favicons for you, and when it is done, you will be presented a preview of your favicon on various browsers and platforms.

Scroll to the bottom of the webpage, and generate your favicons and HTML code.

Then wait untill your download package is ready for download. And once ready, click Favicon package to download it.