Back to Tutorials

Why is My Favicon Not Showing Up?

Troubleshooting guide for when your favicon is not showing up or not displaying correctly. Learn common causes and solutions to fix favicon issues across different browsers and platforms.

Common Reasons Your Favicon is Not Showing Up

If your favicon is not showing up, there are several common causes. Understanding why your favicon is not displaying can help you quickly identify and fix the problem. Here are the most frequent reasons why a favicon is not showing:

  • Incorrect file path: The most common reason your favicon is not showing up is an incorrect path in the HTML link tag
  • Browser cache: Browsers aggressively cache favicons, so even after fixing the issue, your favicon might not show up immediately
  • Missing HTML link tags: Without proper link tags in the HTML head section, your favicon will not display
  • Wrong file format or size: Using unsupported formats or incorrect dimensions can prevent your favicon from showing up
  • Server configuration issues: Incorrect MIME types or server settings can block favicon requests
  • HTTPS/HTTP mismatch: Mixed content issues can prevent your favicon from loading

How to Fix Favicon Not Showing Up

1. Verify HTML Link Tags

The first step to fix favicon not showing up is to ensure you have the correct HTML link tags in your document head. Your favicon is not displaying if these tags are missing or incorrect. 

<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Make sure the href paths match your actual file locations. If your favicon is not showing up, double-check that the paths are correct relative to your root directory.

2. Clear Browser Cache

Browsers cache favicons aggressively, which is why your favicon might not show up even after fixing the code. To fix favicon not displaying due to cache:

  • Hard refresh your browser (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on Mac)
  • Clear browser cache and cookies for your site
  • Try accessing your site in an incognito/private window
  • Wait 24-48 hours for the cache to expire naturally

If your favicon is not showing up after these steps, the issue is likely not cache-related.

3. Check File Paths and Locations

Verify that your favicon files exist in the correct location. Your favicon is not displaying if the files are missing or in the wrong directory.

Common locations for favicon files:

  • Root directory: /favicon.ico or /favicon.png
  • Public folder: /public/favicon.ico (for static site generators)
  • Assets folder: /assets/favicon.ico

If your favicon is not showing up, ensure the file paths in your HTML match the actual file locations on your server.

4. Verify File Format and Size

Your favicon might not be showing up if you're using an unsupported format or incorrect size. To fix favicon not displaying:

  • ICO format: Traditional format, works in all browsers (16x16 or 32x32 pixels)
  • PNG format: Modern browsers support PNG favicons (16x16, 32x32, 48x48, 96x96, 192x192, 512x512)
  • SVG format: Supported by modern browsers, scalable and resolution-independent

Ensure your favicon files are properly formatted and sized. If your favicon is not showing up, try using a standard ICO or PNG format first.

5. Check Server Configuration

Server misconfiguration can prevent your favicon from showing up. To fix favicon not displaying:

  • Verify MIME types are correctly configured for .ico, .png, and .svg files
  • Check that your server allows requests to favicon files
  • Ensure there are no redirect rules blocking favicon requests
  • Verify HTTPS/HTTP consistency (no mixed content warnings)

If your favicon is not showing up due to server issues, contact your hosting provider or check your server configuration files.

6. Test Across Different Browsers

Sometimes your favicon is not displaying in one browser but works in others. To troubleshoot favicon not showing up:

  • Test in Chrome, Firefox, Safari, and Edge
  • Check mobile browsers (iOS Safari, Chrome Mobile)
  • Verify favicon appears in bookmarks and browser history
  • Test in both desktop and mobile views

If your favicon is not showing up in specific browsers, check browser-specific requirements or known issues.

Quick Fix Checklist

Use this checklist to quickly identify why your favicon is not showing up:

  • HTML link tags are present in the <head> section
  • Favicon file paths in HTML match actual file locations
  • Favicon files exist and are accessible
  • File format is supported (ICO, PNG, or SVG)
  • Browser cache has been cleared or tested in incognito mode
  • No console errors related to favicon loading
  • Server MIME types are correctly configured

Using a Favicon Generator to Fix Issues

If your favicon is not showing up and you're unsure about the correct formats and sizes, using a professional favicon generator can help you fix favicon not displaying issues. Tools like logo87.com automatically generate all required favicon sizes and formats, ensuring your favicon displays correctly across all browsers and devices.

A good favicon generator will provide:

  • All standard favicon sizes (16x16, 32x32, 48x48, 96x96, 192x192, 512x512)
  • Multiple formats (ICO, PNG, SVG)
  • Apple touch icon for iOS devices
  • Properly formatted HTML link tags ready to copy

This eliminates common causes of favicon not showing up, such as incorrect file formats, wrong sizes, or missing files.

Conclusion

When your favicon is not showing up, the issue is usually related to incorrect file paths, browser cache, missing HTML tags, or file format problems. By following the troubleshooting steps above, you can identify and fix favicon not displaying issues quickly.

Remember that browsers cache favicons aggressively, so even after fixing the code, your favicon might not show up immediately. Clear your browser cache or test in an incognito window to verify the fix. If your favicon is still not showing up after trying these solutions, check your server configuration or consult your hosting provider.

Using a professional favicon generator ensures you have all the correct files and formats, making it much less likely that your favicon will not show up. This is often the easiest way to fix favicon not displaying problems and ensure your favicon works across all browsers and devices.