Favicon for WordPress: How to Add, Change, and Troubleshoot Your Site Icon

WordPress has its own way of handling favicons—and it's both simpler and more frustrating than you might expect.

Since version 4.3 (released way back in 2015), WordPress has called favicons "Site Icons" and baked support directly into the core platform. No plugins required. Just upload an image through the Customizer, and WordPress handles the rest.

At least, that's how it's supposed to work.

In reality, WordPress favicon implementation comes with quirks. Theme conflicts. Caching layers. Plugin interference. And that nagging feeling that something should be showing up in your browser tab but isn't.

This guide covers everything: the official WordPress way to add favicons, manual methods for when you need more control, troubleshooting the most common WordPress-specific issues, and the mistakes I see WordPress site owners make over and over again.

Understanding WordPress Site Icons

Before diving into implementation, let's clarify what WordPress actually does when you upload a Site Icon.

When you add an image through the WordPress Customizer, the platform doesn't just create a favicon. It generates multiple versions:

32x32 favicon — For browser tabs
180x180 Apple Touch Icon — For iOS home screens
192x192 Android icon — For Android home screens
270x270 Windows tile — For Windows Start menu tiles
512x512 PWA icon — For Progressive Web App manifests

WordPress creates all these automatically from your single uploaded image. It also generates the necessary HTML <link> tags and injects them into your site's <head> section.

This automation is genuinely helpful. But it also means you're giving up some control. If you need dark mode variants, custom sizes, or SVG favicons, the built-in system won't cut it.

Method 1: The WordPress Customizer (Recommended for Most Users)

The Customizer method works for 90% of WordPress sites. Here's the step-by-step process:

Step 1: Prepare Your Image

WordPress requires a minimum of 512x512 pixels for Site Icons. The platform will crop and resize from there.

For best results:

Use a square image (1:1 aspect ratio)
Upload at 512x512 or larger
Use PNG format with a transparent background
Keep the design simple—remember, this will be viewed at 16x16 and 32x32 pixels

If your logo doesn't work well at tiny sizes, consider using just an icon, lettermark, or simplified version. A complex full logo will become an unrecognizable smudge in browser tabs.

Step 2: Access the Customizer

Navigate to Appearance → Customize from your WordPress dashboard.

In the Customizer panel, click Site Identity. This section handles your site title, tagline, logo, and Site Icon.

Step 3: Upload Your Site Icon

Click Select site icon and either choose an existing image from your Media Library or upload a new one.

If your image isn't perfectly square, WordPress will prompt you to crop it. Use the crop tool to select the region you want to use.

Step 4: Preview and Publish

The Customizer shows a live preview of how your site icon will appear. Check it carefully—what looks fine in the preview might not be what you expect at actual favicon size.

Click Publish to save your changes.

Step 5: Verify Implementation

Open your site in a new browser tab (or an incognito window to avoid cache issues). You should see your favicon in:

The browser tab
The bookmark bar (if bookmarked)
The browser history

Also test on mobile. Save your site to your phone's home screen and verify the icon appears correctly.

Method 2: Manual HTML Implementation

Sometimes the Customizer isn't enough. Maybe your theme overrides Site Icons. Maybe you need SVG support. Maybe you want granular control over every favicon size.

Here's how to add favicons manually in WordPress.

Option A: Using functions.php

Add this code to your theme's functions.php file (or better yet, a child theme's functions.php):

function custom_favicon_links() {
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri(); ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri(); ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png">
    <link rel="icon" type="image/svg+xml" href="<?php echo get_template_directory_uri(); ?>/favicon.svg">
    <?php
}
add_action('wp_head', 'custom_favicon_links');

Upload your favicon files to your theme directory, and the links will be injected into your <head> section.

Option B: Using a Child Theme's header.php

If you need even more control, copy your parent theme's header.php to your child theme and add the favicon links directly in the <head> section.

This approach is more invasive but gives you complete control over placement and ordering.

Option C: Disable WordPress Site Icon and Go Manual

If you're using manual favicons but WordPress keeps injecting its own, add this to functions.php:

function remove_wp_site_icon() {
    remove_action('wp_head', 'wp_site_icon', 99);
}
add_action('init', 'remove_wp_site_icon');

This prevents WordPress from outputting Site Icon links, letting your manual implementation take over.

Method 3: Theme-Specific Favicon Settings

Many WordPress themes include their own favicon settings, completely separate from the WordPress Customizer.

Check these locations in your theme:

Theme Options panel (often under Appearance)
Theme Customizer sections (separate from Site Identity)
General Settings within theme-specific dashboards

Popular theme frameworks and where they hide favicon settings:

Theme/Framework	Favicon Location
Astra	Customizer → Site Identity
Divi	Divi → Theme Options → General
Elementor	Site Settings → Site Identity
GeneratePress	Customizer → Site Identity
OceanWP	Customizer → General Options → General
Avada	Avada → Theme Options → Logo → Favicon

If your theme has dedicated favicon settings, use those instead of the WordPress Customizer. Theme settings often override core WordPress functionality, so using both can cause conflicts.

WordPress Block Themes (Full Site Editing)

If you're using a block theme with Full Site Editing (FSE), the process is slightly different.

Navigate to Appearance → Editor to open the Site Editor. Click the site icon in the header (or wherever your theme places it), then look for the Site Logo block settings.

Alternatively, block themes still respect the traditional Customizer method. Go to Appearance → Customize → Site Identity and upload your Site Icon there.

The Site Icon you set in the Customizer will apply site-wide, regardless of how your block theme templates are configured.

Adding a Favicon to WordPress Multisite

WordPress Multisite adds complexity. Each site in your network can have its own favicon, but there are caveats.

For individual sites: Each site admin can set their own Site Icon through their Customizer. This works exactly like single-site WordPress.

For network-wide favicons: There's no built-in way to set a favicon across all network sites. You'll need a plugin or custom code.

Here's a simple approach using functions.php in a network-activated theme:

function network_default_favicon() {
    // Only apply if the site doesn't have its own Site Icon
    if (!has_site_icon()) {
        ?>
        <link rel="icon" href="<?php echo network_site_url('/favicon.ico'); ?>" sizes="32x32">
        <link rel="icon" href="<?php echo network_site_url('/favicon.svg'); ?>" type="image/svg+xml">
        <?php
    }
}
add_action('wp_head', 'network_default_favicon');

Place your network-wide favicon files in the root of your main site's directory.

WordPress Favicon Troubleshooting

Favicons not showing up in WordPress? Let's diagnose the issue.

Problem: Favicon Not Appearing After Upload

Check 1: Clear all caches

WordPress caching is aggressive. Clear:

Your browser cache (Ctrl+Shift+Delete or Cmd+Shift+Delete)
WordPress caching plugin cache (W3 Total Cache, WP Super Cache, WP Rocket, etc.)
CDN cache (Cloudflare, StackPath, KeyCDN)
Server-level cache (if your host uses Varnish, Redis, or similar)

Check 2: Verify the image uploaded correctly

Go to Media Library and find your uploaded Site Icon image. Click on it and verify:

The URL is accessible
The image dimensions are correct
No PHP errors appear

Check 3: Inspect the HTML source

View your page source (Ctrl+U or Cmd+U) and search for rel="icon". You should see something like:

<link rel="icon" href="https://yoursite.com/wp-content/uploads/2024/01/cropped-your-icon-32x32.png" sizes="32x32">

If the link tags aren't there, your theme might be suppressing them or a plugin is interfering.

Problem: Old Favicon Keeps Showing

This is almost always a caching issue, but an aggressive one.

Nuclear option: Add a cache-busting query string to your favicon URL. In functions.php:

function cachebust_favicon($html) {
    $version = '?v=' . time(); // Or use a manual version number
    return str_replace('.png"', '.png' . $version . '"', $html);
}
add_filter('site_icon_meta_tags', 'cachebust_favicon');

This forces browsers to fetch a fresh copy. Remove this code once the new favicon is propagating correctly.

Problem: Theme Overriding Site Icon

Some themes hardcode their own favicon links or ignore WordPress Site Icons entirely.

Diagnosis: Search your theme's code for rel="icon" or favicon. Check header.php, functions.php, and any theme options files.

Solution: Either use the theme's built-in favicon setting (if it has one) or add a filter to remove the theme's favicon before adding your own.

Problem: Favicon Shows on Desktop but Not Mobile

Mobile browsers have stricter caching and may require specific icon formats.

Ensure you have an Apple Touch Icon specified:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

WordPress generates this automatically from Site Icons, but verify it's present in your source code.

Problem: White Background Appearing Around Transparent Favicon

WordPress sometimes adds a white background when processing transparent PNGs. This is particularly common with older WordPress versions or certain image library configurations.

Solution: Upload your favicon at exactly 512x512 pixels to avoid WordPress's crop/resize processing. Or use manual implementation with pre-processed favicon files.

WordPress Favicon Best Practices

After working with hundreds of WordPress sites, here's what separates professional favicon implementations from amateur ones:

Use a Dedicated Favicon Image

Don't just upload your full logo and expect WordPress to make it work. Create a dedicated favicon version that's been designed specifically for small sizes. This might mean:

Using just your logo's icon element
Creating a lettermark (first letter or initials)
Simplifying shapes and removing fine details
Increasing contrast for better visibility

Test Across Browsers and Devices

WordPress auto-generates multiple sizes, but you should verify each one looks correct:

Desktop Chrome, Firefox, Safari, Edge
iOS Safari (save to home screen)
Android Chrome (save to home screen)
Windows 10/11 (pin to Start menu)

Keep Original Files Organized

Save your original, high-resolution favicon source file somewhere you can find it. You'll need it when:

Rebranding or updating your icon
Migrating to a new theme
Setting up a staging environment
Creating variations for different platforms

Consider Performance

Favicons are small files, but they're requested on every page load. WordPress Site Icons are served from your uploads directory, which means:

They benefit from your CDN (if configured)
They can be compressed with your image optimization plugin
They might be blocked if your uploads directory has issues

Add a Fallback favicon.ico

Some older systems and browsers still look for favicon.ico in your root directory. While modern WordPress handles this, having a manual fallback doesn't hurt:

Upload a favicon.ico file to your WordPress root directory (via FTP/SFTP or your hosting file manager). This serves as a fallback for edge cases.

When to Use a WordPress Favicon Plugin

I generally recommend the built-in Site Icon feature for most users. But plugins make sense in specific scenarios:

Use a plugin if:

You need SVG favicon support with dark mode media queries
You're managing favicons across a large multisite network
Your theme conflicts with WordPress Site Icons
You need advanced features like animated favicons

Don't use a plugin if:

The WordPress Customizer method works fine for you
You're trying to solve a problem that's actually a caching issue
You're adding complexity without clear benefit

Creating the Perfect WordPress Favicon

Having the technical implementation right is only half the battle. You also need a favicon that actually works—one that's recognizable at 16x16 pixels and reinforces your brand every time someone sees their browser tabs.

If you're struggling to create a favicon that works at tiny sizes, try generating some ideas with our AI-powered favicon generator. You'll get dozens of unique concepts instantly, each designed with small-scale legibility in mind. Find one you like, download it in all the sizes WordPress needs, and you're ready to implement.

Frequently Asked Questions

What size should a WordPress favicon be?

Upload at least 512x512 pixels. WordPress requires this minimum size and will automatically generate all the smaller versions (32x32, 180x180, etc.) needed for different browsers and devices.

Why isn't my WordPress favicon updating?

The most common cause is browser or server caching. Clear your browser cache, any WordPress caching plugins, your CDN cache, and server-level cache. Then hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to see the new icon.

Can I use an SVG favicon in WordPress?

WordPress's built-in Site Icon feature doesn't support SVG. For SVG favicons, you'll need to manually add the appropriate <link> tags through your theme's functions.php or use a plugin that supports SVG favicon implementation.

Does WordPress automatically create all favicon sizes?

Yes. When you upload a Site Icon through the Customizer, WordPress generates versions at 32x32, 180x180 (Apple Touch Icon), 192x192, 270x270, and 512x512 pixels—covering the most common use cases for modern browsers and devices.

Where does WordPress store the favicon file?

WordPress stores Site Icons in your uploads directory (wp-content/uploads/). The files are named with "cropped-" prefix and the dimensions, like cropped-my-icon-32x32.png. You can find them in your Media Library.