Nowadays we’d like to support light and dark themes, whether it be due to the OS settings or browser, for example we can switch from lights to dark mode using Chrome’s Settings | Appearance | Mode (chrome://settings/appearance)

So let’s see how we can show different icons in our index.html based upon the selected theme.

<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16" />
<link rel="icon" href="/favicon-light.svg" type="image/svg+xml" media="(prefers-color-scheme: light)" sizes="16x16">
<link rel="icon" href="/favicon-dark.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)" sizes="16x16">

The first line is a fallback icon for a browser not supporting themes etc. and, as you can see the prefers-color-scheme is used to determine which icon to use.