Favicon Not Displaying – Default Icon Still Showing

[VisionTQ]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

I updated my website with a custom favicon and verified that the favicon file is correctly placed and referenced in the HTML. However, the browser continues to display the default favicon instead of the one I provided. I’ve also cleared the cache and reloaded multiple times, but the issue persists.

Operations you have already tried

Cleared browser cache and tested in incognito mode.

Checked the file path and favicon format.

Despite all this, the default icon still appears. I’m not sure if the issue is related to caching, incorrect paths, or how the server handles favicon requests.

Anything else?

Expected Result:
The custom favicon should appear on all pages of the site.

Actual Result:
The default browser/server favicon is showing instead.

Additional Notes:
Feel free to ask me anymore

[SoumyaK4]

I'm assuming this is a newer issue, cause 1 site I have for over a year shows the custom one, but the recent one I made shows the default one

[odcheck]

I did the steps described here https://chirpy.cotes.page/posts/customize-the-favicon/ I can confirm, what @VisionTQ mentioned.

I know this has to be addressed elsewhere, but as workaround I followed this blog post https://lbhoe.dev/posts/chirpy-favicon-customization-issues/

[lotusk08]

The image stack from https://realfavicongenerator.net is not enough.
There is incomplete support for dark/light favicon follows the theme.

You need to add:

• apple-touch-icon-precomposed
• android-chrome-192x192
• android-chrome-512x512
• favicon-16x16
• favicon-32x32

Mine with dark/light favicon and fix the safari top browser color (#1066, #1483, #2148).

1. _includes/favicons.html

{% capture favicon_path %}{{ '/assets/img/favicons' | relative_url }}{% endcapture %}

<link rel="apple-touch-icon" sizes="180x180" href="{{ favicon_path }}/light/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="{{ favicon_path }}/light/apple-icon-precomposed.png">
<link rel="icon" type="image/png" sizes="32x32" href="{{ favicon_path }}/light/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="{{ favicon_path }}/light/favicon-16x16.png">
<link rel="icon" href="{{ favicon_path }}/light/favicon.ico" type="image/x-icon">
<link rel="icon" href="{{ favicon_path }}/light/favicon.svg" type="image/svg+xml">
{% if site.pwa.enabled %}
  <link rel="manifest" href="{{ favicon_path }}/light/site.webmanifest">
{% endif %}
<link rel="shortcut icon" href="{{ favicon_path }}/light/favicon.ico">
<meta name="apple-mobile-web-app-title" content="{{ site.title }}">
<meta name="application-name" content="{{ site.title }}">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="{{ favicon_path }}/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

2. assets/img/favicons/dark/browserconfig.xml

---
layout: compress
---

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square150x150logo src="{{ '/assets/img/favicons/dark/ms-icon-150x150.png' | relative_url }}" />
      <TileColor>#da532c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

3. assets/img/favicons/dark/site.webmanifest

---
layout: compress
---

{% assign favicon_path = "/assets/img/favicons/dark" | relative_url %}

{
  "name": "{{ site.title }}",
  "short_name": "{{ site.title }}",
  "description": "{{ site.description }}",
  "icons": [
    {
      "src": "{{ favicon_path }}/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "{{ favicon_path }}/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
  "start_url": "{{ '/index.html' | relative_url }}",
  "theme_color": "#fffdf9",
  "background_color": "#fffdf9",
  "display": "fullscreen"
}
4. _javascript/theme.js
```js
class Theme {
  static #modeKey = 'mode';
  static #modeAttr = 'data-mode';
  static #darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
  static switchable = !document.documentElement.hasAttribute(this.#modeAttr);
  
  static get DARK() {
    return 'dark';
  }
  
  static get LIGHT() {
    return 'light';
  }
  
  static get ID() {
    return 'theme-mode';
  }
  
  static get visualState() {
    return this.#hasMode ? this.#mode : (this.#sysDark ? this.DARK : this.LIGHT);
  }
  
  static get #mode() {
    return (
      sessionStorage.getItem(this.#modeKey) ||
      document.documentElement.getAttribute(this.#modeAttr)
    );
  }
  
  static get #isDarkMode() {
    return this.#mode === this.DARK;
  }
  
  static get #hasMode() {
    return this.#mode !== null;
  }
  
  static get #sysDark() {
    return this.#darkMedia.matches;
  }
  
  static getThemeMapper(light, dark) {
    return {
      [this.LIGHT]: light,
      [this.DARK]: dark
    };
  }
  
  static init() {
    if (!this.switchable) return;
    
    this.#darkMedia.addEventListener('change', () => {
      const lastMode = this.#mode;
      this.#clearMode();
      
      if (lastMode !== this.visualState) {
        this.#notify();
      }
      
      this.#updateColors();
    });
    
    if (!this.#hasMode) return;
    
    if (this.#isDarkMode) {
      this.#setDark();
    } else {
      this.#setLight();
    }
    
    this.#updateColors();
  }
  
  static flip() {
    if (this.#hasMode) {
      this.#clearMode();
    } else {
      this.#sysDark ? this.#setLight() : this.#setDark();
    }
    
    this.#notify();
    this.#updateColors();
  }
  
  static #setDark() {
    document.documentElement.setAttribute(this.#modeAttr, this.DARK);
    sessionStorage.setItem(this.#modeKey, this.DARK);
  }
  
  static #setLight() {
    document.documentElement.setAttribute(this.#modeAttr, this.LIGHT);
    sessionStorage.setItem(this.#modeKey, this.LIGHT);
  }
  
  static #clearMode() {
    document.documentElement.removeAttribute(this.#modeAttr);
    sessionStorage.removeItem(this.#modeKey);
  }
  
  static #notify() {
    window.postMessage({ 
      id: this.ID,
      mode: this.visualState 
    }, '*');
    
    const isDark = this.visualState === this.DARK;
    const theme = isDark ? 'dark' : 'light';
    const faviconElements = document.querySelectorAll('link[rel*="icon"]');
    
    faviconElements.forEach(link => {
      const href = link.getAttribute('href');
      if (href) {
        link.setAttribute('href', href.replace(/(light|dark)/, theme));
      }
    });
  }
  
  static #updateColors() {
    const root = document.documentElement;
    const mainBgColor = getComputedStyle(root).getPropertyValue('--main-bg').trim();
    
    let metaThemeColor = document.querySelector('meta[name="theme-color"]');
    
    if (metaThemeColor) {
      metaThemeColor.content = mainBgColor;
    } else {
      metaThemeColor = document.createElement('meta');
      metaThemeColor.name = 'theme-color';
      metaThemeColor.content = mainBgColor;
      document.head.appendChild(metaThemeColor);
    }
  }
}

Theme.init();
export default Theme;

P/S:
My site is a fork of Chirpy Theme with something adjusted (no Bootstrap, added ChartJS, refactored color/fonts, etc)