blogccasion

prefers-color-scheme in SVG favicons for dark mode icons

🎉 Chrome finally accepts SVG favicons now that crbug.com/294179, where this feature was demanded on September 18, 2013(!), was fixed. This means that you can style your icon with inline prefers-color-scheme and you'll get two icons for the price of one!

<!-- icon.svg -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: yellow;
      stroke: black;
      stroke-width: 3px;
    }
    @media (prefers-color-scheme: dark) {
      circle {
        fill: black;
        stroke: yellow;
      }
    }
  </style>
  <circle cx="50" cy="50" r="47" />
</svg>
<!-- index.html -->
<link rel="icon" href="/icon.svg" />

You can see a demo of this in action at 🌒 dark-mode-favicon.glitch.me ☀️. Until this feature will have landed in Chrome Stable/Beta/Dev/Canary, be sure to test it with the last Chromium build that you can download from François Beaufort's Chromium Downloader.

Demo app running in dark mode, showing the dark mode favicon being used.

Demo app running in light mode, showing the light mode favicon being used.

Full credits to Mathias Bynens, who independently has created almost the same demo as me that I didn't check, but whose link to Jake Archibald's post SVG & media queries I did follow. Mathias has now filed the follow-up bug crbug.com/1026539 that will improve the favicon update behavior (now you still need to reload the page after a color scheme change).

You can edit this page on GitHub.

Webmentions

7 Replies

*Sigh*, yeah, for home screen icons browsers have to rely on what the operating system supports. We’ve been toying the idea of having the browser dynamically create what the OS needs.
Nice. I didn't realize Chrome 80 supported SVG favicons. I think it's probably just yet-another-image at this point, because it doesn't replace homescreen icons afaict
This fallback seems to work in every case I tested: <link href="/favicon.svg"...> <link href="/favicon.png" ...> <!-- favicon.ico in the root --> catalin.red/svg-favicon-li…

46 Mentions

Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="http://css-tricks.com/icon.svg">). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-sceme media query, and as a result, […]
Dark Mode Favicons Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. ). And you can embed CSS within an SVG with a Safari also supports SVG, but it's different... You specify the color, so there is no opp […]
Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. ). And you can embed CSS within an SVG with a Safari also supports SVG, but it's different... You specify the color, so there is no opportunity there for a dark mode situation. A littl […]
Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg">). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-sceme media query, and as a result, a favicon that suppo […]
Since Chrome will soon be supporting SVG favicons, and a lot of people like dark mode, you can soon provide a dark mode favicon in Chrome, thanks to @tomayac - blog.tomayac.com/2019/09/21/pre…
Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks. One very new trick […]
FacebookTweetPinShareLinkedIn Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some c […]
Les favicons sont les petites icônes que vous voyez dans l’onglet de votre navigateur. Ils vous aident à comprendre de quel site il s’agit lorsque vous parcourez les signets et les onglets ouverts de votre navigateur. Ils font partie intégrante de l’histoire d’Internet et sont ca […]
Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks. One very new trick […]
CSS | Programming SVG, Favicons, and All the Fun Things We Can Do With Them Shantun ParmarApril 25, 2020 Favicons are the little icons you see in your browser tab. They help you understand which si […]
Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks. One very new trick […]
Author: Andrey Sitnik, Author of PostCSS and Autoprefixer, Lead Frontend Developer at Evil MartiansIt is time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Currently, frontend developers have to deal with 20+ static PNG files ju […]
Пришло время переосмыслить используемый нами подход к подготовке наборов фавиконов для современных браузеров и остановить безумие генераторов фавиконов. В наши дни фронтенд-разработчикам приходится иметь дело с более чем 20 статическими PNG-файлами только для того чтобы вывести н […]
Пришло время переосмыслить используемый нами подход к подготовке наборов фавиконов для современных браузеров и остановить безумие генераторов фавиконов. В наши дни фронтенд-разработчикам приходится иметь дело с более чем 20 статическими PNG-файлами только для того чтобы вывести н […]
Обнаружил, что в драфте спецификации CSS есть запрос на системную тему. Выглядит так: @media (prefers-color-scheme: dark). В статье автор инджектит стили в svg иконку, чтобы она отображалась в соответствии с темой. blog.tomayac.com/2019/09/21/pre…
Посмотреть оригинал Пришло время переосмыслить используемый нами подход к подготовке наборов фавиконов для современных браузеров и остановить безумие генераторов фавиконов. В наши дни фронтенд-разработчикам приходится иметь дело с более чем 20 статическими PNG-файлами только для […]
Hey, It’s interesting to reflect on our own behaviour: We can often enough catch ourselves complaining or ranting about other people — some of them we know personally, some we don’t. I’m currently reading a (German) book that’s written mostly for farmers but I can’t stop thinking […]
It is time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Currently, frontend developers have to deal with 20+ static PNG files just to display a tiny website logo in a browser tab or on a touchscreen. Read on to see how to take […]
February 10, 2021 | No Comments It is time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Currently, frontend developers have to deal with 20+ static PNG files just to display a tiny website […]
It is time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Currently, frontend developers have to deal with 20+ static PNG files just to display a tiny website logo in a browser tab or on a touchscreen. Read on to see how to take […]
February 10, 2021 | No Comments It is time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Currently, frontend developers have to deal with 20+ static PNG files just to display a tiny website […]
It is time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Currently, frontend developers have to deal with 20+ static PNG files just to display a tiny website logo in a browser tab or on a touchscreen. Read on to see how to take […]
Author: Andrey Sitnik, Author of PostCSS and Autoprefixer, Lead Frontend Developer at Evil MartiansIt is time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Currently, frontend developers have to deal with 20+ static PNG files ju […]
Creating `prefers-color-scheme` in SVG favicons for dark mode icons. ✔️👌 blog.tomayac.com/2019/09/21/pre… h/t @tommcfarlin for his “things of interest threads” - My current HTML boilerplate
@tomayac I'm playing around with dark theme favicons and stumbled upon your blog post blog.tomayac.com/2019/09/21/pre…. Do you know if there is a way to detect if the browser itself has a dark theme even though the OS does not?
I was asked if one could use SVG web app manifest app icons that are reactive to prefers-color-scheme. To illustrate what this means, here is an excerpt of a manifest where I set the icon to an SVG that is reactive to the color scheme. You can play with it by navigating directly […]
Hey, It’s interesting to reflect on our own behaviour: We can often enough catch ourselves complaining or ranting about other people—some of them we know personally, some we don’t. I’m currently reading a (German) book that’s written mostly for farmers but I can’t stop thinking i […]
Dark favicon on dark mode? 🤮 Use prefers-color-scheme + SVG to load a lighter version when the dark mode is detected! More details ➡️➡️ blog.tomayac.com/2019/09/21/pre… #webdev #css
Dark Mode com CSS 26 May 2022 by admin Umas das funcionalidades que está na moda em Blogs e Sites é o Dark Mode. Devs, em sua maioria, curtem bastante utilizar temas escuros, tanto na IDE quanto em outros apps. 👋 Introdução Vamos mostrar como adi […]