How to Change Favicon in WordPress: A Complete Step-by-Step Guide

You can change the favicon in WordPress in under five minutes using the built-in Site Icon setting, no coding and no design software required. This guide walks through every click, not just the general idea. You can follow along even if this is the first time you have touched your WordPress dashboard.

Most tutorials skip the small decisions that trip people up. Which menu applies to your theme? What size image does WordPress expect? Why does the icon sometimes refuse to update after you have done everything right?

Here, you will find three complete methods and a quick way to figure out which one fits your setup. A troubleshooting section covers what to do when the new icon just will not show up.

Screenshots sit under every sub-step. You always know exactly what your screen should look like next, before you click anything.

What is a Favicon, and why does it matter?

A favicon is the small square icon that sits next to your site’s title in a browser tab. WordPress calls this the Site Icon, but it is the same thing designers and developers mean when they say “favicon.”

It shows up in more places than most people realise.

• Browser tabs, right next to your page title
• Bookmarks and saved links
• Browser history
• Mobile home screen shortcuts
• Google search results, in some cases

Here is why it matters more than its size suggests. When someone has fifteen tabs open, the page title usually gets cut off. The icon does not. It becomes the fastest way a visitor finds their way back to your site.

A generic WordPress logo in that spot is a quiet signal that a site is unfinished. It is a small detail, but visitors notice small details more than site owners think. If you are still deciding on the basics of your setup, our guide on what WordPress is covers the platform from the ground up.

New WordPress sites ship with a default blue “W” icon out of the box. Every WordPress install looks the same until someone changes it. That default icon works fine as a placeholder, but it does nothing for brand recognition once real visitors start showing up.

This is exactly why so many people search for how to change the favicon in WordPress the moment their site starts getting traffic. It is one of the fastest visual upgrades available. A full redesign takes days. This takes minutes.

[IMAGE: Browser window with multiple tabs open showing different favicons | alt: “favicon in browser tabs”]

Favicon Size and Format Requirements

Requirement	Recommendation	Why
Shape	Square	Required for WordPress’s Site Icon feature
Minimum size	512×512 pixels	WordPress creates smaller sizes automatically from this master file
File format	PNG	Handles transparency cleanly, stays sharp when shrunk down (JPEG and GIF also work, but PNG is the default recommendation)
Design	Simple, single bold shape or letter	A favicon often displays at just 16×16 pixels, where fine detail or busy logos turn into a blurry smudge
Testing	Shrink the image on screen before committing	Confirms it still reads clearly at tab-icon size

Before you upload anything, get the image itself right. This step gets skipped more often than it should. A wrong-sized image is the most common reason a favicon ends up blurry or crops badly.

WordPress.org’s own favicon documentation confirms these same size and format recommendations for the Site Icon feature.

If your source image isn’t sized correctly yet, our guide on how to resize WordPress images walks through getting it right. Come back here once your file is ready.

What You’ll Need Before You Start

A quick checklist before you open your dashboard. Having these ready means you won’t stop halfway through a method to go find something.

• Admin access to your WordPress dashboard. Editor-level accounts cannot change the Site Icon setting.
• A square source image, ideally 512×512 pixels or larger, saved as PNG.
• Five to ten minutes, since most of that time goes toward waiting on caches to clear, not the upload itself.
• Your theme type (classic or block), which you checked in the section above.

With that ready, pick your method below and follow it from start to finish. Every version of this task ends the same way. You can land on the Customizer, the Site Editor, or the plugin route. Either way, you get a fresh icon in your browser tab instead of the WordPress default.

If you get partway through one method and realise it is the wrong fit for your theme, that is fine. Stop, scroll back up to the decision point above, and switch. Nothing you have done so far needs undoing first.

Method 1: Change Favicon in WordPress Using the Customizer

This is the most common way to change the favicon in WordPress, and it works on nearly every classic theme without installing anything extra. WordPress.org’s own Customizer lesson on site icons covers the same setting from the developer side if you want the technical background alongside these steps.

1. Log in to your WordPress Dashboard, go to Appearance>Customize.
   
2. The Customizer opens with a list of panels on the left. Click Site Identity near the top.
   
3. Inside Site Identity, scroll down past Site Title and Tagline until you reach Site Icon.
   
4. Click Select Site Icon. This opens your WordPress Media Library.
   
5. Upload a new file from your computer, or pick one already sitting in your Media Library. Click your image, then click Select in the bottom right corner.
   
6. If your image is not a perfect square, go to the Edit Image section.
   
7. WordPress shows a crop screen. Adjust the crop box, then click Crop Image. Read ” Resize Image ” in WordPress for detailed steps.
   
8. Back in the Customizer, click the blue Publish button in the top left corner.
   

Note: Customise option is currently unavailable in default WordPress themes(Such as twenty-twenty five and four etc.) So you must change the theme to a classic theme(such as Astra, etc.).

That’s it. Visit your site in a new tab to check the browser tab icon. If the old one still shows, jump to the troubleshooting section further down. This is almost always a caching issue, not a failed upload.

Method 2: Change Favicon in WordPress Using the Site Editor

Block themes handle site-wide settings through the Site Editor instead of the Customizer. If Appearance showed you “Editor” earlier, this is your method. WordPress.org’s Site Logo block documentation covers the block’s full settings if you want to explore beyond the Site Icon toggle used here.

1. From your dashboard sidebar, click Appearance, then Editor.
   
2. Inside the Site Editor, click Patterns in the left menu.
   
3. Click the Header entry, then click the Edit button to start editing.
   
4. Click the + icon and search for “Site Logo” to add it.
   
5. Click the upload icon inside the Site Logo block.
   
6. Then choose or upload your square image from the Media Library.
   
7. Open the block settings sidebar on the right side of the screen. Find and enable Use as Site Icon.
   
8. Click Save in the top right corner. A warning box appears explaining that the change affects your whole site. Make sure the Icon box stays checked, then click Save again to confirm.
   

Once saved, open your homepage in a new tab and check the browser icon.

Trade-off: This method ties your favicon to the same image as your header logo. Want a simplified icon that looks different from your full logo? Use Method 1 or Method 3 instead. Both let you upload the two images separately.

Method 3: Change Favicon in WordPress Using a Plugin

A favicon plugin makes sense in two situations. Your theme buries the setting somewhere unusual, or you want automatic icon sizes made for every device and platform.

1. From your dashboard, go to Plugins, then Add Plugin.
   
2. Search for Favicon by RealFaviconGenerator, then click Install Now, then click Activate.
   
3. A new menu item appears under Appearance, labelled Favicon. Click it.
   
4. Click Select from the Media Library, then upload or pick your square source image.
   
5. Click Generate Favicon. The plugin sends you to the RealFaviconGenerator site.
   
6. There, you can preview how the icon looks on desktop browsers, iOS, Android, and in Google search results.
   
7. Scroll down and click Generate Your Favicons and HTML Code. The plugin installs the full icon set automatically.
   

Keep the plugin active after setup. Deactivating it can remove the favicon files it installed, which brings back the default icon.

Which Method Should You Use?

Before jumping into steps, figure out which method applies to you. WordPress themes fall into two broad categories, and the favicon setting lWordPress themes fall into two broad categories, and the favicon setting lives in a different place for each one.

Check Appearance in your dashboard sidebar right now.

What You See	Theme Type	What To Do
Customize	Classic theme	Use Method 1
Editor	Block theme (full site editing)	Use Method 2
Want more control, multiple icon sizes, or a theme that overrides the default setting?	Any	Skip to Method 3 for the plugin approach

Not sure which one you have? Open Appearance and look. It takes ten seconds, and it saves you from following the wrong set of steps.

Why Your Favicon Isn’t Showing Up And How to Fix It?

You followed every step, but your browser tab still shows the old icon or none at all. This happens constantly, and it rarely means something broke. Check these three places in order.

1. Browser cache: Open your site in an incognito or private window first. If the new icon shows up there, your browser cache was the cause. A hard refresh (Ctrl+F5 on Windows, Cmd+Shift+R on Mac) often clears it too.
2. Site or server cache: If you run a caching plugin like WP Rocket or W3 Total Cache, clear it after uploading a new favicon. Cached pages can keep serving the old icon reference.
3. CDN cache: Sites on Cloudflare or a similar CDN need to clear the CDN cache specifically, or it keeps serving the old file from its edge servers.

A few other causes are worth ruling out. Mixed content can block a favicon if your site loads over HTTPS, but the icon URL still points to HTTP. Some themes also ship their own favicon setting that overrides WordPress’s core Site Icon, so check your theme’s options panel if the built-in method doesn’t work.

Google’s own favicon guidelines require Googlebot to Scan both your homepage and the favicon file, and the icon must be a square of at least 8×8 pixels (though larger than 48×48 gives a sharper result). If your icon shows fine in the browser tab but not in Google, scan access is the likely reason, and it can take time to rescans and update.

Check your site in at least two browsers before concluding something’s wrong. Chrome, Firefox, and Safari each cache favicons a little differently, so a fix in one won’t always clear the others.

Best Practices for Designing Your Favicon

A favicon that technically uploads correctly can still fail to do its job if the design itself is weak. A few things to check before you settle on a final image.

• Keep it simple: Complex logos with fine text or gradients lose all detail at 16×16 pixels. A single letter, shape, or simplified mark almost always reads better.
• Use a square canvas: Rectangular images get force-cropped, which often cuts off the parts of a logo that matter most.
• Match your brand: Your favicon should feel like a smaller, simpler version of your existing logo, not an unrelated graphic. Consistency here builds recognition over time.
• Test on light and dark backgrounds: Browsers vary in how they display tabs, and dark mode has only gotten more common. A favicon that disappears against a dark tab bar needs more contrast.
• Avoid frequent changes: Browsers cache favicons aggressively, so updating the icon every few months creates confusion instead of freshness. Pick a design and stick with it.
• Check contrast separately: Test against white and dark tab bars on their own. A light grey icon might look fine in a screenshot, but it can still vanish once it sits inside a browser’s own tab styling. Preview it in an actual tab before calling the design final.

No favicon-ready image yet? Free tools like Favicon.io let you build one from a letter, an emoji, or an uploaded logo. They export it in the sizes WordPress expects.

A quick design pass there beats guessing at dimensions in a general image editor.

Favicons also connect to your site’s broader visual identity. Updating other brand elements too? Our guide on how to change a logo in WordPress covers that process from start to finish.

In support conversations, one thing comes up often: people assume the favicon needs to be a .ico file specifically. It does not. WordPress accepts PNG, JPEG, and GIF for the Site Icon setting, and PNG is the one we recommend by default.

A favicon is one small piece of a bigger technical picture. Search engines also read other signals from your site’s <head> section, including title tags and meta descriptions. If you have not reviewed those recently, our guide on how to add meta tags in WordPress covers that setup alongside plugin and manual methods.

Conclusion

Learning how to change the favicon in WordPress comes down to two things. Pick the right method for your theme. Get the image size right before you upload.

The Customizer works for classic themes. The Site Editor handles block themes. A plugin like RealFaviconGenerator covers everything in between.

Most issues after that point trace back to caching, not a failed setup. Check your browser, site, and CDN cache separately before assuming something went wrong.

Site-wide changes like this can feel like more than you want to manage alone. If so, our WordPress development services team handles setup tasks like this as part of ongoing site care.

Once your favicon is live, it rarely needs attention again. Small icon, lasting first impression.

Frequently Asked Questions (FAQs)