Favicon in WordPress (Theme vs Plugin Guide)

WordPress favicons are managed through Site Icon in the Customizer (Appearance > Customize > Site Identity), which generates multiple sizes and injects the correct link tags. Themes and plugins can override or duplicate those tags. SEO plugins sometimes add their own icon handling.

This guide explains the native WordPress workflow, when to use theme files or plugins, and how to verify icons on your live WordPress URL without guessing.

Quick answer: use Site Icon first

Since WordPress 4.3, the built-in Site Icon feature is the default path:

1. Go to Appearance > Customize > Site Identity
2. Click Select Site Icon
3. Upload a square image at least 512×512 px
4. Publish

WordPress crops and serves icons for browser tabs, admin bar, and mobile home screens. It writes the HTML tags for you.

You do not need a plugin for basic favicons unless your theme blocks Site Icon or you need advanced PWA manifest control.

What WordPress generates under the hood

When you set a Site Icon, WordPress:

• Stores the attachment in the media library
• Outputs link rel="icon" tags with multiple sizes
• Adds apple-touch-icon for iOS
• Exposes icon URLs via wp_site_icon() in themes

View your page source and search for site-icon. You should see tags like:

<link rel="icon" href="https://example.com/wp-content/uploads/2026/06/cropped-favicon-32x32.png" sizes="32x32">
<link rel="icon" href="https://example.com/wp-content/uploads/2026/06/cropped-favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" href="https://example.com/wp-content/uploads/2026/06/cropped-favicon-180x180.png">

WordPress also creates a cropped-* variant at standard sizes. Upload quality matters. Start from a sharp 512×512 master.

Method 2: Theme functions.php or header.php

Older themes hardcode favicons in header.php:

<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/assets/favicon.ico">

Or enqueue via wp_head:

function mytheme_favicon() {
  echo '<link rel="icon" type="image/png" sizes="32x32" href="' . get_template_directory_uri() . '/assets/favicon-32x32.png">';
}
add_action('wp_head', 'mytheme_favicon');

Problem: This conflicts with Site Icon. You may get duplicate or competing tags. Browsers pick one unpredictably.

Fix: Remove hardcoded favicon lines from the theme when using Site Icon. In block themes (FSE), check theme.json and template parts for manual icon links.

Method 3: SEO and favicon plugins

Plugins like Yoast, Rank Math, or dedicated favicon plugins may add tags or manifest support.

Before installing:

• Check if Site Icon already works
• Deactivate redundant favicon output to avoid duplicates
• Confirm the plugin serves icons from your domain (not a third-party CDN you do not control)

Some plugins add web app manifest icons for PWA. That is useful if you need 192×192 and 512×512 beyond what Site Icon provides. Cross-check sizes in the Favicon Sizes Guide.

Method 4: Upload favicon.ico to the site root

WordPress lives in a subdirectory on some hosts (example.com/blog/). Browsers still request https://example.com/favicon.ico at the domain root, not inside /wp-content/.

Options:

• Upload favicon.ico via FTP to the web root (above WordPress)
• Ask your host to map /favicon.ico to the WordPress Site Icon
• Use a redirect rule in .htaccess or nginx config

Missing root ICO causes generic icons in email clients and tools that skip HTML parsing. Favicon Check tests both HTML tags and /favicon.ico in one scan.

Multisite and subdirectory installs

Multisite: Each site in a network can set its own Site Icon under that site's Customizer. Network-level defaults may override subsites on older setups. Test each subdomain or path separately.

Subdirectory install: Icon URLs must resolve from the subdirectory path. Scan the exact public URL users visit.

Caching plugins and CDNs

WordPress favicon issues after a change usually mean cache, not WordPress core.

Clear layers in order:

1. WordPress object cache (Redis, Memcached plugin)
2. Page cache (WP Rocket, W3 Total Cache, LiteSpeed)
3. CDN (Cloudflare, Bunny)
4. Browser favicon cache (test incognito)

Site Icon changes update media library files. Cached HTML may still reference old URLs until purge.

Cloudflare users: purge everything or purge the homepage HTML after icon change.

Common WordPress favicon problems

Site Icon set but tab shows old logo

Favicon cache is aggressive. Purge all caches, rename the media file (re-upload Site Icon), test incognito. See Favicon Not Showing.

Theme duplicates favicon tags

Inspect View Source. If you see two sets of rel="icon", remove theme hardcoding or disable plugin duplicate output.

Blurry icon after WordPress crop

Upload at least 512×512. Avoid uploading a wide logo. WordPress center-crops to square. Pre-crop in design tools for control.

Site Icon missing on front page only

Some page builders or head optimizers strip wp_head() hooks on landing pages. Confirm <?php wp_head(); ?> exists in header.php or block theme template.

HTTPS mixed content

Icon URLs must use https:// on SSL sites. Mixed content warnings block icons in strict browsers. Fix site URL in Settings > General.

Full setup checklist for WordPress

1. Upload 512×512 square PNG to Site Icon
2. Publish Customizer changes
3. Upload favicon.ico to domain root (optional but recommended)
4. Remove duplicate theme favicon code
5. Add web manifest via plugin if you need PWA install icons
6. Purge all caches
7. Scan live URL with Favicon Check
8. Run Open Graph Check for share previews (Yoast/Rank Math OG tags are separate from favicons)

Detailed testing steps: How to Test Favicons Before Launch.

Child themes and custom development

If you build a custom theme:

// Prefer WordPress core API
add_theme_support('custom-logo');
// Site Icon is automatic when user sets it in Customizer
// Do NOT hardcode favicons if Site Icon is enabled

For programmatic fallback when no Site Icon is set:

function mytheme_fallback_favicon() {
  if (! has_site_icon()) {
    echo '<link rel="icon" href="' . esc_url(get_template_directory_uri() . '/assets/favicon.ico') . '">';
  }
}
add_action('wp_head', 'mytheme_fallback_favicon', 99);

Use low priority (99) so core Site Icon tags output first.

WordPress vs static HTML favicons

WordPress abstracts icon tags. The underlying HTML rules are the same as any site. See How to Add a Favicon (HTML) if you export a static copy or headless front-end reads WordPress API separately.

Headless WordPress and decoupled front-ends

Many teams use WordPress as a CMS but render the front-end in Next.js or Gatsby. Site Icon tags live in WordPress PHP templates, not in your JavaScript app.

If your headless setup ignores WordPress theme output:

• Export favicon URLs from the WordPress REST API or hardcode CDN paths in the front-end
• Do not assume WordPress Site Icon applies to app.example.com if that domain serves a separate SPA
• Scan each public origin independently

The WordPress admin may show a correct Site Icon while your decoupled front-end serves no favicon at all. That gap is common after migrations.

WooCommerce and shop pages

E-commerce themes sometimes override favicons per product or category (rare but possible via SEO plugins). After theme updates:

1. Check homepage, product page, and checkout favicon
2. Confirm checkout is not a subdomain with missing Site Icon
3. Purge WooCommerce and CDN cache after icon change

Payment trust signals include consistent branding in the tab bar during checkout.

Block themes (FSE) and full site editing

WordPress block themes store templates in the database. Site Icon still lives in Customizer, but some block themes inject extra link tags through theme.json or pattern headers.

After switching block themes:

1. Re-save Site Icon even if preview looks correct
2. Check template parts (header.html) for hardcoded icon links
3. Use Site Editor preview, then scan production URL

Classic theme advice applies, but duplicates often hide inside synced patterns rather than header.php.

Gutenberg and page builder conflicts

Elementor, Divi, and Beaver Builder sometimes load their own <head> sections on landing pages.

Symptoms:

• Homepage missing Site Icon tags
• Inner pages show correct icon
• Builder "custom code" block added duplicate favicon links

Fix: disable builder header override on affected pages, or move favicon output exclusively to WordPress core Site Icon and remove builder injections.

FAQ

Where is the favicon setting in WordPress?

Appearance > Customize > Site Identity > Site Icon in wp-admin. Block themes use the same Customizer path.

What size should a WordPress Site Icon be?

Upload at least 512×512 px, square. WordPress generates 32×32, 180×180, 192×192, and other sizes automatically.

Does WordPress create favicon.ico?

Site Icon generates PNG variants in uploads. It does not always place favicon.ico at the domain root. Upload ICO separately if you need legacy fallback.

Can I use SVG favicons in WordPress?

Core Site Icon does not support SVG upload for security reasons. Use PNG. SVG in theme files is possible but rare and needs PNG fallback.

Why does my WordPress favicon differ from staging?

Different Site Icon media IDs, cache, or staging domain not updated. Compare View Source on both URLs with Favicon Check.

Do SEO plugins replace WordPress Site Icon?

Usually no. They add Open Graph images and meta tags. Favicon remains Site Icon unless a dedicated favicon plugin overrides it.

How do I fix WordPress favicon after migration?

Re-save Site Icon in Customizer, update Settings > General URLs, purge cache, upload root favicon.ico, scan production URL.

Should I match favicon and OG image in WordPress?

Same brand, different files and sizes. Favicon is square and tiny. OG image is 1200×630 for social shares. See Favicon vs Open Graph Image.

Conclusion

WordPress favicons start with Site Icon in the Customizer. Remove theme duplicates, add root favicon.ico if needed, purge cache after changes, and scan your live URL with Favicon Check.

For launch week, pair favicon testing with Open Graph Check so tabs and shared links both show your current brand.