What is a Favicon and how do I create one?

Favicon, short for „Favorite Icon”, is a specific image associated with a given website. You can see it on many websites, it is usually located next to the website address in your web browser, in tabs or in your browsing history.

Favicon helps users easily identify your website when it is open with many others. It works on the principle of quick visual identification. This is especially valuable when the page is bookmarked and the icon is displayed next to the page name. This little graphic can help your website stand out from the rest.

A favicon is typically a .ico file with dimensions of 16×16 pixels, although there are other formats (e.g. PNG, GIF) and sizes (e.g. 32×32, 64×64) that may be used depending on the browser

How to Create a Favicon?

Creating a favicon may seem complicated, but it really isn’t. Below we present a series of simple steps that will allow you to create your own favicon.

Step 1:

First, start by creating your own graphic to use as your favicon. Remember that it should be representative of your website. For most companies, the clear and unambiguous choice is the logo. It will be best to design it in 1024×1024 px format

Step 2:

You then need to reduce the size of your image to 16×16 pixels – although more on this in the next section. Remember that reducing the size of a difficult pattern may make it illegible or blurry. Readability is a key aspect of a proper favicon.

At this point, pay attention to what the icon looks like in the 16×16 format, because this will be the target format.

Step 3:

Once you have your image ready, you need to convert it to the .ico format. There are various free online tools that enable this conversion. It is important to pay attention to their trusted reputation before you decide to use them. If you decide to use an external tool – then a higher resolution will be useful, e.g. 1024×1024, because these tools will automatically scale the icon to the target resolution.

Step 4:

Now you need to attach your favicon to the website. To do this, place the favicon.ico file in the root directory of your website. Then add the following line to the „head” section of your HTML page:

<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon">

Replace „http://example.com/favicon.ico” with the path to your favicon file.

Step 5:

And finally, your favicon should now be visible on your website. Note, however, that some browsers may require refreshing (or even clearing the cache) before you notice any changes.

So this is how a favicon is created – a seemingly small thing, but with big potential!

Free tools

1. https://www.favicon.cc
2. https://realfavicongenerator.net/
3. https://favicon.io/

There are certainly more tools – I mainly use the three above.