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.

#eee
here so you could see the favicon at all. 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.
Wish color-contrast worked…