1. Overview

Favicon is one of the important assets that serve as a brand for a website. Do you know how to create it online for free?

In this article, let's take a look at how we can create it online for free in just a few minutes.

2. Content

2.1 What is a favicon and why do we need it?

Favicon is a small image file, usually a 16x16 pixel or 32x32 pixel size, that serves as branding for a website.

Having one such favicon on a website, helps users or visitors locate the website or its page easier when they have so many tabs opened in a browser.

Due to its small size and resolution, it's suggested to have a simple image or a maximum of 3 characters, or a part of the website or company logo.

2.2. Where can we see a website's favicon?

After we set up the favicon for a website, it can be observed wherever the website or its page is referenced by browsers as mentioned below.

  • Browser Search bar, Browser tabs, Browser Bookmark tabs, Browser History, Browser Search recommendations, and so on.

2.3. How can we generate a favicon online for free?

There are several online applications that can help us in generating a favicon.

However, in this article, we will use the below website, which creates a favicon using simple text.

Steps to make a favicon.

  • Access the website and fill the form with the below details
    • Text, Font details, Background shape, Font Color, and Background color
  • Check its preview
  • Download it once you are done.

2.4. Where should we include favicon in the website code?

It is supposed to be included in the index page, it can be index.html or index.php, or any other based on your application's index page as shown below.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Random Codez | Hello World Application</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

3. Conclusion

We know how to make a favicon online for free in just a few minutes, and use it on a website.