WordPress favicon troubleshooting illustration with a missing site icon and magnifying glass

WordPress Favicon Not Showing: Diagnose Site Icon, Cache and HTTPS Problems

by

WordPress favicon not showing in the browser tab, bookmark bar, or mobile shortcut? The problem is usually not the image itself. The Site Icon setting may be empty, the image may not meet WordPress’s requirements, or a browser, page-cache, CDN, theme, or plugin may still be serving an older result.

What WordPress calls a favicon

A favicon is the small image browsers use to identify a website in tabs, bookmarks, history, and some mobile shortcuts. WordPress generally manages this through a setting called Site Icon, so tutorials that say “add a favicon” and tutorials that say “set the Site Icon” are usually describing the same task.

WordPress’s built-in Site Icon feature is preferable to adding several hand-written favicon tags to a theme header. The core feature stores the selected image and outputs the icon markup in the normal WordPress page head. It also gives you one setting to check when the icon disappears.

Start by identifying what is actually missing

Before changing anything, check the symptom in more than one place. Open the live homepage and one individual post in a private window. Then look at the browser tab, bookmark bar, and—if relevant—a newly created phone shortcut.

  • If the icon is missing only in one existing tab, cached browser data may be the whole problem.
  • If it is missing on every page and in a private window, check the Site Icon setting and the page source.
  • If the icon appears on the homepage but not on posts, compare the two pages for a theme template, cache, or URL difference.
  • If the browser shows a broken-image symbol or a request error, test the image URL itself rather than repeatedly re-uploading the file.

This small diagnosis prevents you from changing a working image when the real issue is a cached tab or a broken URL.

1. Set the Site Icon from the correct menu

The menu depends on the WordPress version and the type of theme you use.

  • On WordPress 6.5 or later, open Settings → General and look for the Site Icon control.
  • On older WordPress installations or classic themes, open Appearance → Customize → Site Identity, then find Site Icon.
  • On a block theme, the Site Logo block can provide a “use as site icon” option in the Site Editor.

Choose the image, confirm the crop if WordPress asks for one, and save the setting. Do not stop at selecting the file in the media window—the change must be saved in the settings screen as well.

If you cannot find the control, do not add a random code snippet to the header. First check whether the active theme uses the Customizer or the Site Editor, and check the current WordPress documentation for the interface shown by your installation.

2. Check the image before blaming WordPress

Use a square source image with at least 512 × 512 pixels. A PNG is a practical choice for a simple mark, but the important points are the square shape, a clear subject, and enough contrast at a very small size.

  • Keep the main shape away from the outer edges so the browser’s crop does not remove it.
  • Avoid long words and fine details that become unreadable at tab size.
  • Use one consistent image rather than assigning different icons through several plugins.
  • Do not confuse the site logo setting with the Site Icon setting; they can use the same artwork, but they are separate controls.

WordPress’s documentation says the built-in Site Icon feature does not require you to create a separate favicon.ico file or edit a template. If you have already set the Site Icon, repeatedly uploading a manually named favicon can create competing sources and make troubleshooting harder.

3. Save, then test the live page

After saving, open the public site—not only the Customizer preview—and test an individual post URL. Use a private window or a second browser profile so you are not relying on the current tab’s cached icon.

Close the old tab and open the site again. Browsers can keep a favicon longer than they keep ordinary page content, so a normal refresh may not immediately show a newly selected icon. If the icon appears in a private window but not in your regular profile, the WordPress setting is probably working.

4. Clear the right cache layers

When the icon is correct in WordPress but old or missing in the browser, clear caches in a controlled order.

  1. Test the page in a private window.
  2. Clear the browser’s cached images and files, then restart the browser.
  3. Purge the page or object cache in your WordPress caching plugin if one is active.
  4. If a CDN or reverse proxy is in front of the site, purge the relevant cache there.
  5. Open the site again in a fresh tab and check both the homepage and a post.

Do not change several caching settings at once. If the icon returns after one layer is purged, you have a useful clue and can leave the rest of the site configuration alone.

5. Inspect the live HTML for an icon link

The fastest way to separate “WordPress did not output an icon” from “the browser could not load the icon” is to inspect the live page source or run a small read-only check in the browser console.

document.querySelectorAll('link[rel*="icon"], link[rel="apple-touch-icon"]')

You should see one or more link elements with an href pointing to an image. If there are no matching elements on the live page, return to the Site Icon setting and investigate the theme or plugin output. If a link exists, copy its exact URL and test that URL directly.

Do not treat the presence of a link as proof that the icon works. A link can point to a missing file, a blocked response, an old cached attachment, or an insecure HTTP URL.

6. Test the icon URL and HTTPS

Open the icon URL in a new browser tab. It should load as an image over the same secure HTTPS scheme as the website. Check for these common failures:

  • The URL returns a 404 because the attachment was deleted or moved.
  • The URL redirects to a login page or an HTML error page instead of an image.
  • The URL still begins with http:// while the site runs on HTTPS.
  • A security or hotlink rule blocks the image request.
  • The file loads on one hostname but not the canonical hostname used by the site.

If the page contains an HTTP icon URL on an HTTPS site, review the site’s mixed-content symptoms and correct the source setting or attachment URL. Do not add a second manual icon tag just to hide the original problem. Our guide to WordPress mixed content errors covers the broader HTTPS checks.

7. Rule out a theme or plugin conflict carefully

A theme or plugin can replace head output, add its own favicon setting, or alter image URLs. Test this only with a recent backup and a safe environment when possible. On a live site, avoid disabling several plugins at once because that makes the result difficult to interpret.

Use a staging copy or a maintenance window if you need to test. Change one variable at a time:

  1. Record the current Site Icon URL and the current theme and plugin versions.
  2. Temporarily use the theme’s standard Site Icon path without a separate favicon plugin.
  3. Check the source and image URL again.
  4. If the icon returns, re-enable or restore one component at a time until the conflicting output is identified.

If the issue appears only on one template, compare its source with a normal post rather than changing the entire site. When you are not comfortable with staging or conflict tests, give your host or developer the exact page URL, icon URL, and source result.

8. Replace the attachment only when the evidence points to it

If the Site Icon setting is saved, the live HTML contains an icon link, and that link returns an error, upload a fresh square image. Use a simple filename, select the new attachment in the Site Icon control, save, and retest the new URL.

Keep the old attachment until the new icon is confirmed on the live site. Deleting it too early can turn a cache problem into a broken URL on pages that still reference the old file.

How the WordPress output works

For developers, the WordPress function get_site_icon_url() returns the selected Site Icon URL. The wp_site_icon() function prints the standard icon-related tags, including the browser icon and common device icon sizes. This is why a source check is useful: it tells you whether the problem is before output, at the image URL, or in the browser cache.

Custom themes should preserve the normal WordPress head output. If a theme or custom header removes the standard hooks, the Site Icon setting can appear correct in the dashboard while the public HTML contains no icon link. That is a developer-level issue, not a reason to paste several unrelated favicon snippets into the site.

Common mistakes that waste time

  • Checking only the old browser tab and assuming the saved setting failed.
  • Uploading a rectangular logo and accepting a crop that removes the recognizable part.
  • Changing the site logo while leaving the Site Icon field empty.
  • Purging a page cache but not testing the browser’s separate favicon cache.
  • Opening the image from a logged-in dashboard URL instead of the public URL.
  • Adding multiple favicon plugins with overlapping settings.
  • Ignoring an HTTP icon URL on an HTTPS website.
  • Deleting the old attachment before confirming that every page uses the new URL.

WordPress.com, self-hosted sites, and theme differences

The labels and available controls can differ between WordPress.com, a self-hosted WordPress installation, a classic theme, and a block theme. The underlying check is the same: a saved Site Icon, a valid square image, a live icon link, and a cache that is not serving an older response.

Do not copy instructions for a different environment word for word. If a guide sends you to a menu that is not present, check your WordPress version, active theme type, host cache, and whether a site-management plugin controls the setting.

If the favicon still does not show

Collect evidence before asking for support. Write down the browser and device, the exact public page tested, whether the issue occurs in a private window, the icon URL from the source, and what happens when that URL is opened directly. Also note whether the problem affects every page or only one template.

These details help a host, theme developer, or plugin author reproduce the issue. For the current WordPress menu and feature details, consult the official Create a Favicon documentation and the Customizer documentation.

Questions that often come up when the icon still looks wrong

Is a WordPress Site Icon the same as a favicon?

For most WordPress sites, yes. “Site Icon” is the WordPress setting, while “favicon” describes the browser-facing result. The same setting can also provide icons used by some mobile shortcuts.

Why does the favicon appear in a private window but not my normal browser?

That pattern usually points to cached browser data. Clear the normal profile’s cached images and files, close the old tab, and open a new tab. If the icon is still absent, repeat the source and URL checks.

Do I need to upload a file named favicon.ico?

Usually not when the built-in Site Icon feature is available. WordPress’s documentation recommends using that feature instead of manually modifying a template. A custom implementation may have different requirements, so confirm the theme or platform documentation before adding files.

Related Today Tip guides

Official information

If this guide helped you find the missing icon, the most useful next step is to record which layer caused the problem—setting, image URL, cache, theme, or plugin. If you still have a question, leave it in the comments and include the exact symptom you see.

Leave a Comment