Additional menu

Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |

Wordpress developer servicing Melbourne, Brisbane, Sydney, Perth, Adelaide, Canberra

Change Favicon Colour for Dark mode

posted on

This has been reposted with permission from Bill Erickson. You can see the original post here.

When you upload a favicon image in the WordPress customizer, it provides a helpful preview to see how your favicon will appear in browsers using light or dark mode.

When the favicon color doesn’t work well with dark mode, a common fix is to replace the transparent PNG with a JPG that has a white background, but then you end up with a white square in dark mode.

Alternatively, you can use an SVG for the favicon and modify the favicon styling based on the color scheme.

You can see this in use in the recent NerdPress redesign we just launched.

Create SVG favicon

Create a square SVG with your desired icon. It will look something like this:

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
	<path fill="#0F145B" d="......" />
</svg>

Remove any styling from the shapes in the SVG (so the fill and stroke attributes) and add those styles with inline CSS.

You can use @media ( prefers-color-scheme: dark ) to style the dark mode version differently. Here’s what my SVG now looks like:

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
	<style>
		path {
			fill: #0F145B;
		}
		@media ( prefers-color-scheme: dark ) {
			path {
				fill: #43C1C5;
			}
		}
	</style>
	<path d="....." />
</svg>

Add SVG favicon to your theme

I added my favicon.svg to my theme’s /assets/images/ directory, but you can add it anywhere in your theme.

Add the following code to your theme’s functions.php file to include the SVG favicon.

/**
 * SVG Favicon
 */
function be_svg_favicon() {
	echo '<link rel="icon" href="' . esc_url( get_stylesheet_directory_uri() . '/assets/images/favicon.svg' ) . '" type="image/svg+xml">';
}
add_action( 'wp_head', 'be_svg_favicon', 100 );

It seems that the SVG favicon is prioritized over the WP generated one regardless of whether it appears before or after it in the page markup, but I have the priority set to 100 so it will appear after, just in case.

Even with this approach, you should upload a JPG version of the favicon in the WordPress customizer. There are still many browsers that don’t support SVG favicons so you’ll want a fallback.

Alpha Omega Digital is a WordPress web development agency based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

Reader Interactions

Comments

  2. prodronessupply says

    I really love your blog.. Pleasant colors & theme. Did you build this amazing site yourself? Please reply back as I’m planning to create my very own site and would love to know where you got this from or exactly what the theme is called. Thanks.

  11. the trust 2023 says

    Good day! I could have sworn I’ve been to this web site before but after browsing through many of the posts I realized it’s new to me. Anyways, I’m certainly pleased I stumbled upon it and I’ll be book-marking it and checking back often!

  18. 카지노사이트 says

    Howdy! This article couldn’t be written much better! Looking through this article reminds me of my previous roommate! He always kept talking about this. I will send this article to him. Pretty sure he’ll have a very good read. Many thanks for sharing!

  19. บ้านซีรีย์ says

    When I originally commented I appear to have clicked on the -Notify me when new comments are added- checkbox and now each time a comment is added I receive four emails with the same comment. There has to be a means you are able to remove me from that service? Appreciate it.

  39. sunwin says

    I blog often and I genuinely appreciate your information. This great article has really peaked my interest. I am going to book mark your blog and keep checking for new information about once a week. I opted in for your Feed too.

  42. Charlie says

    Hello, it’s Charles here, pertaining to you from the land of unlimited chance– or as we like to call it, the 1K a Day System. Here, we teach you how to make more than a well-fed squirrel gathers nuts for the winter. If you’re all set to stack up those digital acorns, hop on board! Let’s make your bank account as plump as those saucy critters by signing up today.

  43. 더킹카지노 says

    I blog often and I truly thank you for your content. Your article has truly peaked my interest. I will book mark your site and keep checking for new information about once a week. I subscribed to your RSS feed too.

  45. C.Lewis says

    Hey there! I’m Charles, your guide to making cash in your sleep– well, nearly. Invite to the 1K a Day System, where we turn your digital dreams into cold difficult cash. Are you ready to stop scrolling and begin earning? Let’s ditch those cent strategies and tailor up for some severe bank. Join us, and let’s hit those $1K days together!

  48. PH POP CASINO says

    Your style is very unique compared to other people I have read stuff from. Many thanks for posting when you have the opportunity, Guess I will just bookmark this site.

  50. Online Marketing Tips says

    On the planet of betting and video gaming, success is frequently figured out by method, discipline, and a deep understanding of the odds. At [Your Betting Mastery], we’re devoted to supplying you with the tools and understanding you require to optimize your opportunities of success while lessening risks. From specialist analysis to tested betting systems, we provide a range of resources developed to help you make notified decisions and stay ahead of the video game. Our group of experienced gamblers is here to share their insights and techniques, offering you the edge you need to prosper in today’s competitive gaming landscape. Take control of your wagering method with [Your Betting Mastery] With our expert guidance and proven systems, you’ll be on your way to attaining greater success and profitability in no time.

  53. Affiliate Marketing Story says

    Hey there! Just stopping in to praise your amazing blog. Your insights on making money online are genuinely priceless. Earning an income from home has never been more achievable with affiliate marketing. It’s a fantastic way to earn passive income by promoting goods you trust. Your blog is a treasure trove of knowledge for emerging affiliate marketers. Keep up the good work!

Leave a Reply

Your email address will not be published. Required fields are marked *