How to create a favicon for dark mode

Yeah, finally such idea came up to our minds, that it would be beneficial for our website to have a favicon that can be used in the two browser themes:

  • light
  • dark

And since I think of myself of a creative person, I decided to do something uncanny. To actually google it. Yeah, since you know what they say, everything has already been thought of — so by the same merits, there should be someone on the internet, who have already figured this out.

And no wonder — time and again, it proved to be true.

Thanks for this guy, who calls himself Red, I was able to easily implement dark-mode-aware favicon.

How to do it

There are actually only two ways that I am aware of, how to accomplish that. And they go as follows:

  • google it
  • follow this article

1. Googling it

I don’t think you need any more advice to that.

2. Follow this article

Thanks, appreciate it!

Here’s what you need:

Yes, you need all the three formats. If you care about the image resolution, don’t. You can have your favicon 2550px or 16px wide — the decision is entirely up to you.

Actually, don’t be a dick (or a cunt), just go for 32px – that is my recommendation.

Last steps:

  • prepare your HTML code
  • update SVG file with required code

Preparing HTML code:

  • so, by this step, you will want to place favicon.ico into the root of your project – but you will not make a link to that file in your html code — it is from the reason, that an address like e.g. http://anyaddressontheinternet.com/favicon.ico has been supported by web browsers since day one and still is – and if you screw up everything other than this step, you will still have a favicon showing up on your website.
  • now place the following code into html code of your website
    <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.png" type="image/png"> 
    here’s what it means:
    • first <link /> is obviously a link for a SVG icon and the second is a <link /> for a png icon. The second one will be there as a fallback for browsers, that does not support svg favicons.
    • that’s all you need to know and let’s move to the last step, that is…

Updating SVG file:
As we all know, a “svg file” is nothing else than just another bunch of html elements. Also, there is an option of styling html elements via CSS, is there not? Also, in 2020 web browsers could have been so prudent to actually create APIs for detecting dark modes – and maybe it will not be a surprise – but they were! And actually dark mode can be detected with css media query `@media (prefers-color-scheme: dark) {}`! Could be this world more awesome?

Anyways…

What is this mean?

This means, that we can style html/svg elements via css and we can detect dark mode via css — soooo, the question is, can we style our svg favicon based on the current browser theme? And the answer is YES, OF COURSE – and that’s the only thing we need to do right now.

CSS @media query targeting dark mode
CSS @media query targeting dark mode

Simply insert <style> tag into the SVG file with the media query above and you’ve got yourself a dark-mode aware favicon! 😎

That’s it, that’s your favicon for dark mode!

Related links:

Follow me:

Useless keywords summing up the article so I will rank higher in Google:

  • dark mode
  • favicon
  • svg+xml
  • stack overflow
  • coding
  • html
  • css