Any way we can set dark\light icon for different browser themes?

[DreamBuilder Team]

Hi,

In normal web dev we can set different favicon for browser depending on light\dark theme like below:

 <link
      rel="icon"
      href="favicon_light.svg"
      type="image/svg+xml"
      media="(prefers-color-scheme: light)"
    />

  <link
      rel="icon"
      href="favicon_dark.svg"
      type="image/svg+xml"
      media="(prefers-color-scheme: dark)"
    />

Is it somehow supported or planned to be supported in extensions as well?

[Stefan Van Damme]

Hi there,

There is an existing Chrome feature request related to supporting separate icons for Light and Dark Mode:

https://issues.chromium.org/issues/41419485

And this W3c report:

https://github.com/w3c/webextensions/issues/229

Thanks,
Stefan vd
Browser Extension Developer

[DreamBuilder Team]

Awesome thank you, hope we will see it soon in release

[Mythical 5th]

Bear in mind that dark mode and a dark browser theme do not always go together. Github has a color-scheme dependent favicon which may be invisible to users who have installed a custom theme: