Caution
This is meant for Single-Page React Apps. If you're using a React framework like Next.js or Remix, there are better ways to set the favicon.
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.
If you use npm
npm install react-usefavicon
For yarn
yarn add react-usefavicon
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 callsdrawCallback
.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 is256
pxclear
boolean to start with a blank canvas instead of the favicon. Default isfalse
...props
all other props in the options object are passed on todrawCallback
.
Note: If you call
drawFavicon
multiple times in successsion, the drawings will stack on top of each other. Simply callrestoreFavicon
before callingdrawFavicon
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 take three parameters: a context
object, faviconSize
, and a props
object.
Three simple canvas draw functions are included: drawCircle
, drawSquare
, and drawTextBubble
,
- Joel Califa: Tiny Wins
- CSS Tricks: Emojis as Favicons
- svg-crowbar
- MDN Canvas tutorial
- favicon-badge
- Tinycon
- react-favicon
- 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