# react-favicon

> React favicon helper

Latest version **2.0.7** (published 2024-07-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-favicon
pnpm add react-favicon
yarn add react-favicon
bun add react-favicon
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.7 |
| Published | 2024-07-07 |
| First published | 2014-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 34.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 199 |
| Author | Cezary Wojtkowski |
| Maintainers | oflisback |

## Links

- npm: https://www.npmjs.com/package/react-favicon
- Repository: https://github.com/oflisback/react-favicon
- Homepage: https://github.com/oflisback/react-favicon#readme
- Issues: https://github.com/oflisback/react-favicon/issues
- npm.io page: https://npm.io/package/react-favicon

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1

## Recent versions

- 2.0.7 (latest) — 2024-07-07
- 2.0.6 — 2024-07-07
- 2.0.5 — 2024-05-22
- 2.0.4 — 2024-05-18
- 2.0.3 — 2023-03-12
- 2.0.2 — 2023-03-12
- 2.0.1 — 2023-03-12
- 2.0.0 — 2023-03-11
- 1.0.1 — 2022-06-28
- 1.0.0 — 2022-03-03
- 0.0.26 — 2022-01-28
- 0.0.25 — 2021-10-18
- 0.0.24 — 2021-10-17
- 0.0.23 — 2021-06-04
- 0.0.22 — 2021-05-06
- … 21 more at https://npm.io/package/react-favicon/versions

## README

# 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](./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

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

See [example](./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.

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

---
_Source: https://npm.io/package/react-favicon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._