How to add a favicon to your website

You may come across the term favicon when designing and developing a website. But what is it exactly? In this article, we will answer your question and show you how to add a favicon to your website. Let us begin!

What is a favicon and why is it important?

In a nutshell, a favicon is the logo that appears next to the meta title in the browser tab. That is, instead of displaying a blank document icon in the browser, the official icon of your website will be displayed.

Most of the websites usually use their logo as a favicon. If your site doesn’t have a logo, you can create one with this . This way, your visitors will easily notice your website when they open many tabs in a browser window. Plus, your site will look much more professional.

How to add a favicon to your website?

To add a favicon to your website, you can let browsers automatically detect it or put the favicon in HTML. Below, we explain both methods in detail.

Let browsers automatically detect the favicon

The easiest way to add a favicon is to upload it as a file .png either .ico from the file manager of your accommodation. Follow these steps to do it:

1. Prepares an image of square dimensions in format .png either .ico for your website logo.
   

   professional tip

   If you already have a file .png, use it. You can convert the image to format .ico with if you need.

2. Rename the image .png either .ico a favicon.
   

   professional tip

   Most browsers automatically detect the file favicon.png Y favicon.ico located in your website directory as the icon for your website. Therefore, you will not need code.

3. Access your folder public_html through the hPanel, in Files -> File Manager.
4. Upload the file favicon.png either .ico to your folder public_html. Refresh your website and you will see the favicon.

Put favicon in HTML with an image of any format

With this method, if you have an image that is not in the format .png either .ico (jpg, BMP, gif, etc.), you can also use it as an icon for your website. However, you need to modify the header of your current theme.

To add the favicon to HTML, add the following code snippet to your theme header:

In WordPress, follow these steps from the hPanel.

1. Once you have a square dimensional image for your logo, go to Files -> File Manager -> public_html.
2. Upload the image to your folder public_html.
   

   professional tip

   You can keep the original name of the image or rename it as favicon. It is recommended to change the name of the icon to distinguish it from other images.

3. go to wp-content -> themes. Then go to the folder of the theme you are currently using.
4. open the file header.php and paste this syntax just before the end of the tag:

   professional tip

   change the parts /jpg Y /favicon.jpg depending on the format and name of the image you are going to use.

5. Once you’ve saved your changes, the image should display as the icon for your web page.

conclusion

As you can see, having a favicon on your website is crucial. Not only does it make your site stand out in browser tabs, but it also gives it a professional look.

You can add it automatically by uploading an image .png either .icon call favicon to your folder public_html. Alternatively, you can put the favicon in HTML with an image in any format by modifying the file header.php inside the theme folder you are currently using.

Was this tutorial helpful? Leave a comment below!

Deyi is a digital marketing enthusiast, with a background in web design, content creation, copywriting, and SEO. She is part of ‘s SEO & Localization team. In her free time, she likes to develop projects, read a book or watch a good movie.