How to Change Favicon in WordPress

Do you want to know how to change website icon in WordPress? In this article, we’ll show you how you can change your website icon or favicon using the customization menu and also the new Full Site Editor.

Favicon is the small image that you see beside the title of a website on your browser tab. It’s basically the logo of the website/business that distinguishes it from others. This helps people identify a website easily. By default, you’ll have the WordPress logo as your favicon. In this article, we’ll show you how to change the website icon in WordPress and make your site unique.

Changing the favicon of a WordPress website is quite an easy task. But before changing your Favicon, make sure that you have already made a custom favicon for your website. It must have proper resolution and color. Don’t worry about it much as we will discuss how to properly create your favicon later in this article. So, let’s learn how to change website icon in WordPress.

Why do you need to change your favicon?

As we’ve mentioned previously, a custom favicon helps establish your business identity. It also increases your site’s usability and user experience. You might have noticed other brands using their own unique favicon. Such as Gmail, WordPress, Elementor, or our own WPGIZ. All businesses have their own unique favicon which could resemble their own logo or is probably the logo itself.

favicons on browser tabs

When you look at the favicons of popular businesses, you’ll see they use their own favicon which makes them stand out. Also, you might wonder, how does setting a custom favicon increase user experience. Well, usually most users have multiple tabs open in their browser. As a result, the title of the website gets hidden. The only thing that can set it apart is their favicon.

The favicon is not only limited to browsers. If you save a webpage on the home screen of your mobile device, you’ll see the favicon appears on your device screen. By default, you’ll have the WordPress logo as your WordPress site’s favicon.

default wordpress favicon

How to create a custom favicon

Before you go on changing your favicon, you need to make sure that you have a proper favicon. To create your own favicon, you can use your business logo. You need to set the height and width to 512 px for both length and width. It’s ok if your logo isn’t that size, while changing the favicon, you will be prompted to crop it.

Get Latest Post Notifications!

Subscribe to our newsletter

You can use the WordPress editor to crop your image as well, but the output might not seem perfect. Your logo might be disproportionate. Instead, you can use programs like Photoshop, Paint.net, GIMP, etc. to edit your favicon. Also, it would be better if you have a transparent background (like your logo) to your favicon. The accepted format for a favicon is png, jpeg, or gif.

2 easy methods for changing Favicons

After the WordPress 4.2 update, it is possible to change the favicons using the Customize menu. The Full Site Editor was introduced in the later update of the 5.8 version. In the Full Site Editor, the customization and editing pages have been merged. So there’s a new way of changing the favicon of WordPress websites. So the 2 methods that we’ll learn are:

  • Changing Favicon through the customization menu
  • Changing Favicon (Site icon) using the Full Site Editor

How to change website icon in WordPress (from Customization)

Changing your Favicon is very easy. Just follow the below steps:

Step 1: Go to Customization Menu

First, log in to your WordPress admin dashboard. From there go to Appearance > Customize and you will be directed to the Customization menu

accessing WordPress customization menu

Step 2: Set your Favicon

Once in the customization menu, click on ‘Site Identity’ This is the place where you can change your website logo, title, tagline, and favicon. Favicon option is the last dotted box that has ‘Select site icon’ written on it. Click on it.

learning how to change website icon in wordpress

Now you can either browse your computer and upload a file, or select a file from your media library if you have your logo uploaded already.

Step 3: Crop image and save

Once you select your image, another screen will appear allowing you to crop your image into a square box. Crop your icon the way you want and then hit ‘Crop Image’ on the bottom right corner of the screen.

cropping a favicon

A preview of your favicon will appear on the right side of your screen. You can check how your favicon looks from this section. And that’s how to change website icon in WordPress using the customization menu.

How to change website icon in WordPress (Using the Full Site Editor)

As of yet (WordPress 5.9.2 update), the Full Site Editor is still in the beta version. Therefore, it is not recommended to use the Full Site Editor to customize and build your website. In one of our previous articles, we’ve discussed Full Site Editor and how you can use it to customize and build your web pages.

We want to make this article as helpful as we can. So let’s learn how to change the favicon using the Full Site Editor.

Step 1: Open Full Site Editor

If you’re using an FSE compatible theme, then you can open your Full Site Editor from Appearnece > Editor.

accessing full site editor

We are using the default WordPress Twenty Twenty-Two theme which is compatible and has the Full Site Editor.

Step 2: Find or Add a Site Logo block

With Full Site Editor, you can customize your header and footer from the same builder without having to leave the screen. You can change your WordPress logo using the Gutenberg block. Now there’s a Site Logo block available in the Full Site Editor.

Adding site logo block on full site editor

By default, the site logo block is present in your header. But if it isn’t, you can insert the block from the Gutenberg blocks.

Step 3: Upload or Select an image

Click on the site logo block and you’ll see an upload button icon on the site logo block. Click on it and then select a logo for your website.

upload button of site logo block in full site editor

You can also upload an image to your media library and select it from there.

Step 4: Use the image as site icon

Once you’ve set your WordPress logo, select the block and a settings panel will appear on the right side of your screen. From there, scroll down and you’ll see an option to use the logo as your site icon (favicon).

using logo as site icon in full site editor

You may also decide to not use the logo as a site icon. There is a link to access a custom favicon creation page. You can use that as well. Now you know how to change website icon in WordPress using the customization menu as well as the Full Site Editor.

Conclusion

Changing your favicon is important as it increases your brand awareness and makes your WordPress website look more professional. However, this option of changing the favicon was introduced on WordPress 4.2 update. Before that, we had to go into header.php and put in a code to change our favicon.

Well, that concludes our article and we hope that you now know how to change website icon in WordPress. We hope that this post was useful for you. If you have any questions regarding this post, feel free to leave a comment down below.


Disclaimer: This post may contain affiliate links and we may receive a small commission if you purchase something by following them. However, we recommend services/products that we believe good to serve your purpose.

Leave a Reply

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