How to Create a Favicon for Website

A Favicon is a small square icon file used to represent your website. It plays a major role to establish brand identity and differentiate your website from others. Favicons are often found in the address bar of the web browser, but they can also be used in the shortcut, tab, and bookmark. Here is an example of a favicon that we use on our website:

A favicon is usually saved in the ICO file format, an image file format that can contain multiple images. Although you can use other image formats like PNG, GIF or JPEG for a favicon, we recommend using ICO as this is the most widely supported file formats.

The favicon size for a website must be at minimum 16 x 16 pixels. If you’re using the ICO file format, you can also include larger sizes like 32 x 32, 48x 48, 96 x 96, etc. That way, your favicon will be perfectly scaled when a user created a desktop or taskbar shortcut to your website.

There are several ways you can create a favicon for websites. In this article, we’ll guide you through the steps to create a favicon for your website by using an online tool.

Create a Favicon Online

Using an online tool to create a favicon is the easiest and fastest way as there is no complex software to install or expensive software to buy.

Step 1. 
Launch the web browser of your choice and navigate to https://www.ionos.com/tools/favicon-generator . Do note that this favicon generator is an online service provided by 1&1 IONOS and is free of charge.

Step 2.
Click on the color picker button to pick a color that you wish to use to create the favicon. Then click once on the pencil button and start drawing the favicon on the small boxes on the right. Tip: You can also use the eraser to remove any unwanted pixels.

Step 3.
Once you have completed the favicon, click on the Generate favicons button. It will then process your favicon and make it available for download.

Step 4.
Click on the download button to download the favicon you’ve created. Save and then extract the zip file.

Step 5.
Look for the file named favicon.ico in the extracted folder and upload this file to the root directory of your website.

Step 6.
Add the following code to the header section in each web page:
<link rel="icon" href="https://www.yoursite.com/favicon.ico" type="image/x-icon" />

Don’t forget to replace yoursite.com with your website domain.

Share this

Share on Facebook