react-favicon

Control the favicon from a React app

Version 2.x

The major version bump from 1.0.1 to 2.x versions does not include any API changes. The version bump was made because the build and release system was reworked from scratch, also the component was converted to use React's functional component API. Please report bugs if you encounter any.

Demo

https://oflisback.github.io/react-favicon

This example is available in example.

Installation

npm install react-favicon --save

Features

Update the favicon with a url or base64 encoded image
Animate through a list of urls
Toggle animation
Alert bubbles
Allow some favicons to be kept on the page, which may be desirable for desktop Safari
Custom icon overlay

Props

Name	Type	Default	Required	Description
alertCount	number or string	null	No	Number or string to display as icon overlay.
alertFillColor	string	red	No	Alert bubble background color.
alertTextColor	string	white	No	Alert bubble text color.
iconSize	number	16	No	Size of the favicon to avoid pixelization
animated	boolean	true	No	True to animate favicon (for supported icons)
animationDelay	number	500	No	Time between animation frames
keepIconLink	function()	() => false	No	Return true to remove icon link from document head
renderOverlay	function(canvas, context)	null	No	Function called to to draw custom favicon overlay
url	string or array of strings		Yes	Favicon url or array of url:s to animate the icons

Usage

<Favicon url={[url1, url2, url3]} />

See example for the demo page source code. Basic usage is as simple as importing the react-favicon package and including a Favicon component in the react component tree.

import React from "react";
import ReactDOM from "react-dom";
import Favicon from "react-favicon";

ReactDOM.render(
  <div>
    <Favicon url="http://oflisback.github.io/react-favicon/img/github.ico" />
    <h1>Hello, Favicon!</h1>
  </div>,
  document.getElementById("root")
);