Change Favicon WordPress: 4 Methods to Claim Your Corner of the Web

by

Shivani M

Our Biggest Black Friday Sale in 5 Years

Backup even 100GB sites without failure! Get real peace of mind today.

Save 50%
change favicon wordpress

After you set up your WordPress site, that generic icon in the browser tab can undermine your professional look. Every successful website has a branded favicon for a reason. 

It’s a small detail that completes your brand’s image. 

In this guide, we break down the simplest methods to change your favicon in WordPress. Donā€™t worry, everything here is explained in plain language, so you can finish this essential step in no time!

TL;DR: For the easiest fix, simply upload a 512×512 PNG as the Site Icon in your WordPress Customizer. Just ensure to always have a backup plugin running before you try the advanced methods. It gives you peace of mind by letting you undo any change that causes an issue.

Prepare your favicon image

First things first, and before making any changes, itā€™s always a good idea to have a recent WordPress backup. With that safety net in place, you can focus on getting the right image file. 

Getting this part correct will save you a lot of frustration later:

Here are the technical requirements:

  • Your image must be a perfect square. The minimum size required by WordPress is 512 pixels in width and 512 pixels in height. This size is important because WordPress uses it to generate all the smaller versions required for different browsers and devices.
  • Save the file as a PNG or ICO. We strongly suggest using the PNG format. The main reason is that PNGs support transparent backgrounds. This allows your logo to appear neatly on the browser tab without being stuck inside a white square.
  • Use simple tools. You donā€™t need Photoshop for this. A free online tool like Canva is perfect for creating a 512×512 graphic. For more advanced needs, a favicon generator can create a complete set of files for you.

šŸ§ Pro tip: Before you save, make sure there isnā€™t too much empty space around your logo. Crop it tightly so the icon looks as large as possible in the tiny space it will occupy.

A) Use WordPress built-in tools

For most people, this is the safest and fastest method. Because the setting is part of WordPress core, your favicon will stay in place even if you change your theme in the future.

There are two places this setting usually lives. Both achieve the same result.

Option 1: Via the Customizer

This is the most common and recommended way to add your favicon.

Navigate to the Customizer. This opens the live theme editor, where you can see changes as you make them. In your WordPress dashboard, head to Appearance > Customize.

Site identity

Open the Site Identity tab. This section contains settings for your siteā€™s title, tagline, and logo.

Site icon upload

Select your Site Icon. This is what WordPress calls the favicon. Click the Select Site Icon button to open your Media Library.

Upload your site icon image

Upload your image. Select your 512×512 PNG file. WordPress might ask you to crop the image, but you can skip this if itā€™s already a perfect square.

Publish site icon

Publish your changes. This pushes the new favicon to your live website. Click the blue Publish button at the top to save.

Option 2: Via Site Settings

In some cases, especially with block themes, you might find the option here instead.

Settings > General

Head to your General Settings. This page contains the most basic configuration for your site. From your dashboard, navigate to Settings > General.

Site icon in general settings

Find the Site Icon field. This option will be located near the top of the page. Click Choose a Site Icon and select your image from the Media Library and finally, Save Changes.

B) Use a plugin for more control