How To Add Favicon To Your Website

A logo or an icon is one of few great ways to increase brand awareness to the public. For a website, this can be achieved by adding a favicon. Therefore, in this article, I would like to share with you how to add a favicon to your website.

About Favicon

What Is A Favicon

Favicon, derived from Favorite Icon, is an icon with several sizes associated with a particular website. It typically displayed in the browser tab, bookmark bar, and history page. Besides that, a favicon also appears as an icon for bookmark page, in the RSS reader and many more.

How To Add Favicon To Your Website
Favicon in apps and devices.

Favicon History

It was first supported when Microsoft released their Internet Explorer 5 in March 1991. But later it was standardized by the World Wide Web Consortium (W3C) during the release of HTML 4.01 in December 1999.

Originally, a favicon requires ICO format but nowadays, modern browsers have supported more image formats like PNG, JPG, SVG, and GIF. Some of the web browsers even support animated image for the favicon.

Why You Should Add A Favicon To Your Website

As I stated above, using a favicon is a great way to increase your brand awareness. It not only makes your website look professional but also gives identity to your website. This will allow your site to stand out in the web browser along with other popular websites.

The usage of icon or logo has become extremely important that even a 3 years old kid can instantly recognize YouTube logo. Now, try to imagine all these popular websites like Facebook or Twitter without their logo?

Add A Favicon Via Customizer

The easiest and fastest way to add a favicon to your website is by using WordPress customizer. All you need is an image preferably using PNG format with at least 512 pixels of width and height.

Unfortunately, this method only available for WordPress version 4.3 or more. And if you haven't update your WordPress yet, I strongly encourage you to do so. This is because the latest version of WordPress is more secure and has fewer bugs.

To get started, first, login to your WordPress backend and go to Appearance » Customizer. Then, locate Site Identity option in the customizer of your active theme and open it. Please note that the placement of the Site Identity option may vary depending on the theme.

How To Add Favicon To Your Website
Site Identity option in WordPress Customizer.

Next, click on the Select image button and select an image for your favicon with at least 512 x 512 pixels.

How To Add Favicon To Your Website
Uploading Site Icon in WordPress Customizer.

After that, scroll up and click on the Publish button to save your favicon. While this method is easy, but from my personal experience, your favicon will not be displayed in some apps.

For example, in the RSS reader application like RSS Owl or other feed readers. So, unless you don't mind about it, then this method probably the best for you.

Add A Favicon To Your Website Manually

Preparing Favicon Images And Related Files

If you wish to use a more advanced approach, then you can add a favicon to your website manually. Please note that this method requires an FTP connection. So you might want to read how to upload files and folders using FTP.

Personally, I prefer and recommend this method because it is easy and support all major platforms and devices. And to do so, first, go to website. Then, click on the Select your Favicon picture button and select your image. Please refer to the image below.

How To Add Favicon To Your Website
Select your favicon image.

Once you click the button above, it will generate favicon of various sizes and redirect you to page similar like the image below. Next, set up your favicon settings according to your needs. And after that, click on Generate your Favicons and HTML code button to continue.

How To Add Favicon To Your Website
Generate your favicons images and code. Click to view larger image.

Then, you will reach the new page with installation instruction. In this step, there are two things you need to do. First, download your favicons by clicking on the Favicon package button. Second, copy all the codes in the third instruction somewhere. Please refer to the image below.

How To Add Favicon To Your Website
Download your favicon images and codes into head section of your website.

Uploading Favicons And Files To Web Server

Now, you already have everything you need to add a favicon to your website. Let's extract Favicon package you have downloaded earlier using any file extractor like such as WinZip, WinRAR or 7Zip.

Then, upload everything to your web server to the exact location you have set during favicon setting previously. For example, in the root directory or particular folder. This includes all images, ico, xml, svg and webmanifest files.

Next, copy and paste the following lines in your child theme functions.php or site-custom plugin. And replace everything from 3rd to 11th line with the code you have saved from third instruction of Realfavicongenerator earlier. Please note that your code may have more or less line depending on your setting.

Finally, save the file and open your website. Don't forget to clear your cache if you've ever used a favicon before. You should have a brand new favicon which looks perfect on all major platforms and devices.

Add A Favicon Using A Plugin

Beside two methods above, you also can add a favicon using a WordPress plugin. There are a few great plugins you can use to add a favicon to your website easily. You might want to read how to install a WordPress plugin.

For example, Favicon by RealFaviconGenerator is the most popular plugin for this cause. Not only it is extremely easy to use but it also supports all major platforms like Windows, Mac, Android, iOS, and more. In which you can set up a favicon for all popular browser such as Internet Explorer, Chrome, Firefox, Opera, Safari in just a few seconds.

Besides that, All In One Favicon is another great plugin you can use to add a favicon to your website. It also comes with Apple Touch support. However, unlike the previous plugin, All In One Favicon only support three type of favicon which is ICO, PNG, and GIF.

Footer Note

In the long run, adding a favicon will definitely help to popularize your brand and make it more recognizable. If you have other ways to add a favicon to your website, please kindly share it with us in the comment section.

  • If you think your friends would find this useful, please share it with them. It will allow us help more people.
  • To get more of our latest update, please subcribe to our newsletter.
  • You can also print this article for reference.
This article has been printed from

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.