How to Add a Favicon to WordPress (3 Methods)

WordPress powers over 40% of the web, and adding a favicon to a WordPress site is one of those tasks that should take two minutes but somehow trips people up. There are three ways to do it, each with different tradeoffs. Here is when to use which.

WordPress favicon requirements

WordPress recommends uploading an image that is at least 512x512 pixels. The Customizer will crop it down to the sizes it needs (16x16, 32x32, 180x180, etc.). Square images work best. If your image is not square, WordPress will ask you to crop it during upload. Use a PNG with a transparent background for the cleanest result. JPEGs work but will have a white background instead of transparency.

Method 1: WordPress Customizer (Recommended for Most People)

WordPress has had a built-in favicon (they call it "Site Icon") feature since version 4.3, released in 2015. If your WordPress install is remotely up to date, you already have this. No plugin needed.

Go to your WordPress admin panel. Navigate to Appearance, then Customize. In the Customizer sidebar, click on "Site Identity." You will see a section called "Site Icon" with an upload button. Click it, upload your square image (512x512 or larger), crop it if prompted, and hit Publish.

That is it. WordPress automatically generates the favicon.ico, Apple Touch Icon, and other sizes from your upload. It adds the correct<link> tags to your site's <head> on every page.

The Customizer method is the right choice for most WordPress sites. It works with every theme, survives theme changes, and requires zero code. The only downside is limited control. You get whatever sizes and formats WordPress decides to generate, which does not include SVG favicons or web manifest files. For a blog or small business site, that is fine.

Method 2: Theme header.php (More Control)

If you need specific favicon files or want to include formats that WordPress does not generate (like SVG for dark mode support), you can add the HTML directly to your theme's header file. This gives you full control over which files are used and how they are referenced.

First, generate your favicon files using a favicon generator. Upload them to your theme directory or your WordPress media library. Then edit your theme to include the markup. The correct way to do this in WordPress is through a child theme or by using thewp_head action hook, not by editing header.php directly (since theme updates would overwrite your changes).

functions.php (child theme or custom plugin)

function custom_favicon() {
    ?>
    <!-- Standard favicon -->
    <link rel="icon" href="/favicon.ico" sizes="48x48" />

    <!-- SVG favicon with dark mode support -->
    <link rel="icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.svg" type="image/svg+xml" />

    <!-- Apple Touch Icon -->
    <link rel="apple-touch-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/apple-touch-icon.png" />

    <!-- Web Manifest for Android/PWA -->
    <link rel="manifest" href="<?php echo get_stylesheet_directory_uri(); ?>/site.webmanifest" />
    <?php
}
add_action('wp_head', 'custom_favicon');

If you use this method, you should also disable the built-in WordPress Site Icon to avoid conflicting favicon declarations. Add this to the same functions.php file:

Disable default Site Icon output

// Remove WordPress default favicon output
remove_action('wp_head', 'wp_site_icon', 99);

Upload your favicon files to your child theme directory via FTP or your hosting file manager. The structure should look like this:

Child theme directory

your-child-theme/
├── style.css
├── functions.php
├── favicon.ico
├── favicon.svg
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest

This method is more work, but you get full control over formats, sizes, and file locations. It is the right approach when you need SVG favicons with dark mode or when you want your favicon files to live in a specific location rather than the WordPress media uploads folder.

Method 3: Plugin (RealFaviconGenerator for WordPress)

The RealFaviconGenerator WordPress plugin is a solid middle ground. It gives you more output formats and better quality than the built-in Customizer, but you do not need to touch any code. The plugin has been around since 2014 and is well-maintained.

Install it from the WordPress plugin directory. Search for "Favicon by RealFaviconGenerator" in Plugins, then Add New. Activate it, then go to Appearance, then Favicon. The plugin walks you through uploading your source image and configuring options for each platform.

What makes this plugin better than the Customizer is the level of configuration. You can set different background colors for iOS and Android, choose whether the icon should have padding or fill the entire square, configure the Windows tile color, and preview how the favicon looks in different contexts before generating.

What the plugin generates

The plugin creates and uploads:
- favicon.ico (16x16, 32x32, 48x48)
- favicon-16x16.png
- favicon-32x32.png
- apple-touch-icon.png (180x180)
- android-chrome-192x192.png
- android-chrome-512x512.png
- mstile-150x150.png
- site.webmanifest
- browserconfig.xml

It also injects the correct <link> and <meta> tags
into your site's <head> automatically.

The plugin handles the HTML injection for you, so the tags show up on every page without editing theme files. It also plays nicely with caching plugins, which can sometimes cause favicon changes to not appear until the cache is cleared.

Which Method Should You Use?

For most WordPress sites, the built-in Customizer (Method 1) is the right answer. It takes 30 seconds, works with every theme, and produces good enough output for blogs, portfolios, and small business sites.

Use the functions.php approach (Method 2) when you need specific formats like SVG favicons with dark mode support, or when you want the favicon files in a predictable location within your theme. This is the go-to for developers building custom themes.

Use the plugin (Method 3) when you want better output than the Customizer but do not want to write code. It is particularly good for client sites where you want thorough platform coverage without explaining child themes and FTP to the client.

Clear your cache after changing favicons

Favicons are aggressively cached by browsers. After updating your favicon in WordPress, you may not see the change immediately. Clear your browser cache, or open the site in an incognito window. If you use a caching plugin (WP Super Cache, W3 Total Cache, LiteSpeed Cache, etc.), purge the cache from the plugin settings too. Some CDNs like Cloudflare cache favicons separately and need their cache purged from the Cloudflare dashboard.

A Note on WordPress.com vs WordPress.org

Everything above assumes you are running self-hosted WordPress (WordPress.org). If you are on WordPress.com, your options are more limited. The free and Personal plans only support the Customizer method. You cannot install plugins or edit theme files. Business and eCommerce plans allow plugins and custom code, so Methods 2 and 3 both work on those tiers.

If you are on a free WordPress.com plan and the Customizer output is not sufficient, the practical solution is to generate your favicons externally with whatever tool you prefer, then upload the best single image through the Customizer. It will not give you every format, but the browser tab and bookmark icon will look correct, which covers 90% of where people actually see favicons.