How to Add a Favicon in WordPress: 4 Easy Methods

Looking to add that professional touch to your WordPress site? A favicon might seem small, but it packs a powerful branding punch! That tiny icon appearing in browser tabs and bookmarks helps visitors instantly recognize your site among their open windows.

WordPress offers multiple ways to add a favicon to your website, and you don’t need coding skills to make it happen. Whether you prefer the built-in Customizer, a dedicated plugin, or manual installation, we’ve got you covered.

Ready to make your site more memorable and polished? Let’s explore the easiest methods to add a favicon to your WordPress site!

Table of Contents

1. Method 1: Using General Settings (The Simplest Approach)
2. Method 2: Using the WordPress Customizer
3. Method 3: Using a Favicon Plugin
4. Method 4: Adding a Favicon Manually via Code
5. How to Create and Optimize a Favicon for WordPress
6. Troubleshooting: Why is My Favicon Not Showing?
7. You Have a Perfect Favicon, What’s Next?

Method 1: Using General Settings (The Simplest Approach)

Want the quickest way to add a favicon to your WordPress site? The General Settings method works perfectly for most standard WordPress installations without extra plugins or coding.

Here’s how to do it:

1. Log in to your WordPress dashboard.

2. Navigate to Settings > General in the left sidebar menu.

General” srcset=”https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/settings-general.png 1600w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/settings-general-734×598.png 734w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/settings-general-1024×835.png 1024w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/settings-general-1536×1252.png 1536w” sizes=”(max-width: 1600px) 100vw, 1600px”/>

3. Find the Site Icon section and click the “Choose a Site Icon” button to choose or upload your favicon.

Site Icon” srcset=”https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/settings-general-site-icon.png 1600w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/settings-general-site-icon-734×421.png 734w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/settings-general-site-icon-1024×588.png 1024w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/settings-general-site-icon-1536×881.png 1536w” sizes=”(max-width: 1600px) 100vw, 1600px”/>

4. Select your image and click “Set as Site Icon” at the bottom of the page.

That’s it! WordPress will automatically generate all the necessary favicon sizes for different devices and platforms. This method works well for nearly all WordPress sites and requires no technical knowledge.

Use a simple, recognizable image representing your brand for best results. Remember that this icon will appear very small in browser tabs, so avoid complex designs with too many details.

To change or remove the favicon, click “Change Site Icon” or “Remove Site Icon” on the same page.

Method 2: Using the WordPress Customizer

The WordPress Customizer offers a user-friendly alternative if you prefer a more visual approach to adding your favicon. This method works great for themes that support the Customizer feature (most modern themes do).

Follow these simple steps:

1. Go to your WordPress dashboard.

2. Click on Appearance > Customize in the left menu.

3. When the Customizer opens, look for the “Site Identity” option and click on it.

4. Find the Site Icon section and click “Select Site Icon” to open your media library.

Site icon” srcset=”https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/site-identitiy-site-icon.png 1600w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/site-identitiy-site-icon-734×344.png 734w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/site-identitiy-site-icon-1024×480.png 1024w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/site-identitiy-site-icon-1536×720.png 1536w” sizes=”(max-width: 1600px) 100vw, 1600px”/>

5. Upload a new image or select an existing one and click “Select“.

6. Crop the image if prompted and click “Crop image“.

7. Click Publish to save the changes.

To remove or change the favicon, click Remove or “Change image“.

The Customizer gives you a live preview of how your site will look with the new favicon. This instant feedback helps ensure your icon appears precisely as you want before publishing the changes.

This approach works perfectly for WordPress beginners who want a visual confirmation of their changes. Plus, while you’re in the Customizer, you can adjust other site elements like your site title and tagline to complement your new favicon.

Upgrade Your Website with a Premium WordPress Theme

Find a theme that you love and get a 20% discount at checkout with the FLASH20 code

Choose your theme

Method 3: Using a Favicon Plugin

Not happy with the built-in WordPress options? A dedicated favicon plugin offers more flexibility and advanced features for customizing your site icon.

Our top recommendation is Favicon by RealFaviconGenerator, a free plugin that creates optimized favicons for various devices and platforms.

Here’s how to use it:

1. Go to Plugins > Add New Plugin from your WordPress dashboard.

2. Search for RealFaviconGenerator and click Install Now and Activate to install and activate the plugin.

install” class=”wp-image-808607″ srcset=”https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-install.png 1600w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-install-734×360.png 734w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-install-1024×502.png 1024w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-install-1536×754.png 1536w” sizes=”(max-width: 1600px) 100vw, 1600px”/>

2. Once active, go to Appearance > Favicon in your admin menu.

3. Click “Select from the Media Library” to choose your image.

Select image” class=”wp-image-808609″ srcset=”https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-select-image.png 1600w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-select-image-734×358.png 734w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-select-image-1024×500.png 1024w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-select-image-1536×750.png 1536w” sizes=”(max-width: 1600px) 100vw, 1600px”/>

4. Select or upload an image with a minimum size of 260×260 pixels (larger is better) and click Select.

5. Click “Generate favicon” to proceed.

Generate favicon” class=”wp-image-808610″ srcset=”https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-generate-favicon.png 1600w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-generate-favicon-734×252.png 734w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-generate-favicon-1024×351.png 1024w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-generate-favicon-1536×527.png 1536w” sizes=”(max-width: 1600px) 100vw, 1600px”/>

6. The plugin will redirect you to the RealFaviconGenerator website, where you can customize how your favicon displays across different platforms.

Favicon settings” class=”wp-image-808611″ srcset=”https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-favicon-settings.png 1600w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-favicon-settings-734×461.png 734w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-favicon-settings-1024×643.png 1024w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-favicon-settings-1536×964.png 1536w” sizes=”(max-width: 1600px) 100vw, 1600px”/>

7. After making your adjustments, click “Generate and install favicon” at the bottom of the page.

Generate and install favicon” srcset=”https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-generate-install-favicon-1024×828.png 1024w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-generate-install-favicon-734×594.png 734w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-generate-install-favicon-1536×1242.png 1536w, https://b8f4g5a7.delivery.rocketcdn.me/wp-content/uploads/2025/03/realfavicongenerator-generate-install-favicon.png 1600w” sizes=”(max-width: 1024px) 100vw, 1024px”/>

8. The plugin automatically imports your settings back to WordPress.

What makes this method stand out is the ability to create custom versions of your favicon for iOS, Android, Windows, and other platforms. This ensures your site icon looks perfect regardless of how visitors access your website.

This approach works best for site owners who want maximum compatibility across all devices or need special customization options for their favicon appearance.

Method 4: Adding a Favicon Manually via Code

The manual method offers a more technical approach for those who enjoy diving into website files or need complete control over their favicon implementation.

This method requires basic knowledge of file transfers and minor code editing, but don’t worry – we’ll break it down into manageable steps:

1. Create your favicon.ico file (or use a favicon generator like Favicon.io to convert an image).

2. Access your website’s files through FTP or your hosting provider’s File Manager.

3. Upload the favicon.ico file to your site’s root directory (the folder containing the wp-admin and wp-content folders).

4. Next, edit your theme’s header.php file to ensure the browser finds your favicon.

5. Add the following code inside the section:

Replace “yourdomain.com” with your actual domain name.

6. Save the changes and clear your browser cache to see the results.

For added compatibility with different devices, you might want to include multiple favicon formats and sizes. In this case, your code would include several link tags for different icon versions.

This method works best for developers or users with custom themes who need precise control over how their favicon appears. While more complex than the other approaches, it gives you the freedom to implement exactly what you want.

Upgrade Your Website with a Premium WordPress Theme

Find a theme that you love and get a 20% discount at checkout with the FLASH20 code

Choose your theme

How to Create and Optimize a Favicon for WordPress

Creating an effective favicon requires more thought than simply shrinking your logo. Since this tiny image represents your brand across multiple platforms, it needs careful optimization.

Choosing the Right Dimensions

Start with the right size: WordPress recommends 512×512 pixels for your favicon. This large initial size allows the system to generate smaller versions automatically while maintaining quality. 

Modern websites need multiple favicon versions to display correctly across all devices. Different platforms need different sizes. A single favicon.ico file no longer suffices because:

• Google shows favicons in search results (with specific requirements)
• iOS and Android use different icon dimensions for home screens
• Modern browsers support different formats and sizes

For complete device compatibility, prepare these favicon sizes:

• 16×16 px for browser tabs
• 32×32 px for Windows taskbar
• 48×48 px for older Windows versions
• 57×57 px for standard iOS home screens
• 180×180 px for Apple Touch Icons
• 192×192 px for Android home screens

Tools like RealFaviconGenerator simplify this process by creating a complete set of icons from your master image and the correct implementation code for optimal display.

Selecting the Best File Format

• ICO: The traditional format that works across all browsers
• PNG: Supports transparency and works well on modern browsers
• SVG: Offers scalability but has limited WordPress support

Design Tips for Maximum Impact

• Keep your design simple to ensure clarity at small sizes
• Avoid cramming too much detail into your icon
• Use high contrast colors for better visibility
• Consider a transparent background for versatility

Troubleshooting: Why is My Favicon Not Showing?

Added a favicon, but can’t see it on your site? Don’t worry – this common issue typically has simple solutions. Let’s troubleshoot the most frequent problems:

• Browser Cache Issues. Your browser might be showing a cached version of your site. Try viewing your website in an incognito/private browsing window or clear your browser cache completely. This often resolves the most common favicon display problems.
• CDN Delays. If you use a Content Delivery Network (CDN), propagating changes might take time. Try purging your CDN cache to force an update of your site assets, including the favicon.
• File Format Problems. Some browsers have specific format requirements. Ensure you’re using either ICO or PNG formats, as these have the widest compatibility. If you uploaded an SVG or JPEG favicon, try converting it to one of these formats instead.
• Theme Conflicts. Occasionally, your WordPress theme might override favicon settings with its own code. Check your theme documentation or contact the theme developer if you suspect this might be happening.
• Search Result Delays. If your favicon shows on your site but not in Google search results, be patient. Google’s favicon crawler updates periodically; changes can take days or weeks to appear in search results.

If you’ve tried these solutions but still face issues, consider reinstalling your favicon using a different method from this guide. Switching approaches can sometimes bypass whatever technical hiccup prevents your favicon from displaying correctly.

You Have a Perfect Favicon, What’s Next?

Now that you’ve added that professional touch with a favicon, your site looks more polished and trustworthy! This small visual element helps visitors instantly recognize your brand when browsing multiple tabs.

Ready for more? Check out WPZOOM themes. Our collection offers beautifully designed, fully responsive themes that simplify customization, even for beginners. Each theme includes thoughtful features to showcase your content perfectly.

Why stop at a favicon when your entire site could look just as professional? Take the next step in your WordPress journey today!