How to Add or Change a Favicon in WordPress

In WordPress, the favicon is called the Site Icon. You set it by uploading one square image through the dashboard rather than by editing theme files. In a classic theme, go to Appearance, then Customize, then Site Identity, and use the Site Icon control. In a block theme, the usual route is the Site Logo block in the Site Editor, which has an option to use the logo as the site icon. Either way, WordPress takes your single upload and generates the smaller copies that browsers and devices request.

A favicon is the small symbol shown in browser tabs, bookmarks and history lists. Phones and tablets use a larger version when someone saves the site to a home screen. Because the same artwork has to work from a few pixels wide up to an app-style tile, the quality of the logo file you start with matters as much as the upload steps.

What WordPress Expects From the Image

The Site Icon control asks for a square image. The Customizer's own guidance states a minimum of 512 by 512 pixels. If the image you upload is not square, WordPress opens a cropping step. The control works with the raster image formats the Media Library accepts, such as PNG and JPEG. Core WordPress does not accept SVG uploads by default, so a vector file cannot be used directly through this setting.

Vector artwork is built from mathematically defined paths, so it can be scaled to any size without losing sharpness. Raster artwork is a fixed grid of pixels. The practical workflow is to keep your logo as a vector master in a format such as AI, EPS, PDF or SVG, and export a raster PNG from it for WordPress. A file extension alone does not prove that a file contains clean, editable vector paths. It also does not prove you have permission to reuse a logo, so check both before you prepare the icon.

Preparing Logo Artwork for a Favicon

Before you upload anything, prepare an icon-specific version of the logo. A full horizontal lockup with a wordmark will usually shrink into an unreadable smudge at tab size. The steps below are design recommendations, not WordPress requirements.

• Pick the most distinctive single element of the logo: a symbol, monogram or initial. Drop taglines and long wordmarks.
• Place it on a square artboard and centre it optically, not just mathematically. Leave some padding so it does not touch the edges, and remember that some devices crop icons into rounded shapes.
• Simplify the paths. Remove fine details, thin hairlines and small counters (the enclosed spaces inside letters like o or e) that fill in at small sizes. Thicken strokes where needed.
• If the mark includes lettering, convert the type to outlines. Outlining turns live text into fixed vector shapes so the result does not depend on the font being installed. Then adjust letter spacing and weight by eye for the small size.
• Convert strokes to filled shapes so line thickness does not change unexpectedly when the artwork is scaled during export.
• Reduce the palette to a few high-contrast colours. Subtle gradients and low-contrast tints tend to disappear in a browser tab.
• Export a square PNG at 512 by 512 pixels or larger. Decide whether to use a transparent background or a solid shape behind the mark. Transparency looks clean on light tabs but can vanish on dark ones, as covered in the next section.

Before uploading, preview the PNG scaled down to roughly favicon size in an image viewer or design app. This will show you whether the mark is still recognisable. If it is not, simplify further rather than relying on the larger home-screen version to carry it.

Planning for Dark Mode

The WordPress Site Icon setting accepts one image. Core WordPress provides no built-in field for a separate dark-mode favicon. Browsers in dark mode may show your icon on a dark tab bar. A dark mark on a transparent background can then become nearly invisible.

The most dependable approach within the standard setting is to design one icon that reads on both light and dark backgrounds. These are design recommendations:

• Place the mark inside a solid background shape, such as a filled square, rounded square or circle, in your brand colour. This keeps the contrast fixed whatever the browser theme is.
• Alternatively, add a thin light outline or a contrasting keyline around a dark mark so its silhouette survives on dark tabs.
• Avoid pure black or very dark navy marks on transparency unless they sit on a background shape.
• Test the exported PNG against both a white and a near-black backdrop before uploading.

A true colour-switching favicon is also possible. You use an SVG icon that contains a prefers-color-scheme media query, which changes its colours to match the system theme. This sits outside the standard Site Icon control. It needs theme code or a plugin to output the SVG favicon tag, and browser support for SVG favicons and for this behaviour varies. Keep a PNG Site Icon in place as the fallback. The style block inside such an SVG typically looks like this:

<style>
  path { fill: #1a1a1a; }
  @media (prefers-color-scheme: dark) {
    path { fill: #ffffff; }
  }
</style>

If you go this route, export the SVG from your vector master with outlined text and no embedded raster images. Check that the file opens correctly on its own before wiring it into the theme.

Which Route Applies to Your Site

Theme type | Where to set the favicon | Notes

Classic theme | Appearance, then Customize, then Site Identity, then Site Icon | Changes are previewed and only go live after you publish

Block theme | Site Editor, Site Logo block settings, use as site icon option | The Customize menu item is often hidden for block themes

Recent releases | Possibly also under Settings, then General | Check your own dashboard, as this placement depends on the version

The Site Icon feature has been part of core WordPress since well before the 4.9 and 5.x releases. The Customizer route has stayed broadly the same across the 4.9, 5.x and 6.x versions people commonly search for. Version differences mostly affect where the control appears, especially since block themes and the Site Editor arrived in the 5.9 era. The material supplied for this guide does not confirm exactly which release introduced each placement. Treat the menu locations below as a guide and confirm them against your own dashboard.

Adding or Changing the Favicon in a Classic Theme

Starting conditions: you are logged in with an account that can change site appearance (normally an Administrator), and you have your prepared square PNG ready.

• In the dashboard, open Appearance and choose Customize.
• Open the Site Identity panel. Some themes rename or relocate this panel; look for a section containing the site title and tagline.
• Find Site Icon and click Select site icon. If an icon is already set, the button reads Change image instead.
• Upload your PNG or pick it from the Media Library, then confirm the selection.
• If the image is not square, adjust the crop box, then crop. If it is already square, you can usually skip cropping.
• Check the preview in the panel, which shows how the icon will look in a browser tab and as an app icon.
• Click Publish. In versions with Customizer scheduling options, make sure you choose to publish now rather than save a draft or schedule.

To replace an existing favicon, follow the same steps and use Change image. To remove it entirely, use the Remove option in the same control and publish.

Adding or Changing the Favicon in a Block Theme

• Open Appearance and choose Editor to launch the Site Editor.
• Open a template or template part that contains the Site Logo block, typically the header.
• Select the Site Logo block. If no logo is set, upload your image to it.
• In the block settings sidebar, turn on the option to use the logo as the site icon.
• Save your changes in the Site Editor.

This option links the favicon to the site logo image. That image is often a horizontal lockup, which may not suit a small square icon. If your header logo is not square, or will not read at tab size, use a different route so you can upload a dedicated icon image. That could be the Site Icon control under General Settings, if your version provides it, or the Customizer, if a plugin or your setup exposes it. The supplied material does not verify the exact control labels in every 6.x release, so the wording on your screen may differ slightly.

Confirming the Change

• Open the site in a private or incognito window. Browsers cache favicons aggressively, so a normal tab may keep showing the old icon for some time.
• Hard-refresh the page, or clear the browser cache if the old icon persists.
• View the page source and look for link tags with rel values such as icon and apple-touch-icon in the head section. They should point to newly generated copies of your image.
• If you use a caching plugin, server cache or content delivery network, purge it after changing the icon.
• Check the tab in both light and dark browser themes to confirm the icon stays visible.
• If possible, save the site to a phone home screen to check the larger icon and how any rounded cropping affects it.

When the Old Favicon Keeps Appearing

If the source code shows more than one set of icon tags, something besides core WordPress is outputting a favicon. Common causes are theme options panels with their own favicon field, SEO or performance plugins, and favicon-specific plugins. Remove or disable the duplicate setting so only one source controls the icon.

Some browsers also request a file named favicon.ico from the root of the site, regardless of the tags in the page. If an old favicon.ico file sits in the site's root directory, it can keep appearing in some contexts. Replace it with an export of the new icon, or delete it after confirming nothing else depends on it. Back up the file before removing it, since it lives outside WordPress and the dashboard cannot restore it.

Gaps in This Guide

No version-specific documentation was supplied for this article. The release that added each block-theme or General Settings placement, and the exact control labels in individual 6.x releases, are therefore unverified. The full list of icon sizes WordPress generates is also not covered here. Browser support for SVG and colour-switching favicons changes over time, so test on the browsers your audience actually uses.