Adapt Your Favicons to User Color Schemes with DyCon.js

Category: Javascript | October 10, 2023
Author:Sam-B-Y
Views Total:24 views
Official Page:Go to website
Last Update:October 10, 2023
License:MIT

Preview:

Adapt Your Favicons to User Color Schemes with DyCon.js

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);

You Might Be Interested In:


Leave a Reply