Everything you need to Know about WordPress Favicon

Favicon or Site Icon is a small image or a Website icon that appears in the browser’s tab they display, next to the website name. Aside from that Favicons, are also used in your Bookmarks, Home buttons, and many other places.

The favicon will become your Brand (Website) image, and your visitors will recognize it. If you choose your site icon wisely, you can instantly stand apart from the Website’s Crowd, and enhance the User Experience (UX).

In this post first, I will cover the benefits of using the favicon on your WordPress Website. Then I will show you how to create it, and then we will add it to our Website in 3 easy steps.

1. Benefits of using a WordPress Favicon

As I said earlier, people will recognize your website by this little site icon. Look at this image.

How to add a Favicon to your WordPress Website and the site icon

All these favicons make it easier to identify the Websites. As the users open more tabs, this hides the Website titles. Using the Site Icon user can easily switch between the Sites.

Looking for the Top 50 Best Selling WordPress themes, of all time?

So, it also increases your site’s professionalism and helps create customer trust. And when users add it to the home screen, they can identify your Brand (Site). 

2. How to create your WordPress Favicon

If you already have your site icon (you can use your brand logo), feel free to jump to the next section. If not, then continue reading this section.

You can use these online favicon generators. 

  • Favicon-Generator, you can create an icon from scratch or upload an existing one.
  • Favicon.io lets you create favicon from the text if you don’t have a logo.

RealFaviconGenerator the one we will be using in this post. It lets you.

  • Create app and site icons.
  • Download the icon in PNG and ICO formats.
  • Customize the image after uploading it.

To start creating your favicon, you will need to upload an image, Click on Select Your Favicon Image

How to add a Favicon to your WordPress Website using a Favicon Generator

On the next screen, you can play around and tweak the settings and select what looks best to you. Once you’re done scroll, down the page and click on Generate your Favicon and HTML Code.

How to add a Favicon to your WordPress Website using a Favicon Generator

Next, download the Favicon images, click on the Favicon Package, and save it.

3. Recommendations on creating a WordPress Favicon

Let me give you some recommendations while you create your site’s icon. 

  • The size of the favicon should be 512*512 px.
  • You should use a high-quality image as your favicon.
  • Choose more enhanced colors.
  • Select a unique icon as a Favicon.
  • Use a perfectly square image or crop it before uploading it on WordPress.
  • The Icon should look good when it’s size is decreased.

Following all these steps, you will ensure that your site’s icon looks good in every browser.

4. Adding a Favicon to your WordPress Website in 3 Easy Steps

Now you have your favicon, its time to add this to your WordPress Website.

1- Using the WordPress Customizer

The latest Versions (4 and up) of WordPress has a site icon feature that makes it easier to upload a Favicon to your site.

For me, I think it’s the quickest method for adding a Favicon to your WordPress Site.

To do this, go to Appearance–>Customizein your WordPress Dashboard.

Add a Favicon to your WordPress Website's Dashboard

It might look different in your theme. I am using the Astra theme I will first select Header–>Site Identity.

Customizing the WordPress Website to add a Favicon to our Website

Just go to Site-Identity.

Add a Favicon to your WordPress Website using Site Identity and Customization Step

From here, Locate Site Icon choose Select Icon (or any option with which you can upload the image). 

Adding a Website Icon using The Site Icon option in WordPress Customization

The default WordPress Media Library will open if you have already uploaded the image, select it, or upload a new one. 

Select and Upload the Site icon image to make your Favicon of WordPress Website

If you have used the RealFaviconGenerator and downloaded the Favicon Package make sure it’s unzipped.

After selecting the image, click on Select on the bottom right side. 

You can Crop the image if it’s not a perfect square. And preview it from the right section. 

Once happy, click on Crop Image from the bottom right side. 

using the crop image option to crop our Favicon image for site icon

Choose Save & Publish. Don’t worry you, can always come back to alter this in the future. 

2- Using a Plugin

Well, if you prefer the WordPress plugin to do the job. Install and activate the Favicon plugin by RealFaviconGenerator.

Favicon by realfavicongenerator plugin to add a wordpress favicon using it

Once the plugin is activated, go to Appearance–>Favicon. Select, Choose From Media Library and upload the image. It should be 70*70 px (or 260*260 px).

how to add a favicon using a realfavicongenerator plugin

After the image is uploaded, choose Generate Favicon from the bottom left.

It will redirect you to the RealFaviconGenerator page, scroll down and select Generate your Favicons and HTML code. After this, it will redirect you to WordPress Dashboard.

That’s it you are, all set to go now. You can preview the icons on different platforms.

Using FTP

If you are a person that prefers the manual type, you can also add your favicon using FTP (File Transfer Protocol), or File Manager if your host uses cPanel.

To follow along with this step, you need to create your Favicon image. For this, read the above guide.

I will be using the files I downloaded from the RealFaviconGenerator, but the procedure is the same for any tool you use.

Alright to get started, you need an FTP Client or the File Manager if its a cPanel.

Locate the Root Directory of your site and upload the zipped file that you downloaded (Favicons.zip) from the RealFaviconGenerator.

You should upload it where your wp-admin and wp-content folders are. 

Then take the code RealFaviconGenerator provided you with earlier.

You then have two options either:

  1. Use a plugin Insert Headers and Footers
  2. Or paste it in your theme’s head section i.e, by editing the theme’s header.php file.

Well, if you want to avoid any troubles when you update or change your theme, you should use the Insert Headers and Footers plugin.

First, install and activate the Insert Headers and Footers plugin. To use this, go to Settings–>Insert Headers and Footers and paste the code in Scripts in Header section.

insert headers and footers plugin to add the faivcon code in the header section of your website
adding the site icon code using insert headers and footers plugins

Save the changes, and you are all set to go.