{"id":11883,"date":"2025-09-23T19:50:50","date_gmt":"2025-09-23T19:50:50","guid":{"rendered":"https:\/\/putridparrot.com\/blog\/?p=11883"},"modified":"2025-09-23T19:50:50","modified_gmt":"2025-09-23T19:50:50","slug":"light-and-dark-theme-favicons","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/light-and-dark-theme-favicons\/","title":{"rendered":"Light and Dark theme favicon&#8217;s"},"content":{"rendered":"<p>Nowadays we&#8217;d like to support light and dark themes, whether it be due to the OS settings or browser, for example we can switch from lights to dark mode using Chrome&#8217;s <em>Settings | Appearance | Mode<\/em> (chrome:\/\/settings\/appearance)<\/p>\n<p>So let&#8217;s see how we can show different icons in our index.html based upon the selected theme.<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&lt;link rel=&quot;icon&quot; href=&quot;\/favicon.ico&quot; type=&quot;image\/x-icon&quot; sizes=&quot;16x16&quot; \/&gt;\r\n&lt;link rel=&quot;icon&quot; href=&quot;\/favicon-light.svg&quot; type=&quot;image\/svg+xml&quot; media=&quot;(prefers-color-scheme: light)&quot; sizes=&quot;16x16&quot;&gt;\r\n&lt;link rel=&quot;icon&quot; href=&quot;\/favicon-dark.svg&quot; type=&quot;image\/svg+xml&quot; media=&quot;(prefers-color-scheme: dark)&quot; sizes=&quot;16x16&quot;&gt;\r\n<\/pre>\n<p>The first line is a fallback icon for a browser not supporting themes etc. and, as you can see the <em>prefers-color-scheme<\/em> is used to determine which icon to use.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nowadays we&#8217;d like to support light and dark themes, whether it be due to the OS settings or browser, for example we can switch from lights to dark mode using Chrome&#8217;s Settings | Appearance | Mode (chrome:\/\/settings\/appearance) So let&#8217;s see how we can show different icons in our index.html based upon the selected theme. &lt;link [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[42],"tags":[],"class_list":["post-11883","post","type-post","status-publish","format-standard","hentry","category-html"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=11883"}],"version-history":[{"count":2,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11883\/revisions"}],"predecessor-version":[{"id":11885,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11883\/revisions\/11885"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=11883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=11883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=11883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}