Different favicons for light and dark mode

[JHine]

Does anyone know how you can set different favicons for light and dark mode?

The favicon skin only allows you to select one favicon image. I have tried adding code provided to me by the software developer to my master page (between the HEAD tags), but this doesn't work (and I've tried different variations of this code). FYI, the code provided is:

Code: Select all

<link href="insite-favicon.svg" rel="icon" media="(prefers-color-scheme: light)">
<link href="insite-favicon-white.svg" rel="icon" media="(prefers-color-scheme: dark)">

The variations I have tried are:

Code: Select all

<link href="" rel="icon" src="../Images/icons/insite-favicon.svg" media="(prefers-color-scheme: light)">
<link href="" rel="icon" src="../Images/icons/insite-favicon-white.svg" media="(prefers-color-scheme: dark)">

<link rel="icon" sizes="1049x1049" href="../Images/icons/insite-favicon.svg" media="(prefers-color-scheme: light)">
<link rel="icon" sizes="1049x1049" href="../Images/icons/insite-favicon-white.svg" media="(prefers-color-scheme: dark)">

<link rel="icon" sizes="1049x1049" href="insite-favicon.svg" media="(prefers-color-scheme: light)">
<link rel="icon" sizes="1049x1049" href="insite-favicon-white.svg" media="(prefers-color-scheme: dark)">

<link rel="icon" type="image/x-icon" href="insite-favicon.svg" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/x-icon" href="insite-favicon-white.svg" media="(prefers-color-scheme: dark)">

<link rel="shortcut icon" href="../Images/icons/insite-favicon.svg" media="(prefers-color-scheme: light)" />
<link rel="shortcut icon" href="../Images/icons/insite-favicon-white.svg" media="(prefers-color-scheme: dark)" />

I'm trying to do this on a HTML5 top nav output and the browser is Chrome as that is what is supported by the product.

TIA