How To Easily Add A Favicon To Your WordPress Website

Favicon is that small icon that appears on left side of your browser tab. Mostly, it is used to identify a website’s tab from all the other open tabs in the browser. On top of that, having a Favicon also helps you with your branding.

In this article, I am going to walk you through a complete process with which you can add a Favicon Icon to your WordPress website without coding or any outside help.

Furthermore, I am going to share with you multiple methods that you can follow in order to achieve the final result.

Let’s get started.

Before we do anything inside WordPress, you need to get your Icon optimized and resized.

The most used dimensions for Favicon icons across the web is 16px by 16px but these days we have devices with higher resolution and pixel density. So, you may also use 32px by 32px and even 64px by 64px.

But, make sure that you size your Favicon as a square image with equal width and height.

You can do so by either using Photoshop, Illustrator or any other vector or image editing tool. If you don’t have any local tools, you can also use some online vector editors and image editors such as:

Once you have resized your images, you can move to the WordPress part.

Method #1: Add a favicon to WordPress website using WordPress customizer.

In earlier versions of WordPress, you didn’t have many options to customize the style of your website. But, now you get a pretty powerful front-end customizer which with you can change the accent colors, site logo, typography styles and even layout styles of your website. Given that the theme you are using is equipped with customizer support.

Step #1: Head over to the front-end customizer by clicking on the “Customize” menu option.

I am using the default WordPress theme. But, you can use the customizer in any given WordPress theme that supports it.

Step #2: Click on the “Site Identity” option. Here you can change the logo and the Favicon of the website. Please, note that Favicon is Site Icon.

Add a Favicon to WordPress

Step #3: You can change your Logo and Favicon using this settings panel. Click on the “Select Site Icon” to upload, replace or remove your Favicon icon.

Add a Favicon to WordPress

Step #4: Once the Favicon icon is uploaded, please click on the “Publish” button that you see in the top right corner of the customizer panel.

You are all set.

The brand new Site Icon or Favicon icon should reflect in the front-end of your website.

For some reason, if you don’t see the Favicon icon in action, make sure to clear all the browser cache and hard refresh your website or use the “Incognito” mode in Chrome to see the changes.

Also, if your premium theme comes packed with a theme panel, you may want to check it to see if it is overriding the customizer settings.

Method #2: Add a favicon to WordPress using a WordPress plugin

If your WordPress theme doesn’t support Customizer API, you will have to make use of an external WordPress plugin to get this done.

You can use any of these plugins to add Favicons to your Website:

I am going to use Favicon Extender as I only need a plugin to upload Favicon and don’t need any extended features such as Favicon Rotation and so on.

Step #1: Head over to the plugin’s panel in your WordPress admin dashboard and search with the term “Favicon Extender”. Install the plugin by click on the “Install” button.

Favicon extender

You don’t get any special settings page for this plugin. But, it extends the functionality of your WordPress customizer settings and adds a few more options.

Once this plugin is activated, you will see a few more options that you can use to upload app icons for various screens and devices.

Add a favicon to WordPress website

By default, WordPress doesn’t offer multiple image upload option for the Site icon. So, you can use this plugin if you want to deliver specific images for specific screen sizes.

Method #3: Replacing the default Genesis favicon in the theme folder

These days, many bloggers and web designers don’t use Genesis Framework that often. But, it is still one of the best designer friendly starter themes for WordPress.

If you are using Genesis Framework, you’ll see that a default Site Icon/ Favicon appears when you upload this theme to your WordPress website.

Although some child themes might let you change the site icon easily but most Genesis Framework child themes don’t come pack with this feature.

But, there’s a very simple and effective way to get around this.

All you need to do is replace the “favicon.ico” file with your own Favicon icon. But, make sure to convert your Favicon image into an .ico file using this favicon converter.

Once you have the converted image, replace the default Genesis Favicon.

You are done. The new Favicon should be reflected on the front-end of the website.

If you don’t see the new Favicon, hard refresh your browser, use Incognito or clear the browser cache to see the changes.

Method #4: Using your premium theme’s panel/dashboard

Most people get premium WordPress themes for their websites. If you also have a premium WordPress theme, you don’t need to install any external plugins or use WordPress’ general customizer to upload a favicon to the website.

Just visit the theme panel provided by your premium theme and set the Site Icon and Logo easily.

Conclusion: Add a favicon to WordPress

Every day, I stumble upon of a bunch of WordPress websites that don’t have any Favicon icon or use a default Favicon icon of the web hosting provider.

It looks pretty unprofessional.

When you have a logo and a profile picture for all your social media accounts, why not just resize the same image into a Favicon and simply upload it to your website?

In this tutorial, I’ve shared all the major methods that you can use to upload Favicon to your WordPress website without coding.

Out of all these methods, if you ask me, Method #1 is the best one as you don’t have to install any plugin and if you don’t know how to resize images, you can use a large image as the Favicon/site icon as well.

Which method did you like the most? Drop your comments in the comment section below.