Go to homepage

Projects /

July 7, 2020

SVG favicon in dark mode

By CodyHouse
404 HTML, CSS, JS components. Download →

How to change the color of your SVG favicon when dark mode is enabled.

Using an SVG image as the favicon of your website comes with the advantage of serving a single asset without worrying about your users' different screen resolutions.

Besides, you can change the color of SVG favicons when dark mode is enabled!

To set an SVG file as favicon:

  <!-- ...   -->

  <!-- favicon 👇 -->
  <link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg">

  <!-- ...   -->

You can then modify the SVG code of the favicon to account for dark mode. To set the color of an SVG element (e.g., a <path> element), you need to specify a value for the fill property (if no value is specified, the default color is black). To target the dark mode, use the prefers-color-scheme media feature:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    path {
      fill: #212121; <!-- set icon color for light mode -->

    @media (prefers-color-scheme: dark) {
      path {
        fill: white; <!-- set icon color for dark mode -->
        opacity: 0.5;
  <path d="M24,13.2V10.8H20.191a10.6,10.6,0,0,0-.228-1.44A10.145,10.145,0,0,0,22.2,3H19.8a7.738,7.738,0,0,1-.939,3.706,6.873,6.873,0,0,0-2.9-2.516,4.121,4.121,0,0,0-7.926,0,6.892,6.892,0,0,0-2.9,2.516A7.748,7.748,0,0,1,4.2,3H1.8A10.145,10.145,0,0,0,4.037,9.36a10.6,10.6,0,0,0-.228,1.44H0v2.4H3.845a11.117,11.117,0,0,0,.279,1.326A10.156,10.156,0,0,0,1.8,21H4.2a7.732,7.732,0,0,1,.985-3.783C6.746,20.245,9.372,22.8,12,22.8s5.254-2.555,6.815-5.583A7.732,7.732,0,0,1,19.8,21h2.4a10.156,10.156,0,0,0-2.324-6.474,11.117,11.117,0,0,0,.279-1.326Zm-17.4-3a1.8,1.8,0,1,1,.527,1.273A1.8,1.8,0,0,1,6.6,10.2ZM12,18a2.4,2.4,0,1,1,1.7-.7A2.4,2.4,0,0,1,12,18Zm3.6-6a1.8,1.8,0,1,1,1.273-.527A1.8,1.8,0,0,1,15.6,12Z"/>

More info: browser support.

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.