Favicon does not react to theme toggle (light/dark) without page reload

[hl9020]

🏷️ Discussion Type

Product Feedback

💬 Feature/Topic Area

Other

Body

What are you trying to do?

Have GitHub's favicon update when my system theme changes between light and dark mode (e.g. via Windows Auto Dark Mode which switches OS theme by time of day).

What did you expect to happen?

When the OS theme switches (and GitHub is set to "System" theme), the favicon in the browser tab should update to match - dark icon on light background, light icon on dark background - just like the rest of the UI does.

What happened instead?

Everything on the GitHub page adapts to the new theme, but the favicon in the browser tab stays in the old color scheme. It only updates after manually reloading the page. With multiple GitHub tabs open, all favicons remain in the wrong color until each tab is individually reloaded.

Why this matters

The favicon uses prefers-color-scheme inside the SVG, which the browser evaluates only once when loading the resource. When the OS theme changes at runtime, the browser does not re-evaluate the SVG's media query for the already-loaded favicon. A JavaScript-based approach that dynamically swaps the favicon href on theme change would fix this.

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐

[ignaciogarcia-dev]

What you're seeing is expected browser behavior, not something specific to GitHub's implementation.

When a favicon is loaded (including SVG favicons that use prefers-color-scheme), the browser evaluates it once at fetch time and caches the result. Unlike regular page styles, the favicon resource isn't re-evaluated when the system theme changes. That's why the rest of the UI responds to prefers-color-scheme dynamically, but the favicon doesn't follow along.

This is also why you only see it update after a full page reload, since the browser fetches and re-processes the favicon again under the new theme. The only reliable way to make a favicon react to runtime theme changes today is to handle it in JavaScript. That usually means listening for changes via matchMedia('(prefers-color-scheme: dark)') and swapping the to point to a different asset. Without that kind of manual update, the browser simply won't refresh the favicon on its own. It's just browser, it's behavior doesn't support dynamic re-evaluation of favicon SVGs based on theme changes.

[hl9020]

Thanks for confirming. That's exactly the point of this feedback, GitHub could implement the JavaScript-based matchMedia listener you described to dynamically swap the favicon href on theme change. The fix is straightforward and other web apps already do this. Would be a nice UX improvement, especially for users with multiple GitHub tabs open who use auto dark mode.

[itxashancode]

Solution: Dynamic Favicon Updates on Theme Change

Problem Analysis

The issue occurs because GitHub's current favicon implementation uses a single SVG file with internal prefers-color-scheme media queries. Browsers evaluate these media queries only once when the SVG is initially loaded. When the OS/system theme changes at runtime:

1. GitHub's UI updates immediately via CSS class toggling (e.g., adding/removing dark class on <html>)
2. The already-loaded favicon SVG remains cached with its original color scheme
3. The browser does not re-fetch or re-evaluate the SVG's internal media queries without a full page reload

Proposed Solution

Implement dynamic favicon swapping by:

1. Maintaining two separate favicon files (light and dark variants)
2. Updating the <link rel="icon"> element's href whenever the theme changes
3. Integrating with GitHub's existing theme change detection system

Step-by-Step Implementation

1. Prepare Separate Favicon Files

Create two optimized SVG files:

• favicon-light.svg (for light backgrounds)
• favicon-dark.svg (for dark backgrounds)

Store them in GitHub's asset pipeline (e.g., https://github.githubassets.com/favicons/).

2. Initial Page Load

Ensure the correct favicon loads initially based on the user's theme preference. GitHub already detects the theme on load—reuse that logic:

// Example: Set initial favicon based on current theme
function setInitialFavicon() {
  const isDark = document.documentElement.classList.contains('dark') || 
                window.matchMedia('(prefers-color-scheme: dark)').matches;
  const faviconHref = isDark 
    ? '/favicons/favicon-dark.svg' 
    : '/favicons/favicon-light.svg';
  
  updateFaviconHref(faviconHref);
}

3. Theme Change Listener

Hook into GitHub's existing theme change mechanism. GitHub likely uses a theme event or class mutations on <html>:

// Option A: Listen for class changes (if GitHub toggles 'dark' class)
const observer = new MutationObserver((mutations) => {
  if (document.documentElement.classList.contains('dark')) {
    updateFaviconHref('/favicons/favicon-dark.svg');
  } else {
    updateFaviconHref('/favicons/favicon-light.svg');
  }
});

observer.observe(document.documentElement, { 
  attributes: true, 
  attributeFilter: ['class'] 
});

// Option B: Listen for custom theme event (if GitHub dispatches one)
document.addEventListener('themechange', (event) => {
  const isDark = event.detail?.theme === 'dark';
  updateFaviconHref(isDark 
    ? '/favicons/favicon-dark.svg' 
    : '/favicons/favicon-light.svg');
});

4. Favicon Update Function

function updateFaviconHref(href) {
  let link = document.querySelector("link[rel='icon']") || 
             document.querySelector("link[rel='shortcut icon']");
  
  if (!link) {
    link = document.createElement('link');
    link.rel = 'icon';
    document.head.appendChild(link);
  }
  
  // Only update if different (prevents unnecessary network requests)
  if (link.href !== href && !link.href.endsWith(href)) {
    link.href = href;
  }
}

Integration Notes

• Cache Considerations: Use proper cache headers for favicon files (e.g., Cache-Control: public, max-age=31536000) since they're static assets. The dynamic href change will trigger browser fetch if the URL differs.
• Accessibility: Ensure both favicon variants have appropriate aria-label or title attributes if needed.
• Performance: The mutation observer is lightweight; it only triggers on class attribute changes. Avoid polling.
• Existing GitHub Codebase: GitHub's theme management is likely centralized (e.g., in theme-manager.js or similar). The favicon update should be added as a side effect within that existing theme-switch logic.

Why This Works

• No SVG Media Query Re-evaluation Needed: By swapping the entire favicon file, we bypass the browser's limitation with cached SVG media queries.
• Instant Update: The new favicon loads asynchronously; the browser typically updates the tab icon immediately upon href change.
• Per-Tab Independence: Each open tab runs its own JavaScript, so favicons update independently without requiring reloads.

Expected Outcome

After implementation:

• When the OS theme changes (and GitHub is set to "System"), the favicon will switch within milliseconds
• All open GitHub tabs will update their favicons automatically
• No page reload required
• Behavior matches the rest of GitHub's dynamic theme switching

---

References:

• MDN: <link> element
• CSS-Tricks: Dynamic Favicon
• GitHub's existing theme implementation (internal codebase)

This solution requires minimal changes to GitHub's frontend while solving the core issue of favicon staleness during runtime theme changes.