How to Add a WordPress Favicon (Beginner-Friendly Guide)

Key Takeaways

• A WordPress favicon improves site recognition across browser tabs, bookmarks, and mobile shortcuts.
• WordPress handles favicons through the Site Icon setting without requiring code or theme edits.
• The favicon location varies by setup and may appear in General Settings, the Customizer, or the Site Editor.
• Most favicon display issues are caused by browser or server caching rather than incorrect setup.

You load your site and the icon in the browser tab looks almost too familiar. It is generic and looks like every other WordPress site you have open.

When multiple tabs are open, your site blends in instead of standing out.

That small icon matters more than it seems.

A WordPress favicon is the visual marker people use to find your site at a glance. It helps returning visitors spot the right tab faster. It makes bookmarks recognizable. It gives your site a finished look without changing the design.

Adding one is not a design project. It is not a code task either.

The option to add a favicon is already there, but it is not always easy to find. Depending on the setup, it may sit in General Settings, the Customizer, or the Site Editor.

If the option feels hard to find, that is normal. The sections below walk through where it appears, how to upload the icon correctly, and what to check when the change does not show up right away.

What Is a WordPress Favicon?

A WordPress favicon is the small icon shown next to your site title in a browser tab. It also appears in bookmarks, browser history, mobile shortcuts, and search results.

WordPress refers to this icon as the Site Icon. Once set, WordPress automatically generates the sizes needed for different browsers and devices.

Although the icon appears small, it carries weight. When tabs are crowded, people rely on icons more than titles to find what they are looking for. The same applies to bookmarks and saved links.

A favicon does not change how the site functions. It does not affect layout, content, or performance. It only changes how your site is identified visually across browsers and platforms.

Because WordPress handles this at the core level, adding a favicon does not require editing theme files or uploading multiple icon sizes manually. The main challenge is knowing where the setting lives and using the right image.

That is what the next sections cover.

Where a WordPress Favicon Appears (Tabs, Bookmarks, Mobile, Search)

A favicon is not limited to the browser tab. Once it is set, WordPress uses it across several touchpoints where people interact with your site.

You will see it in these places:

• Browser tabs, next to the page title
• Bookmarks and saved links
• Browser history entries
• Mobile shortcuts added to a home screen
• Search results in some browsers and devices, where supported by the search engine

When tabs are compressed, the page title often disappears. The icon remains. That is why the favicon becomes the primary way users recognize the site they want to return to.

Bookmarks work the same way. Most people scan icons first and text second. A custom favicon makes saved links easier to spot and avoids confusion when several WordPress sites are bookmarked.

On mobile devices, the favicon is reused as an app-style icon when someone saves the site to their home screen. A generic icon makes the shortcut easy to ignore. A recognizable one gets tapped.

Because the same icon is reused in all these places, choosing and setting it correctly matters. The next section explains what image size and format WordPress expects so it displays cleanly everywhere.

WordPress Favicon Image Size and Format

The icon may appear small in the browser, but the file you upload should not be.

WordPress asks for a square image that is large enough to scale down cleanly. The minimum size it accepts is 512 × 512 pixels. Anything smaller risks looking soft or uneven once WordPress generates the smaller versions.

A square layout matters. Rectangular images force cropping, which often cuts into logos or leaves awkward spacing. Starting with a square avoids guesswork later.

Background choice depends on the icon itself. Some designs work best with transparency. Others rely on a solid background to stay visible across light and dark browser themes.

PNG is usually the safest format. It keeps edges crisp when resized and handles transparency without artifacts. There is no need to convert the file into special favicon formats. WordPress takes care of that after upload.

Design complexity does not translate well at small sizes. Fine lines, small text, or layered elements blur together once the icon shrinks. Simple shapes with clear contrast remain readable when space disappears.

Before uploading, zoom the image out until it feels uncomfortably small. If it still reads clearly, it will work in a browser tab.

With the image ready, the next step is placing it inside WordPress. Where that option appears depends on the theme and editor in use, which is why the process looks different across sites.

How to Add a WordPress Favicon Using General Settings

On some newer WordPress setups, the favicon option appears inside General Settings rather than the Customizer.

From the WordPress dashboard:

• Open Settings → General
• Scroll until you see Site Icon
• Click Choose a Site Icon
• Select the image you prepared earlier or upload a new one
• Adjust the crop if prompted
• Save the page

WordPress checks the image shape automatically. If the image is not perfectly square, a crop screen appears so you can adjust it before confirming.

The change applies immediately at the application level. If the old icon still appears, it is almost always a caching issue rather than a failed upload.

This method works well for most standard setups and does not depend on theme features. If the Site Icon option is missing here, the site is likely using an older version or a theme that routes favicon control elsewhere.

That is where the Customizer comes in next.

How to Add a WordPress Favicon Using the Customizer

Some themes still handle favicon settings through the Customizer. This is common on classic themes and older installations.

From the WordPress dashboard:

• Go to Appearance → Customize
• Look for Site Identity
• Scroll until you see Site Icon
• Select or upload the image you want to use
• Click Publish to save the change

WordPress applies the same size and crop rules here as it does in General Settings.

If the icon does not update right away in the browser tab, do not reupload it yet. Open the site in a private window or clear the browser cache first. The Customizer saves correctly, but browsers are slow to drop old icons.

If Site Identity does not appear at all, the theme may be using the newer Site Editor instead. In that case, the favicon setting moves again.

The next section covers that layout.

How to Add a WordPress Favicon Using the Site Editor

Block themes handle site-wide elements differently. Instead of the Customizer, they use the Site Editor.

From the WordPress dashboard:

• Open Appearance → Editor
• Open the header template where the site logo appears
• Select the Site Logo block
• Enable the option to use the logo as the site icon
• Save the change

When this option is enabled, the theme may use the Site Logo image as the Site Icon.

This behavior is theme-dependent. The favicon is still stored as the Site Icon setting, and if a Site Icon is already set elsewhere, enabling this option may override or sync with it depending on the theme.

After saving, refresh the site and check the browser tab.

This method works best when the favicon and logo are meant to match. If the site uses a different icon than the header logo, the General Settings or Customizer approach offers more control.

If none of these options are available, or if the theme overrides favicon behavior entirely, a plugin can bridge the gap.

How to Add a WordPress Favicon Using a Plugin

Some setups do not expose the favicon setting clearly, especially on heavily customized themes or older builds. A plugin helps when the built-in options feel limited or unavailable.

After installing a favicon plugin:

• Open its settings page from the dashboard
• Upload a square image
• Preview how it looks at small sizes
• Save and apply

Once enabled, the plugin handles browser compatibility and updates the icon references automatically.

This option makes sense when managing multiple sites, handling device-specific icons, or working around theme restrictions. It also avoids editing theme files directly, which keeps changes safe during updates.

If the icon still does not appear after saving, clear the browser cache and any active site cache before troubleshooting further.

Manual uploads exist as an option, but they are rarely necessary unless the setup blocks all other methods.

How to Manually Add a WordPress Favicon (Advanced)

Manual setup is the fallback option. It is useful when theme settings hide favicon controls or when a specific file structure is required.

Start by preparing the favicon files. A single PNG can work, but many site owners generate a full favicon set using an online generator. This creates multiple icon sizes and a small block of HTML code.

The basic manual process looks like this:

• Upload the favicon files to the root directory of the site, such as the folder that contains wp-admin and wp-content
• Add the icon reference inside the site header
• Save the changes and refresh the site

This step is only necessary for legacy setups or custom server configurations. Modern WordPress sites do not require favicon files in the root directory when the Site Icon is set through WordPress settings.

For adding the header code, the safest approach is using a header injection tool or a code snippets plugin, not editing theme files directly. This prevents the icon from disappearing during theme updates.

Paste the provided <link rel=”icon”> tags into the header section and save the changes.

Once the files are in place and the header is updated, refresh the site and check the browser tab. If the old icon still shows, clear the browser cache before repeating any steps.

Manual setup offers full control, but it also adds maintenance overhead. For most sites, WordPress core settings or the Customizer are easier and safer.

If the icon still does not appear after manual setup, the issue usually lies outside WordPress itself.

Why Your WordPress Favicon Is Not Showing (Common Fixes)

A missing favicon usually means the icon is set correctly but not loading where you expect it to.

The most common causes are related to caching and browser behavior:

• Browser caching: Browsers cache favicons aggressively. Even after an update, they often continue showing the old version. Open the site in a private window or clear the browser cache before assuming something is broken.
• Site or CDN caching: If the site runs behind a CDN or server-level cache, purge it once after changing the icon. Otherwise, the old file may keep loading from the cache instead of the updated source.
• File name conflicts: Browsers sometimes store a favicon under a previous file name and ignore replacements. Uploading the icon again with a slightly different file name often forces a refresh.
• Mixed content issues: If the site loads over HTTPS but the favicon URL points to HTTP, modern browsers may block it silently. Check that the icon URL matches the site protocol.
• Theme overrides: Some themes include their own icon settings that take priority over WordPress core options. Review the theme settings if the icon keeps reverting or fails to update.

If none of these steps help, check the page source. A favicon should appear inside the <head> section. If it does not, something in the theme or plugin stack is removing it.

Once the icon displays correctly, it rarely needs attention again unless branding changes.

Best Practices for Using a WordPress Favicon

Once the favicon is in place, a few small checks help it work consistently across browsers and devices.

• Keep the design minimal. The icon displays at very small sizes, often as low as 16 × 16 pixels. Simple shapes and clear contrast remain recognizable when space disappears.
• Test it in different environments. Open the site in multiple browsers, check bookmarks, and view it on mobile. Dark mode can affect visibility, so confirm it still stands out against darker backgrounds.
• Avoid frequent changes. Browsers cache favicons heavily, which means updates take time to propagate. Changing the icon often can create confusion during branding updates or launches.
• Use a single source of truth. If the favicon is set through WordPress settings, avoid adding manual icon references elsewhere. Multiple definitions increase the chance of conflicts.
• Reliable hosting also helps here. Server-side caching, CDN behavior, and correct header handling affect how quickly favicon updates appear. Platforms like Cloudways manage these layers in a WordPress-friendly way, which reduces edge cases without adding extra configuration.

With the icon set and verified, the site gains a small but noticeable branding upgrade that works quietly in the background.

Do WordPress Favicons Affect SEO?

A favicon does not directly change rankings.

Search engines do not treat it as a ranking signal, and adding one will not move a page higher on its own. That said, favicons still play a role in how a site performs in search results.

When a favicon appears next to a site name in browser tabs, bookmarks, or search interfaces, it improves recognition. Visitors scanning multiple tabs or results can identify the site faster, which reduces friction.

Clear visual cues support better engagement. Better engagement supports stronger signals over time.

That is where the value sits. Not in rankings alone, but in how easily people return to the site once they recognize it.

How to Remove or Replace an Existing WordPress Favicon

Replacing a favicon follows the same path as adding one.

Open the section where the icon is currently set, whether that is General Settings, the Customizer, or the Site Editor. Select a new image and save the change.

To remove it entirely, clear the Site Icon field and save. WordPress falls back to a default icon when no custom one is set.

After removal or replacement, clear the browser cache and any site-level cache once. Without that step, the old icon may continue to appear even though the setting is correct.

Replacing an icon does not affect content or layout. It only updates the visual marker used across tabs and shortcuts.

Final Thoughts

A WordPress favicon is easy to overlook because it lives outside the main layout.

It does not affect pages, colors, or typography. Yet it changes how the site feels when viewed alongside others. The difference shows up in browser tabs, bookmarks, and repeat visits.

The setup does not require design work or code changes. WordPress already includes the tools. The only challenge is knowing where the option lives on a specific site.

Once the icon is in place and verified, it becomes part of the site’s identity without asking for attention again.

Small detail. Lasting effect.