favicon-switcher

1.2.2 • Public • Published

Favicon Switcher

Live preview

Light mode favicon example

Dark mode favicon example

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/favicon-switcher@1.2.2/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/favicon-switcher@1.2.2/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/favicon-switcher@1.2.2/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/favicon-switcher@1.2.2/dist/index.js" crossorigin="anonymous" type="application/javascript"></script>
  </head>
  <body></body>
</html>

License

MIT © Rumkin

Package Sidebar

Install

npm i favicon-switcher

Weekly Downloads

929

Version

1.2.2

License

MIT

Unpacked Size

8.51 kB

Total Files

6

Last publish

Collaborators

  • rumkin