Adapt Your Favicons to User Color Schemes with DyCon.js

Preview:

Description:

DyCon.js is a lightweight JavaScript plugin that dynamically switches between favicons on your webpage to match the user’s preferred color scheme.

How to use it:

1. Download and load the DyCon.js script in your webpage.

<script src="path/to/dycon.min.js"></script>

2. Initialize the DyCon.js.

const dyCon = new DyCon();

3. Configure the different favicon file paths.

const darkFavicon = 'light.webp';
const lightFavicon = 'dark.webp';

4. Add the unique ID favicon to your default favicon.

<link rel="icon" id="favicon" href="favicon.png">

5. Update the favicons every 1000ms.

dyCon.faviconUpdate('favicon', darkFavicon, lightFavicon, 1000);