Archived topic
Favicon dark theme and light theme
3 replies · Started by Yannick on July 11, 2022
Hello,
I'm developping a website that needs a favicon for dark theme and a favicon for light theme. Is there an option in generatpress or is there standard code that i can use?
I know it is possible but i hope there's an easier way than this site.
explain about svg favicon
(I have the logo in png or svg)
Please let me know if there's a function in the customizer or if there's code that i can add to my theme to fix this?
Hi there,
no, neither the theme or WP has any function for this.
And Favicons can be a pain at the best of times.
For this requirement i know of 3 approaches:
1. The method you linked to, which if possible is probably one of the most reliable as the styles are embedded in the SVG.
2. Methods using Javascript to swap the images....
3. Adding 2 x separate favicon links to your site and using media support to swap them.
Options 2 and 3 are listed here:
https://joyofcode.xyz/dark-mode-favicon
For #3 you could try:
1. DO NOT add a favicon in the customizer.
2. Create a new Hook Element, and set the hook to wp_head and set the Display Rules to Entire Site
3. Add the 2 links like the HTML in the above post, and swap out your URLs for your 2 images eg.
<link
href="the_full_url_to_your_image/favicon-light.png"
rel="icon"
media="(prefers-color-scheme: light)"
/>
<link
href="the_full_url_to_your_image/favicon-dark.png"
rel="icon"
media="(prefers-color-scheme: dark)"
/>Thank you very much!
You're welcome
