{"id":3319,"date":"2019-11-20T11:26:04","date_gmt":"2019-11-20T09:26:04","guid":{"rendered":"https:\/\/blog.tomayac.com\/2019\/09\/21\/prefers-color-scheme-in-svg-favicons-for-dark-mode-icons\/"},"modified":"2019-11-20T11:26:04","modified_gmt":"2019-11-20T09:26:04","slug":"prefers-color-scheme-in-svg-favicons-for-dark-mode-icons","status":"publish","type":"post","link":"https:\/\/tomayac.com\/wordpress\/2019\/11\/20\/prefers-color-scheme-in-svg-favicons-for-dark-mode-icons\/","title":{"rendered":"`prefers-color-scheme` in SVG favicons for dark mode icons"},"content":{"rendered":"\n\t\t\t

\ud83c\udf89 Chrome finally accepts SVG favicons now that crbug.com\/294179<\/a>,\nwhere this feature was demanded on September 18, 2013(!), was fixed.\nThis means that you can style your icon with inline prefers-color-scheme<\/code><\/a>\nand you'll get two icons for the price of one!<\/p>\n

<!-- icon.svg --><\/span>
<<\/span>svg<\/span> width<\/span>=<\/span>\"<\/span>100\"<\/span><\/span> height<\/span>=<\/span>\"<\/span>100\"<\/span><\/span> xmlns<\/span>=<\/span>\"<\/span>http:\/\/www.w3.org\/2000\/svg\"<\/span><\/span>><\/span><\/span>
  <<\/span>style<\/span>><\/span><\/span>
    circle<\/span> {<\/span>
      fill<\/span>:<\/span> yellow;<\/span>
      stroke<\/span>:<\/span> black;<\/span>
      stroke-width<\/span>:<\/span> 3px;<\/span>
    }<\/span>
    @media<\/span> (<\/span>prefers-color-scheme<\/span>:<\/span> dark)<\/span><\/span> {<\/span>
      circle<\/span> {<\/span>
        fill<\/span>:<\/span> black;<\/span>
        stroke<\/span>:<\/span> yellow;<\/span>
      }<\/span>
    }<\/span>
  <\/span><\/span><\/<\/span>style<\/span>><\/span><\/span>
  <<\/span>circle<\/span> cx<\/span>=<\/span>\"<\/span>50\"<\/span><\/span> cy<\/span>=<\/span>\"<\/span>50\"<\/span><\/span> r<\/span>=<\/span>\"<\/span>47\"<\/span><\/span>\/><\/span><\/span>
<\/<\/span>svg<\/span>><\/span><\/span><\/code><\/pre>\n
<!-- index.html --><\/span>
<<\/span>link<\/span> rel<\/span>=<\/span>\"<\/span>icon\"<\/span><\/span> href<\/span>=<\/span>\"<\/span>\/icon.svg\"<\/span><\/span>><\/span><\/span><\/code><\/pre>\n
\"Demo<\/p>\n
\"Demo<\/p>\n
Full credits to Mathias Bynens<\/a>,\nwho independently<\/a>\nhas created almost the same demo<\/a> as me that I didn't check,\nbut whose link to Jake Archibald<\/a>'s post\nSVG & media queries<\/a> I did follow.\nMathias has now filed the follow-up bug crbug.com\/1026539<\/a>\nthat will improve the favicon update behavior (now you still need to reload the page after a color scheme change).<\/p>\n\n\t\t\t
\n\t\t\t\t\"Thomas\n\t\t\t\tThis post appeared first on https:\/\/blog.tomayac.com\/2019\/09\/21\/prefers-color-scheme-in-svg-favicons-for-dark-mode-icons\/<\/a>.\n\t\t\t<\/p>\n\t\t","protected":false},"excerpt":{"rendered":"
\t\t\t\ud83c\udf89 Chrome finally accepts SVG favicons now that crbug.com\/294179,
\nwhere this feature was demanded on September 18, 2013(!), was fixed.
\nThis means that you can style your icon with inline prefers-color-scheme
\nand you’ll get two icons for the price of…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"intlwemo_wallet_address":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-3319","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3319"}],"version-history":[{"count":3,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3319\/revisions"}],"predecessor-version":[{"id":3330,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3319\/revisions\/3330"}],"wp:attachment":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
You can see a demo of this in action at \ud83c\udf12 dark-mode-favicon.glitch.me<\/a> \u2600\ufe0f.\nUntil this feature will have landed in Chrome Stable\/Beta\/Dev\/Canary, be sure to test it with the last Chromium build\nthat you can download from Fran\u00e7ois Beaufort's Chromium Downloader<\/a>.<\/p>\n