favicon-switcher
v1.2.2
Published
Switch page favicons using media queries
Downloads
2,911
Maintainers
rumkinReadme
Favicon Switcher
Switches site's favicon by matching media queries. It could be used for light/dark mode switching. Due to browsers don't support all Media Query features in link tag, this module fixes it.
Usage
Script doesn't require any setup or configuration and works like a polyfill. The example below shows how to make dark/light mode icon switching.
Use the main library to automatically turn icon switching on:
<script src="https://unpkg.com/[email protected]/dist/index.js" crossorigin="anonymous" type="application/javascript"></script>If you need more control to turn switching on and off use one of the next module:
UMD
Use with UMD:
<script src="https://unpkg.com/[email protected]/dist/index.umd.js" crossorigin="anonymous" type="application/javascript"></script>
<script>faviconSwitcher()</script>ESM
Use as ES module:
<script type="module" language="javascript">
import initSwitcher from 'https://unpkg.com/[email protected]/dist/index.esm.js'
// Subscribe to media queries changing events
const unsubscribe = initSwitcher()
// Unsubscribe later on some condition. For example on page navigation.
unsubscribe()
</script>Complete example
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="icon" media="(prefers-color-scheme:dark)" href="favicon-dark.png" type="image/png" />
<link rel="icon" media="(prefers-color-scheme:light)" href="favicon-light.png" type="image/png" />
<script src="https://unpkg.com/[email protected]/dist/index.js" crossorigin="anonymous" type="application/javascript"></script>
</head>
<body></body>
</html>License
MIT © Rumkin