Dark Mode/Light Mode for favicon

Hi, for those that would like to have a slightly fancier website with changing favicons between dark mode and light mode:

function add\_favicon() {

// Light mode favicon

echo ‘<link rel=”icon” type=”image/png” href=”/wp-content/uploads/2023/04/favicondark.png” media=”(prefers-color-scheme: light)”>’;


// Dark mode favicon

echo ‘<link rel=”icon” type=”image/png” href=”/wp-content/uploads/2023/04/faviconlight.png” media=”(prefers-color-scheme: dark)”>’;


add\_action( ‘wp\_head’, ‘add\_favicon’ );

How to add:
1. login to wp-admin
2. Appearance > Theme File Editor > Functions.php
3. Make sure to change the file paths of href=

Hope it helps, happy to answer any comments or anything related to WordPress on DM’s or comments


This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer