You have a logo, a finished site, and a browser tab that still shows a blank globe or the default WordPress icon. Adding a favicon in WordPress takes about two minutes once you know where the setting lives, but the right place depends on your theme, and a few common traps make the icon refuse to show afterwards.
This guide covers three ways to add a favicon to WordPress: the built-in Site Icon setting, the Site Editor for block themes, and a manual setup with your own files. It also explains the image rules, how to check that it worked, and what to do if the icon still does not appear. Last updated: October 24, 2026.
Quick Answer
The fastest way to add a favicon to WordPress is to go to Settings > General, choose a Site Icon, upload a square image of at least 512×512 pixels, crop it if asked, and click Save Changes. On a block theme you can instead add a Site Logo block in the Site Editor and switch on Use as site icon. Use the manual method, uploading files to your site root and adding code to your header, only when you need a real favicon.ico or full control. Do not combine methods, because two icon sources can compete. If you need correctly sized files, make them with our free favicon generator, and if the icon does not show afterwards, read our guide on a favicon not showing in WordPress, Chrome and Google.
Before You Start: Get the Image Right
Most favicon problems are decided before you open the WordPress dashboard. Prepare the image first.
- Square: use a 1:1 image, so the icon is not cropped or stretched.
- Size: at least 512×512 pixels. WordPress creates the smaller sizes from this one file.
- Format: PNG is the usual choice, especially if your logo has a transparent background.
- Simple design: a bold letter or shape stays readable at 16×16 pixels, where a full logo with small text turns into a blur.
If your logo is wide or you do not have a square version, upload it to our favicon and app icon generator. It runs in your browser, lets you add padding or a background color, and gives you the common sizes plus the HTML code.
Which Method Should You Use?
| Method | Best For | Code Needed? |
|---|---|---|
| 1. Site Icon setting (Settings > General or the Customizer) | Most sites, any theme | No |
| 2. Site Editor with a Site Logo block | Block themes | No |
| 3. Manual files and header code | A real favicon.ico, several icon files, full control | A small snippet |
If you are unsure, start with Method 1. It works for most sites and is the easiest to undo.
Method 1: Use the Site Icon Setting
- In your dashboard, go to Settings > General and find the Site Icon section.
- Click Choose a Site Icon, then select an image from the Media Library or upload a new one.
- Click Select. If the image is larger than 512×512, WordPress shows a crop tool. Keep the crop square and click Crop Image.
- Scroll down and click Save Changes.
If your theme still has the Customizer, you can do the same thing at Appearance > Customize > Site Identity > Select site icon, then click Publish when you are done.
Test: reload your site in a private window. The new icon appears in the browser tab, and the Site Icon section shows a preview of it.
Method 2: Use the Site Editor (Block Themes)
Block themes do not include the Customizer, so the Site Editor is where the icon lives. Menu labels can differ slightly between WordPress versions, but the idea is the same.
- Go to Appearance > Editor and open the Header template part.
- Add a Site Logo block to the header if there is not one already, then choose or upload your square image.
- Open the block settings. If you do not see them, click the settings button at the top right.
- Switch on Use as site icon.
- Click Save. If a confirmation panel appears, make sure the Icon box is ticked, then save again.
Note that this method ties the icon to your site logo. If you want a different image for the tab than the one in your header, use Method 1 instead.
Test: open your homepage in a private window and check the tab. In the Site Editor, the Site Logo block shows the icon switch turned on.
Method 3: Add Your Own Files and Header Code (Manual)
Choose this when you want a real favicon.ico, an Apple touch icon and other sizes under your own control. It takes more steps and is easier to get wrong, so use it only if Methods 1 and 2 do not fit.
- Create your icon files. Our favicon generator gives you a ZIP with favicon.ico, PNG sizes, an Apple touch icon, a web manifest and the matching HTML code.
- Upload the files to your WordPress root folder, the one that contains
wp-content. On many hosts it is calledpublic_html. Use your host’s File Manager or FTP. - Open
yoursite.com/favicon.icoin a new tab and confirm your icon loads. - Install a header-code plugin such as WPCode. Add a new HTML snippet, paste the code from the generator, set the location to Site Wide Header, switch the snippet on and save.
- Remove the Site Icon in Settings > General with the Remove Site Icon button, so WordPress does not add a second icon on top of yours.
The code looks like a set of <link rel="icon" ...> lines that point to your files, for example /favicon-32x32.png. They work as written when the files sit in the site root. You can also paste the code into your theme’s header file, but a theme update can overwrite it, so a child theme or a snippet plugin is safer.
Test: view your page source (Ctrl + U), search for icon, and confirm that your link lines appear once and that each address opens the right file.
Check That It Worked
- Open your homepage in a private or incognito window.
- Look at the browser tab for your icon.
- Open the page source and search for
icon. You want one clear set of tags, pointing to the file you uploaded. - If you see the old icon in your normal browser only, clear your caching plugin and CDN cache, hard refresh with Ctrl + Shift + R, and try again.
Google reads your favicon from the homepage on its own schedule. Its documentation says changes can take several days to several weeks to appear in search results. You can ask Google to recrawl your homepage with Request indexing in the Search Console URL Inspection tool, but there is no guarantee of timing. The rules are in Google’s favicon in search guidelines.
Why a Favicon Goes Wrong After You Add It
1. The browser cached the old icon
Browsers store favicons by address and keep them for a long time, so the old icon can stay on screen after you save the new one.
Clue: the new icon shows in a private window or another browser, but not in your usual one.
2. The theme has its own icon setting
Some themes include a separate favicon field that can override the WordPress Site Icon.
Clue: you saved a Site Icon, yet the tab shows a different logo, and your theme settings panel has its own favicon or icon upload.
3. Two methods are active at once
A Site Icon plus header code, or a plugin plus a manual file, can add more than one icon tag.
Clue: the page source shows several icon lines, or the icon changes between pages.
4. The image is not square or is too small
A wide logo gets cropped awkwardly, and a tiny image looks blurry once it is scaled.
Clue: the icon looks cut off, stretched or fuzzy in the tab, or WordPress forces you to crop it heavily.
The full step-by-step fixes for each of these are in our guide on a favicon not showing.
Troubleshooting Table
| What You See | Most Likely Cause | Start With |
|---|---|---|
| Default WordPress logo in the tab | No Site Icon saved | Method 1 |
| Old icon after saving a new one | Browser or site cache | Private window, then clear caches |
| Different logo than the one you chose | Theme setting or second icon source | Theme settings and page source |
| Icon looks cropped or blurry | Wrong shape or small image | Upload a square 512×512 image |
| Icon vanished after a plugin was turned off | The plugin was supplying the icon | Re-add it with Method 1 |
| Icon fine in the browser, missing in Google | Google has not recrawled yet | Request indexing and wait |
Pro Tips
- Design the icon at 512×512 and check how it looks when shrunk to tab size before you upload it.
- Pick one method and stick to it, so only one source controls your icon.
- Keep a copy of your original square logo file somewhere safe, so you never have to rebuild it.
- Always test in a private window first, since it skips most stored browser data.
- Check your page source after any theme change or plugin install, because both can add or remove icon tags.
- If you rebrand, update the icon the same day and then request indexing of the homepage.
Common Mistakes to Avoid
- Uploading a wide logo. A favicon is square, so a wide image is cropped or squashed.
- Adding header code and keeping the Site Icon. This can create two competing icons.
- Editing the theme’s header file directly. A theme update can wipe your change out.
- Judging the result in your normal browser. Cached icons make it look like nothing changed.
- Relying on a favicon plugin and then removing it. If the plugin supplies the icon, deactivating it removes the icon too.
- Expecting Google to update right away. Search results can take days to weeks.
FAQs
Where do I add a favicon in WordPress?
Go to Settings > General and use the Site Icon section, or on a classic theme use Appearance > Customize > Site Identity. On a block theme, use the Site Logo block in the Site Editor and switch on Use as site icon.
What size should a WordPress favicon be?
Use a square image of at least 512×512 pixels. WordPress creates the smaller sizes from it, and a square image stops the icon from being cropped.
Do I need a plugin to add a favicon in WordPress?
No. The built-in Site Icon setting does the job for most sites. A plugin or header-code snippet is only needed for the manual method.
Why is my new favicon not showing after I saved it?
Usually it is a cached copy of the old icon. Test in a private window, clear your caching plugin and CDN, and hard refresh with Ctrl + Shift + R. Our guide on a favicon not showing walks through every cache layer.
Should I use PNG or ICO for a WordPress favicon?
PNG is the simplest and works well with the Site Icon setting. If you specifically need a real favicon.ico file, use the manual method, and make sure the file is built as an ICO and not just a renamed PNG.
How do I remove or change a favicon in WordPress?
To change it, repeat the same steps with a new image. To remove it, go to Settings > General and click Remove Site Icon. Browsers may keep showing the old icon for a while, so check in a private window.
Why does WordPress crop my favicon?
The Site Icon tool crops images to a square. If your logo is wide, add padding or a background to make it square before you upload, so nothing important gets cut off.
How long until my favicon shows in Google search?
Google says it can take several days to several weeks. Requesting indexing of your homepage in Search Console can help, but Google does not guarantee a favicon will be shown.