How to Add a Favicon to WordPress

Adding a favicon (also called a site icon) to your WordPress site is straightforward. WordPress has built-in favicon support through the Customizer, so you don't need any plugins. This guide covers both the built-in method and the manual HTML method for full control.

Step 1: Prepare Your Favicon Image

Before adding a favicon to WordPress, you need a square image that's at least 512x512 pixels. WordPress will automatically resize it for different contexts (browser tabs, mobile home screens, etc.). If you don't have a favicon yet, use our favicon generator or favicon converter to create one. If you used favicon.io, the android-chrome-512x512.png file is the best choice for WordPress.

Method 1: WordPress Customizer (Recommended)

This is the easiest method and works with all modern WordPress themes.

Step 2: Open the Customizer

From your WordPress admin dashboard, go to Appearance → Customize. This opens the WordPress Customizer where you can preview changes in real time.

Step 3: Navigate to Site Identity

In the Customizer sidebar, click on Site Identity. This section contains your site title, tagline, logo, and site icon (favicon) settings.

Step 4: Upload Your Site Icon

Scroll down to the Site Icon section and click Select site icon. Upload your 512x512 image from your computer or choose one from your Media Library. WordPress may ask you to crop the image — if your image is already square, just click Crop Image without adjusting.

Step 5: Publish

Click the Publish button at the top of the Customizer. Your favicon is now live. Open a new tab and navigate to your site to verify it appears in the browser tab.

Method 2: Manual HTML (Advanced)

If you need more control over favicon sizes or formats, you can add the favicon HTML directly to your theme's <head> section.

Step 1: Upload Favicon Files

Upload your favicon files to your WordPress site using the Media Library or via FTP to your theme directory. You'll need:

favicon.ico — for legacy browser support
favicon-32x32.png — for modern browsers
apple-touch-icon.png (180x180) — for iOS devices
android-chrome-192x192.png — for Android

Step 2: Add HTML to Your Theme

Add the following code to your theme's header.php file inside the <head> tag, or use a plugin like "Insert Headers and Footers" to add it without editing theme files:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

Troubleshooting

Favicon not showing? Clear your browser cache (Ctrl+Shift+Delete) and hard refresh the page (Ctrl+Shift+R).
Caching plugin interference: If you use a caching plugin (WP Super Cache, W3 Total Cache, etc.), purge the cache after adding your favicon.
CDN caching: If you use a CDN like Cloudflare, purge the CDN cache as well.
Image too small: WordPress requires at least 512x512 pixels. Use our favicon converter to resize your image.
Wrong format: WordPress Customizer accepts PNG, JPG, and GIF. For the manual method, use ICO or PNG format.

WordPress Favicon FAQ

What size should a WordPress favicon be?

WordPress recommends 512x512 pixels for the Site Icon. WordPress automatically generates all the smaller sizes it needs (including the 32x32 browser tab icon and 180x180 Apple Touch Icon) from this single image.

Do I need a plugin to add a favicon to WordPress?

No. WordPress has had built-in favicon support since version 4.3 (2015). The Customizer's Site Identity section handles everything. Plugins are only needed if you want advanced control over multiple favicon formats.

Why is my WordPress favicon not updating?

Browser caching is the most common cause. Clear your browser cache, then hard refresh the page. If you use a WordPress caching plugin or CDN, clear those caches too. Favicons can take a few minutes to propagate across all browser instances.

WordPress