react-usefavicon

Check a live demo here

react-usefavicon is a a React.js hook to control the favicon. Use it to update the favicon with a url, base64 encoded image or an emoji in an SVG. Draw anything on top of the favicon, badges, text, checkmarks, anything! This is useful to notify the user of changes or progress, especially if these are long running and the user is expected to switch tabs. GitHub (read more), Netlify and Slack and many more websites do this to and strangely I couldn't find a React hook for it, so I made my own.

Installing

If you use npm

npm install react-usefavicon

For yarn

yarn add react-usefavicon

Usage

import { useFavicon } from "react-usefavicon";

function App() {
  const [
    faviconHref,
    {
      restoreFavicon,
      drawOnFavicon,
      setEmojiFavicon,
      setFaviconHref,
      jsxToFavicon,
    },
  ] = useFavicon();
}

The hook returns an array containing faviconHref and an object of setter functions.

• faviconHref the current href string of the favicon link element

The setters object contains the following functions

• restoreFavicon() a function to reset the favicon to whatever it was on mount

• drawFavicon(drawCallback, [{ options }]} creates a canvas, copies the current favicon to it and calls drawCallback.

  • drawCallback (required) is a user-supplied function takes in a newly created canvas context, which you can draw anything on with the CanvasRenderingContext2D. So whatever you can draw on <canvas>, you can put it on your favicon!
  • options object (optional) with two configurable properties.
    • faviconSize to set the size of the canvas. Default is 256 px
    • clear boolean to start with a blank canvas instead of the favicon. Default is false
    • ...props all other props in the options object are passed on to drawCallback.

  Note: If you call drawFavicon multiple times in successsion, the drawings will stack on top of each other. Simply call restoreFavicon before calling drawFavicon again to ensure you're drawing on the clean, original favicon.

• setFaviconHref(href) a function to set the href of the favicon tag manually, for example to switch to another static favicon image.

• setEmojiFavicon(emoji) a function to set the favicon to an emoji. Technically, you can use any character, just know that most text characters don't work as well as emoji's as favicons.

• jsxToFavicon(SvgEl) a function that takes in an SVG React Element, renders it to a string and sets it as the favicon. Only SVG-type React elements are allowed!

Draw functions

Draw functions take three parameters: a context object, faviconSize, and a props object.

Three simple canvas draw functions are included: drawCircle, drawSquare, and drawTextBubble,

Credits & Inspiration

• Joel Califa: Tiny Wins
• CSS Tricks: Emojis as Favicons
• svg-crowbar
• MDN Canvas tutorial
• favicon-badge
• Tinycon
• react-favicon

Ideas & Loose Ends

• Option to draw on the original favicon, not just the latest
• Not sure if the querySelector always works. What if there are multiple <link rel="icon"> tags?
• Dark mode for SVG favicon swith prefers-color-scheme
• Tests with jest