Light and Dark mode favicons

  <link rel="icon" href="/white-logo.png" media="(prefers-color-scheme:dark)"/>
  <link rel="icon" href="/black-logo.png" media="(prefers-color-scheme:light)"/>

Detecting mode in javascript

// select the favicon
const faviconEl = document.querySelector('link[rel="icon"]') 

// watch for changes 
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
mediaQuery.addEventListener('change', themeChange)

// listener 
function themeChange(event) {
  if (event.matches) {
    faviconEl.setAttribute('href', 'favicon-dark.png')
  } else {
    faviconEl.setAttribute('href', 'favicon-light.png')
  }
}