A favicon is that tiny icon displayed in your browser tab, bookmarks bar and search results next to your site name. It’s a small detail, but it plays a big role in branding, trust and recognition. In this practical guide, we’ll walk you through three proven methods to add a favicon to WordPress, cover the correct sizes and formats, and show you how to verify everything works properly.
What Is a Favicon and Why Does It Matter?
A favicon (short for “favorite icon”) is a small square image that represents your website across browsers and devices. In WordPress, it’s officially called a Site Icon. A well-designed favicon helps visitors:
- Identify your site among dozens of open tabs
- Recognize your brand in bookmarks and history
- Trust your website as a professional entity
Favicon Requirements: Size and Format
Before uploading your favicon, make sure it meets WordPress requirements. Here’s a quick reference table:
| Attribute | Recommended Value |
|---|---|
| Minimum Size | 512 x 512 pixels |
| Shape | Square (1:1 ratio) |
| Accepted Formats | .png, .jpg, .ico, .gif |
| Best Format | PNG (transparent background) |
| Max File Size | Under 100 KB |
Tip: If you don’t have a favicon yet, you can create one using a free tool like Favicon.io, Canva, or RealFaviconGenerator.
Method 1: Add a Favicon via the WordPress Customizer (Easiest)
This is the native WordPress method and works with almost every theme. No code, no plugins.
- Log in to your WordPress admin dashboard.
- Go to Appearance > Customize.
- Click on Site Identity.
- Scroll down to the Site Icon section.
- Click Select site icon and upload your image (or choose one from the Media Library).
- Crop the image if prompted, then click Publish to save your changes.
If you’re using a block theme (WordPress 6.0 and above), the path may be slightly different:
- Go to Appearance > Editor
- Select Styles or Settings > Site Identity
- Click Site Icon and upload
Method 2: Add a Favicon Manually Through Theme Files
Want full control? You can add the favicon directly to your theme’s header.php file. This method is ideal for developers or for adding multiple icon variants (Apple Touch Icon, Android Chrome icon, etc.).
Step 1: Upload Your Favicon Files
Using FTP or your hosting file manager, upload your favicon files (for example favicon.ico, apple-touch-icon.png) to your theme’s root folder:
/wp-content/themes/your-theme/
Step 2: Edit header.php
Open header.php and add the following lines inside the <head> tag:
<link rel="icon" type="image/png" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png">
<link rel="apple-touch-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/apple-touch-icon.png">
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">Important: Always use a child theme when editing theme files. Otherwise, your changes will be lost the next time your theme updates.
Step 3: Save and Clear Cache
Save the file, clear any caching plugins, and refresh your site.
Method 3: Add a Favicon Using a Plugin
If you’re not comfortable editing files and want more control than the Customizer offers, a plugin is a great middle-ground option.
Recommended Plugins
- RealFaviconGenerator – generates all icon variants for every device
- Heroic Favicon Generator – simple and beginner-friendly
- Favicon by RealFaviconGenerator – popular and well maintained
Installation Steps
- Go to Plugins > Add New.
- Search for your favorite favicon plugin.
- Click Install Now, then Activate.
- Navigate to Appearance > Favicon (or the plugin’s settings page).
- Upload your master image (at least 512×512 px).
- Customize the appearance for iOS, Android, Windows and macOS.
- Click Generate favicon and let the plugin handle the rest.
How to Verify Your Favicon Is Working
Once your favicon is added, you’ll want to make sure it appears correctly:
- Open your site in an incognito window to bypass browser cache.
- Check the browser tab. Your icon should appear next to the page title.
- Bookmark the page and verify the icon shows in your bookmarks bar.
- Test on multiple browsers: Chrome, Firefox, Safari, Edge.
- Check on mobile by adding your site to the home screen.
- Use realfavicongenerator.net/favicon_checker for a full audit.
Common Issues and Fixes
Favicon Not Showing Up?
- Clear your browser cache – old icons are often cached for days.
- Clear your WordPress cache (WP Rocket, W3 Total Cache, etc.).
- Check the file path – make sure the URL to the favicon is correct.
- Test in incognito mode to bypass all cache layers.
- Confirm the file exists by visiting yourdomain.com/favicon.ico directly.
Favicon Not Updating?
This is almost always a cache issue. Force a refresh by adding a version parameter to your favicon URL, for example: favicon.png?v=2
Which Method Should You Choose?
| Method | Best For | Difficulty |
|---|---|---|
| Customizer | Most users, quick setup | Easy |
| Theme Files | Developers, custom setups | Advanced |
| Plugin | Multi-device optimization | Easy |
FAQ
Why is my favicon not showing up in WordPress?
The most common reason is browser or plugin caching. Clear your cache, test in incognito mode, and make sure the favicon file actually exists at the expected URL.
Where is the favicon in WordPress?
WordPress calls it the Site Icon. You’ll find it under Appearance > Customize > Site Identity, or in the block-based Editor under Styles > Site Identity.
How do I insert a favicon?
Upload a square image (at least 512×512 px) to the Site Icon section of the WordPress Customizer, or add it manually via header.php, or use a dedicated plugin.
How do I add a favicon in WooCommerce?
WooCommerce uses the same favicon as your WordPress installation. Simply set your Site Icon via Appearance > Customize > Site Identity and it will appear across all WooCommerce pages.
What is the ideal favicon size for WordPress?
WordPress requires a minimum of 512 x 512 pixels and will automatically generate smaller versions (16×16, 32×32, 180×180) for different devices.
Can I change the favicon without a plugin?
Yes. The WordPress Customizer allows you to change the Site Icon without any plugin or code. It’s the recommended method for most users.
Conclusion
Adding a favicon to WordPress is a small task with a big visual impact. Whether you prefer the built-in Customizer, hands-on theme file editing, or the flexibility of a plugin, you now have three reliable methods to choose from. Pick the one that suits your comfort level, verify the result across browsers and devices, and enjoy a more polished, professional-looking website.