Look at your browser tabs right now. Most of them carry a tiny logo, and if your own site shows a grey globe or the WordPress “W” instead, it looks unfinished next to them. The fix takes about as long as making a cup of tea, provided you start with the right image.
To add a favicon in WordPress you use a built-in setting called the Site Icon. You do not need a plugin and you do not need to touch any files. There are three places to set it, depending on your theme type and WordPress version, and the more common headache comes afterwards, when the browser keeps showing the old icon.
Favicon, site icon, logo: three different things
A favicon is the small square image browsers show in tabs, bookmarks and history. WordPress calls its version the site icon, and it also uses that image as the icon on a phone’s home screen when someone saves your site there.
Your logo is something else. It sits in your site’s header and can be any shape, often wide and with text. A favicon is shown so small that a full logo with your business name becomes an unreadable smudge. Most businesses use a simplified mark instead: the symbol from the logo on its own, or one or two initials on a solid colour. Changing the header logo is covered in our post on how to change your logo in WordPress.
Prepare the image first
WordPress asks for a site icon that is square and at least 512 × 512 pixels. It then creates the smaller sizes browsers and phones need. Get the source image right and the rest is easy.
- Square. If you upload a rectangle, WordPress offers a crop step, but cropping a wide logo usually cuts off the part that mattered. Make it square yourself.
- PNG is the safe choice. It keeps sharp edges and allows a transparent background. JPG works but cannot be transparent. SVG uploads are blocked by WordPress by default, and an old ICO file is best left out of this setting.
- Simple and bold. Thin lines and small text vanish at tab size. Test your design by shrinking it on screen until it is about the size of your fingernail.
- Think about dark mode. A black mark on a transparent background disappears on a dark browser theme. A light outline or a solid background square avoids that.
If you do not have a square version, our free favicon generator can help you produce a square icon file from your own image.
How to add a favicon in WordPress
The quickest route: Settings → General
Recent versions of WordPress put the Site Icon field on the General settings screen, where it works the same for block and classic themes.
- Go to Settings → General.
- Find the Site Icon row, below the site title and tagline.
- Click Choose a Site Icon, then upload your image or pick it from the Media Library.
- If WordPress shows a crop box, adjust it, or skip cropping when the image is already square.
- Check the preview. WordPress shows how the icon looks in a browser tab and as an app icon.
- Scroll down and click Save Changes. The icon is not stored until you do.
If you do not see the Site Icon row, your WordPress is older or your account cannot upload files. Use one of the routes below.
With a classic theme (Customizer)
- Under Appearance → Customize, choose the Site Identity section. In some themes the section has a slightly different name, but it is the one holding the site title.
- Under Site Icon, click Select Site Icon and choose your image.
- Click Publish at the top of the Customizer panel.
With a block theme (Site Logo block)
Block themes (the default Twenty Twenty-Five, for example) have no Customize item under Appearance. Besides the General settings route, there is a shortcut in the Site Editor:
- Open Appearance → Editor, then click into the header template part (or another template where your logo appears).
- Select the Site Logo block.
- In the block settings on the right, turn on Use as Site Icon, then save.
That option reuses your header logo as the favicon, which only works well if the logo is already square and simple. If it is wide, set a separate icon in Settings → General instead.
When a theme or builder has its own setting
Some premium themes have their own favicon field in the theme options. Where WordPress’s Site Icon is available, prefer it, because it keeps working if you ever change theme. If an icon is set in two places, the page can end up announcing both and you cannot be sure which a browser picks, so set one and clear the other.
Why the old icon is still showing
This is the part that convinces people the setting did not work. Browsers hold on to favicons longer than almost anything else, and several layers of caching can sit between your change and your screen.
- Check in a private window. Open your site in an incognito or private window. If the new icon shows there, the site is fine and your normal browser is showing a stored copy.
- Clear your site’s cache. If you use a caching plugin, or your host or a CDN caches pages, purge it so the page carries the new icon links.
- Clear the browser’s stored icon. A normal refresh often is not enough. Clearing cached images for your site, or simply waiting, will eventually replace it. Bookmarks may keep the old icon until you remove and re-add them.
- Look for an old favicon.ico file. If your hosting’s main folder contains a favicon.ico left from a previous website, some browsers and tools request that file directly. Rename it or replace it with your new icon.
The icon next to your site in search results is a separate matter. Google picks it up when it recrawls your home page, on its own schedule, and there is nothing in WordPress that speeds that up. As long as the icon is set and the home page is not blocked from crawling, give it time.
Mistakes to avoid
- Uploading the full logo. A wide logo squeezed into a square loses everything that made it recognisable.
- Using a tiny source file. A 32-pixel image looks fine in a tab but blurry on a phone home screen. Start at 512 pixels or larger and let WordPress scale it down.
- Deleting the image from the Media Library later. The site icon is a normal media file. If someone tidies the library and removes it, the icon vanishes. Keep it.
- Changing it often. Customers recognise your tab by its icon. Pick one and leave it.
To undo the change, go back to the same Site Icon setting and remove it (the button reads Remove Site Icon on the General screen), or choose a different image. Your header logo is not affected either way.
The site icon is one of the small identity settings an owner looks after. For the rest of the admin area, see our plain-English guide to the WordPress dashboard, and for how these tasks fit together, the WordPress site owner’s handbook.
Frequently asked questions
Can I use a different favicon on different pages?
WordPress has one site icon for the whole site, and that is what visitors expect. Some plugins and custom code can swap it per page, but a changing tab icon tends to confuse people rather than help them. Keep one icon and use the page content itself to set different sections apart.
Do I still need a favicon.ico file in my site folder?
No. WordPress adds the icon links to every page from the Site Icon setting, and recent versions also answer requests for favicon.ico by pointing to your site icon when no such file exists. A real favicon.ico file left in the folder takes priority over that, which is why an old one can keep a previous design alive.
Why does my favicon look blurry on my phone?
Usually the source image was too small or had fine detail. Phones use larger versions for home-screen shortcuts, so a small image gets stretched. Upload a new square image of at least 512 pixels with bold shapes and a solid background, then remove the old home-screen shortcut and add it again to see the change.
I changed theme and the favicon disappeared. What happened?
The old theme probably stored the icon in its own options instead of the WordPress Site Icon setting. Those options do not carry over to a new theme. Set the icon again in the WordPress Site Icon setting, under Settings → General or the Customizer’s Site Identity section, and it will survive future theme changes.
A stubborn old icon, after every cache has been cleared, is usually being served by something outside the Site Icon setting: a theme option, a leftover file or a rule on the server. That is a small job, and one you can hand to our WordPress support service if you would rather not go looking.
Next in this series: WordPress Address and Site Address: Change Them Safely
