Favicon does not reliably match system theme (dark/light)

[flying-sheep]

Select Topic Area

Bug

GitHub Feature Area

UI/UX

Body

There is an easy way to make an SVG adapt to the system theme.

You currently switch between a black and a white version of the favicon, but that doesn’t work for e.g. unloaded tabs. This does:

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style>
            /* default is black fill, so we only need to override in case of a dark theme: */
            @media (prefers-color-scheme: dark) {
              .logo-main { fill: white; }
            }
            /* Bonus: If this SVG is embedded in a HTML document, use the text color */
            body .logo-main { fill: currentColor; }
        </style>
    </defs>
    <title>GitHub logo</title>
    <g class="logo-main">
        <!-- Content -->
    </g>
</svg>

[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. ⭐

[cehfisher]

Hello @flying-sheep - thank you for taking the time to report this to us!

We reviewed our favicon commit history and found that others had similar questions about our favicon treatment. Given how browsers heavily cache favicons and handle bookmarked ones differently from live tabs, our current approach is intentional and strikes a balance between caching limitations and the desired desktop experience.

This isn’t something we can address further at this time, but we sincerely appreciate you taking the time to share your feedback. It’s valuable and helps us continue to improve the product. Thank you!

[flying-sheep]

I don’t think that you actually understand what this does.

The technique I suggested is an improvement exactly when there is caching, e.g. when someone uses the image as a favicon.

A favicon using this technique will adapt to the browser color unlike what you currently have.

[cehfisher]

Hello @flying-sheep - we understand the issue as we've run across this issue before. Unfortunately, there is not a clean engineering fix that can be applied in to this issue.

Please see this earlier discussion on the topic for more details.

[flying-sheep]

Unfortunately, there is not a clean engineering fix that can be applied in to this issue.

There is! The one I suggested above! It perfectly fixes the problem in all browsers that support media queries. (All of them)

let me describe again what it does:

1. You would just serve a single SVG as a favicon, not (as you do now) change the favicon using JavaScript

2. The favicon itself (via CSS media queries) will adapt to the browser theme. That means that it will always be visible in the browser UI:

   • If the browser has a light theme, the media query will cause the fill color to be black, resulting in a black icon on a light background
   • If the browser has a dark theme, the media query will cause the fill color to be white, resulting in a white icon on a dark background

Note

Unlike your current solution, this will work for bookmarks, and it will not require the page to be active.
So e.g. an unloaded GitHub tab (with no JavaScript running) will still have its favicon adapt to the browser appearance