You kinda want an orange favicon.

You can’t have a white favicon, because, in a lot of situations, you won’t be able to see the dang thing at all. Here’s a default Chrome tab while macOS is in Light mode.

You can’t have a black favicon, because, in a lot of situations, you won’t be able to see the dang thing at all. Here’s a default Chrome tab while macOS is in Dark mode:

No problem, you say, I’ll have the (SVG) favicon respond to dark mode preference:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.3 24.29">
  <style>
    @media (prefers-color-scheme: dark) {
      path {
        fill: white;
      }
    }
  </style> 

 ...Code language: HTML, XML (xml)

Neat idea, and that actually works to change a properly set up SVG favicon fill, but it actually doesn’t help that much in real life. Chrome tabs aren’t only dark because of a system preference, they can also turn dark because the tab is open in an Incognito window. There is no @media query for that! Firefox does something similar right now: when macOS is in Light mode, you get light tabs in normal windows and dark tabs in Private windows.

Bottom line: you have no idea what the tab color behind a favicon will be like. I’ve been using Arc, which encourages you to fart around with themes, which affects the background color behind favicons. I think all browsers support theming of sorts, further proving you just can’t count on what colors are involved.

So: your favicon should be able to withstand any color behind it. That is often done by providing a solid color background right in the favicon itself. Favicons like these should be visible as intended no matter what:

If you want a colored, shaped favicon, you need a color that works on dark and light equally well. Like orange!

Well, until Safari decides to get weird.

Time for a nap.