Home » WordPress Tutorials » Basics » How to Add Favicon to WordPress

How to Add Favicon to WordPress

Adding a favicon to your site is a great way to improve user experience and add a kick to your branding strategies.

Favicons are very useful for contemporary websites for a number of reasons, and knowing how to add one to your site is an important skill.

If you aren’t sure what a favicon is, then definitely check out our article:

What is a WordPress Favicon

Also, if you want to learn everything about site-building with WordPress, then check out our full and comprehensive guide.

In the following pages, you will learn how to add a favicon to your website.


How to Add Favicon to WordPress

By default, all WordPress websites feature a dedicated favicon. It looks like this:

What is a Favicon in WordPress


Favicon Icon in Web Browser


However, we are about to change it., so it looks more appealing.

There are two main methods to do so:


Method 1: Upload a Favicon via the Customize Page


WordPress includes a dedicated feature, which makes the process quick and easy. To access the menu, simply go to Appearance->Customize from your WordPress Admin Panel:

WordPress Dasboard Appearance Settings


This will open the Theme Customization page of your site. From here, search for the Site Identity button and click it:

WordPress Site Identity Menu


This will open the Favicon options menu:

Add a Favicon via the WordPress Customization Menu


Now, locate the Site Icon area and then the Select site icon button. There you will also see the size requirements for each favicon you wish to use:

Select a WordPress Favicon fot Your Site


Clicking the button will open your media library. From there you can select an image from the ones that you have already uploaded, or simply upload a new image file:

Use the WordPress Media Library to add a Favicon


Whatever icon you choose, click on the blue Select button at the corner left, so WordPress applies these changes:

Include Favicon in your WordPress website


After clicking the button, you will be redirected to the previous page. However, now you will notice that the Favicon section is different and displays the image you have just selected:


To apply all these changes and make them visible to your visitors, simply click the blue Publish button at the top of the page:

Publsih the changes in WordPress Customization Menu


Now, you should notice that the favicon is applied at all places that showcase site icons. For example, next to the browser tab:

WordPress Favicon Appears in Web Browsers


Method 2: Install a Favicon Plugin

If you prefer using plugins to set up your favicon, there are plenty of options. One such is Favicon by RealFaviconGenerator. This plugin allows you to customize your site icon in many different ways, and also makes numerous versions of the icon, to meet the requirements of different devices and operational systems.

If you aren’t sure what a WordPress plugin is, or how it works, then definitely check out our dedicated series of articles:



Adding a favicon is only the beginning of a great journey in the digital world. Expand your audience and boost your site’s trustworthiness with ZETTAHOST’s hosting and safety services. You can choose among several plans and types of hosting such as free web hosting, shared web hosting, WordPress hosting, VPS hosting, and safety via SSL Certificates. If you need a reliable partner for your digital endeavors, then don’t hesitate to contact us and start a journey together!


Was this article useful?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Newest Articles:

How to Add a Site Logo Block in WordPress with Gutenberg

Adding a site logo in WordPress with Gutenberg is straightforward and requires only a few mouse clicks and just several minutes of your time. In the following paragraphs, you will read how to add a site logo to your WordPress website via the Gutenberg editor step by...

How to Add Images to WordPress with Gutenberg

Adding images with Gutenberg is quite simple. The block editor is very user-friendly and allows you to add images in several ways. In the following paragraphs, you will read about 4 methods you can instantly use to upload the media files you want.   How to Add...

How to Disable Gutenberg in WordPress

If Gutenberg is not suitable for your needs and wish to switch back to the Classic Editor, continue reading, as in this article we will show you 3 simple methods of how to disable the block editor. In the following sections, you will read how to disable Gutenberg by:...

5 Best Gutenberg Plugins for WordPress

One of the fastest and most convenient ways of enhancing the functionalities of Gutenberg is by using various WordPress plugins. Although Gutenberg is very versatile and feature-rich by itself, the open-source nature of WordPress has inspired developers all around the...

How to Add a Contact Form with WordPress Gutenberg Editor

If you are using Gutenberg to craft your WordPress website, then you should know that the process is very easy, especially by using the block editor. In the following paragraphs, you will read how to add one to your pages.   How to Add a Contact Form with...

Ready to Create Your Website?