How To Add A Favicon To Your WordPress Website: 11 Easy Steps

Found this helpful? Please share it with your friends!
This article may contain affiliate links which means we might earn a small commission if you decide to make a purchase through them (at no extra cost to you). Thank you for your support!

A favicon, which is also called a WordPress site icon in WordPress websites, is a small graphic image that appears in your browser tab next to your website title.

But don’t think that this little graphic doesn’t pack a powerful punch just because it is so small! You will see that a WordPress site icon is a very powerful branding tool for your small business! Not only does it make your website stand out in your visitor’s browser but it also helps your brand to appear more professional and well put together.

Examples Of WordPress site icons In Browser Tabs
Site Icons For Popular Websites

In my last tutorial, I showed you how to quickly and easily create a site icon for your WordPress website using a free online favicon generator.

Today, I want to show you how to add your site icon to your website using the WordPress customizer. And honestly, this is going to be such a quick tutorial that you aren’t even going to break a sweat!

Let’s begin!

Steps To Adding A WordPress Site Icon To Your Website

1. Log into the WordPress Admin Dashboard.

2. Click “Appearance“.

3. Click “Customize“.

4. Select the “Site Identity” menu item.

WordPress Site Identity Menu
Site Identity Menu Item

Depending on what WordPress theme you are using, you may need to scroll down until you find it. If you have been following along with my tutorials you will know that we are using the Blocksy theme.

Besides adding a site icon to your website, the “Site Identity” control panel allows you to change your site title and your site tagline. All three of these elements are displayed in the browser tab so choose titles that describe your brand, products, or services well!

Site Title, Site Tagline and Favicon in Browser Tab
The Site Title, Site Tagline And Site Icon As Displayed In The Browser Tab

5. Click the “Select Site Icon” button.

WordPress Site Identity Options
Site Identity Options

6. The WordPress media library will open which will allow you to upload the favicon that we created in the last tutorial. You will need to upload the WordPress site icon that is 512 x 512 pixels. The file we created in the last tutorial should be named “android-chrome-512×512.png” and you will find it inside a folder called “favicon_io“.

Related: How To Use The WordPress Media Library: 5-Minute Tutorial

7. Your new WordPress site icon will now be displayed in the “Site Identity” control panel. Here you will be able to see a preview of what your favicon will look like in a browser tab along with options to remove the icon or change the image.

Site Icon Preview in Site Identity Dashboard
Favicon Preview

8. Click “Publish” if you are happy with your favicon and how it looks in the preview.

9. Close the WordPress customizer by clicking the “X” symbol at the top left-hand side of the customizer.

10. Hover your mouse over your website name at the top of the WordPress admin dashboard and click “Visit Site“.

"Visit Site" In WordPress Admin Dashboard
Visit Your Site To See The Live Site Icon

11. Your website should now open with your brand new favicon next to your site title!

Favicon In Browser Tab
Favicon Displayed In Browser Tab

Congratulations! You have just added a favicon to your WordPress website!


As you’ve seen it really is easy to add a favicon to your WordPress website so it really is worthwhile taking the time to do it. Especially when you consider all the benefits that come with such a small but powerful addition to your site!

I hope you enjoyed the tutorial and are happy with the results! Don’t forget to let me know if you have any questions in the comments section below!

Leave a Reply

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