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.

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.

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.

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

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.

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.

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.

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

Once you open the full site editor, click on your header template then you’ll find a prompt at the bottom telling you if you want to edit this template. Click on “Edit template”, and click on the header once again to select it. You’ll see a border around your header when you’ve successfully selected the header.

By default, you might see WordPress or something else shown in your logo, but we want to add our own logo. So select the current logo, remove it if you have to, then click on the ‘+’ icon on the upper left corner of your screen. Then search for site logo block and add it on your header.

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.

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).

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.

You can also watch our video on this topic

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.