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")
);