How to Add a Favicon to Your WordPress Site

Adding a favicon to WordPress takes about 30 seconds: go to Appearance → Customize → Site Identity → Site Icon, upload a 512x512 PNG, and hit Publish. Done.

But if that doesn't work — or you want more control — keep reading. There are a few gotchas worth knowing about.

The Quick Way: WordPress Customizer

This works on every WordPress site running version 4.3 or later (released in 2015). If you're on a remotely recent version, you have this option.

Step 1: Open the Customizer

• Go to Appearance → Customize in your WordPress admin
• Or click "Customize" in the admin bar while viewing your site

Step 2: Find Site Identity

• Click Site Identity in the Customizer sidebar
• Scroll down to Site Icon

Step 3: Upload Your Image

• Click Select site icon
• Upload a PNG image at least 512 x 512 pixels
• WordPress will auto-generate all the smaller sizes it needs (including 32x32, 180x180, etc.)
• Crop if prompted, then click Publish

That's it. WordPress handles the rest — it creates the <link> tags for browser favicons, Apple touch icons, and even the Windows tile image.

The Code Way: Adding Favicon Manually

Sometimes the Customizer approach doesn't cut it. Maybe you're building a custom theme, or your theme overrides the default behavior. Here's how to add it with code.

Option A: Drop Files in Your Theme

Upload your favicon files to your theme's root directory, then add this to your theme's functions.php:

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

Option B: Use an SVG Favicon

SVG favicons scale perfectly and support dark mode. Add this to functions.php:

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

The PNG fallback is there for Safari, which still doesn't fully support SVG favicons.

Using a Plugin (If You Prefer)

Several plugins handle favicons, but honestly? The built-in Customizer works fine for most sites. Plugins make sense if you need:

• Different favicons per page or post
• A/B testing different icons
• Multisite with per-site favicons

Popular options include All in One Favicon and Flavor (formerly flavicon). But again — try the Customizer first.

WordPress Block Themes (Full Site Editing)

If you're using a block theme like Twenty Twenty-Four or Twenty Twenty-Five, the process is slightly different:

1. Go to Appearance → Editor
2. Click Styles (the half-circle icon)
3. Navigate to your site's global styles
4. The Site Icon setting is still under Appearance → Customize → Site Identity

Block themes still use the same Customizer for the favicon. WordPress hasn't moved this into the Site Editor yet.

Recommended Favicon Files

For complete coverage, prepare these files:

WordPress Customizer handles most of these automatically when you upload a 512x512 image. The SVG and ICO files need to be added manually if you want them.

Troubleshooting: Favicon Not Showing

Clear Everything

WordPress favicon issues are almost always caching:

1. Browser cache: Hard refresh with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
2. WordPress cache: If you use WP Super Cache, W3 Total Cache, or LiteSpeed Cache — purge it
3. CDN cache: Cloudflare, Fastly, or whatever you use — purge the favicon URLs
4. Try incognito: Opens a clean session with no cached files

Check for Plugin Conflicts

Some SEO plugins and theme frameworks inject their own favicon tags. If you see duplicate <link rel="icon"> tags in your page source:

1. View page source (Ctrl+U)
2. Search for "icon" or "favicon"
3. If there are duplicates, check which plugin is adding them
4. Disable the plugin's favicon feature, or remove your manual code

Theme Override Issues

Some themes (especially premium ones) have their own favicon settings that override the Customizer. Check:

• Theme Options panel for a favicon setting
• The theme's header.php for hardcoded <link rel="icon"> tags
• Theme documentation for favicon instructions

Troubleshooting: Google Shows Wrong Favicon

Google can take days to weeks to update favicons in search results. Here's how to speed it up:

Google's Favicon Requirements

Google has specific rules for showing favicons in search results:

• Must be a multiple of 48px (48x48, 96x96, 144x144)
• Must be square
• Must not be inappropriate or NSFW content
• Must represent the website (not a generic icon)

Speed Up the Update

1. Make sure your favicon is live and accessible
2. Open Google Search Console
3. Use URL Inspection on your homepage
4. Click Request Indexing
5. Wait — it typically takes 1-2 weeks

Troubleshooting: Favicon Shows on Desktop but Not Mobile

Mobile browsers are pickier about favicon formats:

• iOS Safari: Needs apple-touch-icon (180x180) — the regular favicon won't show on the home screen
• Android Chrome: Looks for manifest.json with icon references for the home screen
• PWA: Needs both 192x192 and 512x512 icons defined in the web app manifest

If your WordPress site has a web app manifest (some themes and plugins add one), make sure the icon paths in it are correct.

Multisite Considerations

Running WordPress Multisite? Each site needs its own favicon.

• The Customizer is per-site, so each subsite can have its own icon
• Network-level settings don't include a default favicon
• If you want a network-wide default, add it via functions.php in a must-use plugin (wp-content/mu-plugins/)

Best Practices

• Start big: Upload at least 512x512 — WordPress scales down, never up
• Use PNG: Transparent backgrounds work better than JPEG
• Keep it simple: Your favicon is tiny — complex logos won't read at 16x16
• Test across browsers: Use Favicon.im to verify your setup
• Version your favicon: Append ?v=2 to the URL when updating to bust caches

FAQ

How do I add a favicon in WordPress?

Go to Appearance → Customize → Site Identity → Site Icon, upload a 512x512 PNG image, and click Publish. WordPress automatically generates all required sizes.

What size should a WordPress favicon be?

Upload at least 512 x 512 pixels. WordPress will automatically create 32x32, 180x180, and other sizes. For Google search results, use multiples of 48px.

Why isn't my WordPress favicon showing up?

Usually a caching issue. Clear your browser cache, WordPress cache plugin, and CDN cache. Try an incognito window. Also check for plugin conflicts causing duplicate favicon tags.

Can I use an SVG favicon in WordPress?

WordPress doesn't support SVG uploads by default for security reasons. You can add SVG favicon support manually via functions.php code, or use a plugin that enables SVG uploads.

How do I add different favicons for light and dark mode in WordPress?

Use an SVG favicon with embedded CSS media queries for prefers-color-scheme. Add the SVG file manually via functions.php since the Customizer only handles PNG/ICO formats.

References

1. Site Icon - WordPress Developer Resources - WordPress Official Documentation
2. Define a favicon to show in search results - Google Search Central
3. Favicon.im - Favicon testing and validation tool