Want to add or change your WordPress favicon (aka the Site Icon) quickly? On most sites running WordPress 6.5+, you can do it in Settings → General → Site Icon in under 2 minutes.
In this guide, we’ll show the exact steps for different WordPress setups (Settings, Site Editor, Customizer), how to verify it’s working, and how to fix the most common “favicon not showing” issues.
Quick answer: Add a favicon in WordPress
- In your WordPress dashboard, go to Settings → General.
- Find Site Icon and click Choose a Site Icon.
- Upload a square image (at least 512×512), crop if prompted, then click Set as Site Icon.
- Click Save Changes.
- Open your site in a private/incognito window and hard refresh (Shift+Reload) to confirm.
Note: If you don’t see “Site Icon” under Settings → General, jump to the Site Editor/Customizer methods outlined below.
What is a favicon and why does it matter?
A favicon, short for “favorite icon,” is a small icon that represents your website. Typically, 16×16 or 32×32 pixels, it is displayed in:
- Browser tabs
- Bookmarks
- Address bars (on some browsers)
- Search engine results snippets
Benefits of using a favicon:
- Enhanced brand recognition.
- An improved user experience, by making your site easily identifiable.
- A more professional, trustworthy perception.
Three ways to add or change a favicon in WordPress
Whether you’re using a classic theme with the Customizer or a modern block theme with the Site Editor, the process for adding or changing your WordPress favicon is quick once you know where to look.
| Method | Best for | Difficulty | Requires extra tools | Notes |
| Built‑in Site Icon settings | Most WordPress sites (classic & block themes) | Easy | No | Recommended default approach. |
| Manual upload via FTP | Developers managing multiple platforms | Medium | FTP client | Full control over files and markup. |
| Upload via cPanel File Manager | cPanel‑based hosting without FTP configured | Medium | cPanel access | Useful if you manage files directly on the server. |
1. Using built-in WordPress settings
WordPress makes it easy to switch out your website’s favicon using simple settings.
Steps to use WordPress settings:
- In your WordPress dashboard, go to Settings → General.
- Click the button that says Choose a Site Icon.
- Choose an icon from your media library or upload a new file. WordPress suggests that your favicon be square and at least 512 by 512 pixels.
- Click Set as Site Icon.
- Select Save Changes.
Advantages:
- No additional plugins are required.
- It’s integrated into WordPress for easy access.
Limitations:
- Limited customization options for advanced users.
2. Manually uploading the favicon through FTP
For those comfortable working with FTP, uploading a favicon manually gives you complete control over its implementation.
Steps to upload a favicon via FTP:
- Create a favicon file:
- Use graphic design tools like Photoshop, GIMP, or online generators (like favicon-generator.org) to create a favicon. Save it as favicon.ico or in supported formats like .png or .svg.
- Access your site via an FTP client (e.g. FileZilla).
- Navigate to your site’s root directory, typically called /public-html or /root.
- Upload the favicon file.
- Add the following code to your /header.php file in your child theme folder:
<link rel="icon" href="path-to-your-favicon/favicon.ico" type="image/x-icon">- Save the changes and refresh your site.
Advantages:
- Complete control over file placement.
- No reliance on additional tools.
Limitations:
- Requires technical knowledge of FTP and WordPress file structures.
3. Adding a favicon using cPanel
If your hosting provider uses cPanel, you can upload and manage your favicon directly through the file manager.
Steps to add a favicon via cPanel:
- Log in to your hosting account and access cPanel.
- Open the File Manager and navigate to your website’s root directory (usually public_html).
- Upload your favicon file (favicon.ico) to the root directory.
- Update the <head> section of your WordPress theme’s header.php file with the following line:
<link rel="icon" href="favicon.ico" type="image/x-icon">- Save the changes and refresh your browser to view the new favicon.
Advantages:
- Bypasses WordPress settings for direct control.
- Useful for websites outside the WordPress ecosystem.
Limitations:
- Requires access to your hosting account.
How to verify your favicon is live (browser + Google)
Browser checks
- Open your site in an incognito/private window, both on desktop and mobile.
- Hard refresh (Windows: Ctrl+F5, Mac: Cmd+Shift+R).
- In Chrome DevTools → Network, filter for “favicon” and confirm it returns 200 (not 404).
Google Search checks (important)
Google can show a favicon in Search results only if it can crawl the icon and your homepage. Changes can take days to weeks to reflect after re-crawling. If you need it updated faster, request indexing for the homepage in Search Console.
Common issues when changing favicons and troubleshooting tips
Changing your favicon in WordPress can sometimes lead to issues that prevent it from displaying correctly. Here’s a list of common problems and step-by-step solutions to resolve them:
1. Favicon not appearing after upload
Steps to resolve:
- Clear your browser cache:
- Go to your browser’s settings and clear cached images and files. Here are instructions for Google Chrome, Safari, and Firefox.
- Alternatively, check your site in incognito mode or a private browsing window to bypass the cache.
- Verify the favicon upload process:
- Ensure that you uploaded the favicon into the correct location based on the instructions for each method above.
- Force a refresh:
- Use the keyboard shortcut Ctrl + F5 (Windows) or Command + Shift + R (Mac) to refresh your browser.
2. Favicon appears blurry
Steps to resolve:
- Use a high-resolution image:
- Ensure that your favicon is at least 512×512 pixels in size.
- If needed, create a new favicon using a graphic editor or an online favicon generator.
- Make sure it’s not overly compressed:
- While image compression is a great way to improve site speed, if you compress a graphic too much, it can end up blurry. Try skipping compression if you’re experiencing a blurry favicon.
- Verify the format:
- Use .png or .ico formats for sharp and clear rendering across all browsers.
3. Changes not reflecting across devices
Steps to resolve:
- Purge your WordPress plugin cache:
- If you’re using a caching plugin like WP Super Cache, go to the plugin settings and clear your cache.
- Purge your CDN or hosting cache:
- If you have caching enabled on your hosting account or are using a CDN that includes caching, log in and clear your cache.
- Clear your browser cache:
- You may also need to clear your browser cache (links to instructions above) to ensure you’re seeing the latest changes.
- Test on multiple devices:
- Check your site on different devices (desktop, mobile, and tablets) and in various browsers to confirm that your favicon is updated.
4. Favicon not showing in all browsers
Steps to resolve:
- Verify the favicon file format:
- Ensure that you’re using a universally supported format like .ico or .png.
- Avoid using .svg unless you’re certain it’s supported by the target browsers.
- Inspect the header code:
- If you added the favicon manually, open your theme’s header.php file and confirm that the following code is present:
<link rel="icon" href="path-to-your-favicon/favicon.ico" type="image/x-icon">- Replace path-to-your-favicon with the actual URL of your favicon file.
- Test older browsers:
- Use an online compatibility checker or test directly on older versions of browsers to confirm that it’s working.
Best practices for favicon design and implementation
- Keep it simple: Avoid overly-complex designs, since favicons are displayed in small sizes
- Use transparent backgrounds:.png files with transparency tend to work well
- Maintain the correct aspect ratio: Stick to square dimensions like 512×512 or 1024×1024 pixels
- Test your favicon: Use tools like Favicon Checker to ensure that it displays correctly
Frequently asked questions
Where is the favicon file located in WordPress?
In WordPress, the favicon file is typically located in one of these locations:
- In the WordPress Customizer: If you’ve added the favicon through the WordPress Customizer, it’s stored in the media library. WordPress automatically generates multiple sizes and places them in the site’s header for browsers to recognize.
- The root directory: If you uploaded your favicon via FTP or cPanel, it’s typically in the root directory (/public_html).
Which file formats are best for a favicon?
Here are the most commonly-used file formats for favicons:
- ICO: The traditional and most universally-supported format. It can contain multiple image sizes in one file.
- PNG: Offers better quality and supports transparency. Widely supported by modern browsers.
- SVG: Ideal for scalability and resolution independence. However, some older browsers may not support it.
- GIF or JPEG: Less commonly used, but can work if appropriately sized.
Best practice: Use .ico for maximum compatibility or .png for the most high-quality display.
What size should my favicon be?
The recommended favicon size depends on where it will be displayed. Here are the most common dimensions:
- Standard browser favicon: 16×16 pixels
- High-resolution browsers and retina displays: 32×32, 48×48, or even 512×512 pixels
- App icons (PWA and Mobile): Sizes like 180×180 pixels for Apple touch icons or larger (1024×1024) for Android platforms
To ensure cross-device compatibility, upload a 512×512 pixel image when using the WordPress Customizer. WordPress will handle resizing for a variety of settings.
Does my favicon affect SEO in WordPress?
Your favicon is not a direct ranking factor, but it can improve how your site looks in search results, which may help click‑through rates and user trust over time.
Are SVG favicons supported in WordPress?
WordPress does not allow SVG uploads by default for security reasons, but you can enable them with custom code or vetted plugins; however, test carefully because not all browsers treat SVG favicons identically.
Jetpack 
4th way, and even easier I feel! 😀 Open the Jetpack Mobile app, click on your site icon, replace!
LikeLike