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

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:

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

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

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

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

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

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

Another popular method is to install a dedicated plugin to handle your favicon.

📋 Note: It’s always smart to run a full backup of your site before installing any new plugin. While the one below is well-regarded, having a restore point is a professional habit to get into.

The best plugin for this is Favicon by RealFaviconGenerator.

Install and activate the plugin. You can find this in the WordPress Plugins menu by searching for its name.

Access your favicon plugin settings. Navigate to Appearance > Favicon. The plugin will ask you to upload your main image and then show you previews of how it looks on different devices, allowing you to make adjustments.

C) Manual FTP upload (advanced)

This method is for advanced users who need full control or are working on a custom-coded theme.

⚠️ Warning: This is where things can go wrong if you’re not careful. Ideally, you should test these changes on a WordPress staging site first. A small mistake here can take your site down.

Phase 1: Prepare your favicon files

Use an online tool like realfavicongenerator.net to create a comprehensive package of favicon files. It will give you a ZIP file with multiple formats like .ico, .png, and .xml.

Phase 2: Upload files to your web server

Upload all the files from the ZIP package to your site’s root directory. This requires using an FTP client like FileZilla or your hosting provider’s file manager to access your server. The root directory is typically named public_html or www.

Phase 3: Edit your theme’s header file

Open your child theme’s header.php file for editing. You can access this in WordPress by going to Appearance > Theme File Editor. You will need to add code just before the closing </head> tag.

Phase 4: Insert the correct code

Paste the HTML code provided by the favicon generator into your header.php file. Ensure the file paths are correct. It will look something like this:

<link rel="icon" href="https://www.yourdomain.com/favicon.ico" type="image/x-icon">

Replace yourdomain.com with your actual domain and save the file.

Change favicon WordPress: Troubleshooting

If you’ve uploaded your favicon but still see the old one, don’t worry. This is extremely common, and the issue is almost always caching.

Here’s what to do, in this order:

Parting thoughts

A custom favicon is a critical element for professional branding, building trust in a sea of browser tabs. 

For most users, the Site Icon method in the WordPress Customizer is the simplest and safest choice. If you opt for a plugin for more control, be mindful of potential conflicts with other plugins.

And for advanced methods like manual uploads, having a recent backup of your site isn’t just a suggestion—it’s essential protection if a code change causes an issue.

FAQs