Why Your Favicon Isn’t Showing (And How to Fix It Fast)
You’ve carefully designed your website, added all the perfect touches, and uploaded a beautiful favicon to represent your brand. But when you visit your site, the favicon still doesn’t appear in the browser tab. Frustrating, right?
The good news? Favicon issues are usually simple to fix, and you don’t need to be a coding expert to solve them. In fact, most solutions take less than five minutes. Let’s walk through the five most common causes and their fixes.
What’s a Favicon Anyway?
Before we jump into fixes, let’s clarify what we’re talking about. A favicon (short for “favorite icon”) is that tiny image that appears in your browser tab next to your website’s title. It also shows up in bookmarks and browser history. For WebToolTip, for example, it’s the small icon that appears whenever someone visits our site.
Favicons are typically 16×16 pixels or 32×32 pixels in size. They’re one of the first branding elements visitors see, making them important for professional appearance and brand recognition. In fact, many simple UX tweaks like proper branding elements can turn a website into a sales machine.
Fix #1: Clear Your Browser Cache (The Quick Fix)
This is the most common reason your favicon isn’t showing, and it’s also the easiest to fix.
Browsers cache favicons aggressively because they’re small and rarely change. If you just uploaded your favicon, your browser might still be showing the old one (or no favicon at all).
How to fix it:
1. Open your website in a new incognito/private window
2. If it appears there, your favicon is working – your browser just needs clearing
3. In Chrome: Press Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac). You can also use Chrome’s DevTools to clear your browser cache for more control.
4. Select “All time” and check “Cookies and other site data”
5. Click “Clear data”
6. Close and reopen your site normally
That’s it! This solves the problem about 70% of the time.
Fix #2: Verify Your Favicon File Exists
Sometimes the issue is simpler than you think – your favicon file might not actually be uploaded to your server.
How to check:
1. Go to WordPress > Settings > Site Identity (or your site’s general settings)
2. Look for “Site Icon” or “Favicon” section
3. Make sure an image is selected and uploaded
4. If not, upload one now
5. The file should be at least 512×512 pixels for best compatibility
WordPress automatically converts this to the necessary sizes, which is one reason using WordPress makes favicon management much easier. Learn more about WordPress Site Icon functionality in the official documentation.
Fix #3: Clear CDN and Server Cache
If you’re using a content delivery network (CDN) or server caching, those systems might be serving an older version of your favicon.
How to fix it:
1. LiteSpeed Cache: Go to your WordPress admin > LiteSpeed Cache > Purge
2. Cloudflare: Log into your Cloudflare account, select your domain, go to Caching, and click “Purge Everything”
3. WP Super Cache or W3 Total Cache: Look for “Purge Cache” in your WordPress admin menu
4. Wait 5-10 minutes for the cache to fully clear
5. Visit your website and do a hard refresh (Ctrl+F5)
After purging, your favicon should update across the board.
Fix #4: Fix Mixed Content Errors (SSL Certificate Issues)
This is a security-related issue that prevents favicons from loading on HTTPS sites when the favicon URL uses HTTP.
Signs you have this problem:
– Your site uses HTTPS but your favicon URL starts with http:// instead of https://
– You see warnings in your browser’s developer console
– The favicon works on some pages but not others
How to fix it:
1. Install the Really Simple SSL plugin (it’s free and highly rated)
2. Activate it – it automatically converts all HTTP URLs to HTTPS
3. If that doesn’t work, manually edit your favicon URL:
– Go to WordPress > Customize > Site Identity
– Remove and re-upload your favicon
– Make sure it’s served over HTTPS
This plugin solves SSL-related favicon issues for most websites without touching any code.
Fix #5: Manual Code Fix (For Advanced Users)
If none of the above solutions work, there might be a code-level issue. This approach requires editing your theme files, so make sure you have a backup first.
Add favicon code to your theme header:
1. Go to WordPress > Appearance > Theme File Editor
2. Find header.php in the file list on the right
3. Add this code right before the closing tag:
<link rel=”icon” href=”https://yoursite.com/wp-content/uploads/2024/favicon.ico” sizes=”any”>
<link rel=”apple-touch-icon” href=”https://yoursite.com/wp-content/uploads/2024/apple-touch-icon.png”>
4. Replace the URLs with your actual favicon paths
5. Click “Update File”
This manual approach ensures your favicon loads even if WordPress’s favicon system has issues.
Prevention Tips: Keep Your Favicon Working
Once you’ve fixed the issue, keep it fixed with these simple practices:
Use the correct file format: ICO, PNG, SVG, or WebP are best. JPEG works but isn’t ideal.
Maintain proper sizing: Upload a version that’s at least 512×512 pixels. Modern browsers downscale as needed.
Update carefully: If you change your favicon, clear your cache before checking. You won’t see the change immediately otherwise.
Test regularly: Check your favicon in different browsers (Chrome, Firefox, Safari, Edge) and devices. This is part of maintaining good website maintenance practices that prevent other common website problems.
Use WordPress’s built-in feature: Instead of manually coding, use WordPress’s Site Icon feature. It handles the technical details automatically. Proper website management and maintenance includes regular checks of these small but important elements.
The Bottom Line
A missing favicon might seem like a small issue, but it impacts your site’s professionalism and brand recognition. The good news? It’s almost always fixable in minutes without coding knowledge.
Start with the cache clearing fix – it works most of the time. If that doesn’t solve it, work down the list. Most websites only need one of these fixes.
If you’ve tried all five solutions and still have issues, your hosting provider’s support team can help diagnose any server-level problems.
Your favicon deserves to be seen. Give these fixes a try, and you’ll have that little icon showing up in your browser tabs in no time.