Use adaptive SVG favicon like other rust sites

I have a Rust forums tab pinned in Firefox. But I use dark mode, and the dark favicon is basically invisible as a result:

image

For contrast, here's the same image but with the forum tab focused:

image

The other Rust sites seem to have an adaptive favicon that shows as light in dark mode. Here's an example from docs.rs:

image

I found the following pull request, which I believe is where the docs.rs change was made: Use adaptive SVG favicon for rustdoc like other rust sites by Cldfire · Pull Request #75438 · rust-lang/rust · GitHub

Would it be possible to do something similar for this site? As it stands, the "invisible" pinned tab makes it basically impractical for me to pin the Rust forums tab in my browser.

I found a similar discussion about the logo icon here: Dark mode logo doesn't match with the dark red background navbar - as far as I can see, nothing ever got done about that, although no explanation was ever given as to why. Is there a technical issue that makes this harder than it seems, or is it simply that no-one has taken the time to look into it yet? Is the favicon similar to this?

7 Likes

A few likes, but no comments - is this the right place to request changes like this? Do the site admins read this category?

From what I can tell form the Discourse meta forums, the favicon doesn't appear to have an option for setting a dark theme alternative.

Though from this information alone, I'm not 100% sure yet. Maybe we need to find a more conclusive source or open a new thread there to fully make sure.

I guess, an alternative approach could also be putting a white background to the icon - that seems to be the case for rust-lang.org for example (that site also doesn't have a dark mode).

The favicon on rust-lang.org adapts to dark or light mode. I think the relevant thing is to use a svg favicon, as used in the PR I linked to in my original post - Use adaptive SVG favicon for rustdoc like other rust sites by Cldfire · Pull Request #75438 · rust-lang/rust · GitHub

In the SVG file, there's a stylesheet:

  <style type="text/css"><![CDATA[
    #logo {
      fill-rule: nonzero;
    }
    #logo-teeth {
      stroke: #000000;
      stroke-width: 0.92px;
    }
    @media (prefers-color-scheme: dark) {
      #logo {
        fill: #FFFFFF;
        fill-rule: nonzero;
      }
      #logo-teeth {
        fill: #FFFFFF;
        stroke: #FFFFFF;
        stroke-width: 0.92px;
      }
    }
  ]]></style>

This topic was automatically closed 90 days after the last reply. We invite you to open a new topic if you have further questions or comments.