FaviconX

Beginner Guides

Why Your Website Favicon Is Not Showing

By Alex Rivera, Web Developer Published: August 12, 2026 Updated: August 12, 2026 4 min read

TL;DR

To add a favicon, upload a 32×32 (or 16×16) PNG and an ICO file to your site root and add <link rel="icon" href="/favicon.ico"> inside your <head>. For best results on every platform, also add a 16×16 and 32×32 PNG, an Apple touch icon and a web manifest — the snippet below does all of it.

Why Your Website Favicon Is Not Showing

As a web developer, designer, or website owner, you understand the importance of a favicon. This small yet significant icon represents your brand in browser tabs, bookmarks, and more. However, many users encounter issues where their favicon simply does not appear. In this guide, we will explore the common reasons why your website favicon is not showing and how to fix it.

1. Incorrect File Path

The most common reason for a missing favicon is an incorrect file path in your HTML code. Ensure that you have correctly linked your favicon file in the <head> section of your HTML document. Here’s how to correctly add it:

  • Use the correct file format: The ideal formats for favicons are .ico, .png, or .svg.
  • Double-check the file path: Make sure the path to your favicon file is correct. For example:
<link rel="icon" href="path/to/your/favicon.ico" type="image/x-icon">

If your favicon is in the same directory as your HTML file, simply use:

<link rel="icon" href="favicon.ico" type="image/x-icon">

2. Browser Caching Issues

Browsers often cache files to speed up loading times, which can prevent updated favicons from showing. If you’ve recently changed your favicon, you might need to clear your browser cache. Here’s how:

  1. For Google Chrome: Click on the three dots in the upper right corner > More tools > Clear browsing data.
  2. For Firefox: Click on the three horizontal lines > Options > Privacy & Security > Cookies and Site Data > Clear Data.
  3. For Safari: Go to Preferences > Privacy > Manage Website Data > Remove All.

3. Favicon Size and Format

Another common issue is the size and format of your favicon. For optimal display across various devices and browsers, your favicon should ideally be:

  • At least 16x16 pixels for basic browser tabs.
  • 32x32 pixels for better resolution on high-DPI displays.
  • In .ico format for maximum compatibility, although .png and .svg files are also widely supported.

4. HTTP vs. HTTPS

If your website is secured with HTTPS, make sure your favicon is also served over HTTPS. Mixed content issues can prevent your favicon from loading. Check to ensure your favicon link is using HTTPS:

<link rel="icon" href="https://yourdomain.com/path/to/favicon.ico">

5. Server Configuration Issues

Sometimes, server configurations can block the favicon from being served properly. Ensure that your server allows the serving of .ico files. You can check your server logs for any 404 errors related to your favicon and take necessary actions to resolve them.

Conclusion

A missing favicon can negatively impact your brand's identity and recognition online. By ensuring correct file paths, clearing browser cache, using appropriate sizes and formats, serving your favicon over HTTPS, and checking server configurations, you can resolve most issues related to favicons not appearing. With these tips, you are now equipped to troubleshoot and fix favicon issues, enhancing your website's overall professionalism and user experience.