nuǝW pǝuoᴉʇᴉsoԀ ʎlǝʌᴉʇɐƃǝN

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published


    npm version

    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.


    If you use npm

    npm install react-usefavicon

    For yarn

    yarn add react-usefavicon


    import { useFavicon } from "react-usefavicon";
    function App() {
      const [
       ] = 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

    Ideas & Loose Ends


    npm i react-usefavicon

    DownloadsWeekly Downloads






    Unpacked Size

    96.5 kB

    Total Files


    Last publish


    • julesblm