How to Add a Favicon to Your Website

You might come across the term favicon when it comes to website creation and development. But what is it exactly? Well, in this article, we’ll be answering your question and showing you how to add a favicon to your website. Let’s get started!

A favicon is your website logo that appears next to the meta title on your browser tab. In other words, instead of showing a blank document icon on the browser, your website will display your official website icon.

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

Hostinger website's favicon

How to Add a Favicon to Your Website

Pick one of two ways below to add a favicon to your website!

Let Browsers Automatically Generate the Icon

The easiest way to add an icon to your site is by uploading it as a .png or .ico file from your hosting’s File Manager. Follow these steps to do so:

  1. Prepare a square-dimensioned image in .png or .ico format for your website logo.

Pro Tip

If you already have a .png file, use it. However, convert the image to .ico format using ConvertICo.com if you ever need to.

  1. Rename the .png or .ico image to favicon.

Pro Tip

Most browsers automatically detect favicon.png and favicon.ico file located in your website directory as your website’s icon. So, you’ll need no coding.

  1. Access your public_html folder by heading over to your hPanel, then File Manager -> Go To File Manager.
Uploading the faveicon.ico file to your wordpress directory
  1. Upload the favicon.png or .ico file into your public_html folder. Reload your website, and you’ll see the favicon.

Upload an Image and Edit Your Theme’s header.php File

Alternatively, if you have an image other than .png or .ico format (jpg, BMP, gif, etc.), you can use it as your website’s icon as well. However, you need to modify the header.php file on your currently used theme folder. To do so, perform these steps on your hPanel.

  1. Once you’ve got a square-dimensioned image as your logo, head over to File Manager -> Go To File Manager -> public_html.
  2. Upload the image into your public_html folder by clicking the Upload icon and select File.
The Upload pop-up window on hPanel's File Manager

Pro Tip

You may both keep the original name of the image or rename it to favicon. It’s recommended to rename the icon to distinguish it from other images.

  1. Go to the wp-content -> themes folder. Then, access the theme folder you’re currently using.
  2. Open the header.php file and paste the following syntax just before the end of the <head></head> tag:
<link rel="shortcut icon" type="image/jpg" href="/favicon.jpg"/>
Inserting code into the header.php file tp add favicon

Pro Tip

Change the /jpg and /favicon.jpg parts according to the format and the name of the image you’re about to use.

  1. Once you’ve saved your changes, the image should now display as your website’s icon.

Pro Tip

If you can’t see the new favicon, clear your browser cache and restart your browser.

Hostinger web hosting banner

Conclusion

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

You can add it automatically by uploading a .png or .ico image named favicon to your public_html folder. Alternatively, you can upload a regular image (jpg, BMP, gif, etc.) and modify the header.php file within your currently used theme folder.

Was this tutorial helpful? Leave a comment below!

Author
The author

Linas L.

Linas started as a customer success agent and is now a full-stack web developer and Technical Team Lead at Hostinger. He is passionate about presenting people with top-notch technical solutions, but as much as he enjoys coding, he secretly dreams of becoming a rock star.