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

Set or animate your React app's favicon
https://github.com/oflisback/react-favicon

Last synced: 9 days ago
JSON representation

Set or animate your React app's favicon

• Host: GitHub
• URL: https://github.com/oflisback/react-favicon
• Owner: oflisback
• Created: 2014-12-09T07:39:20.000Z (about 10 years ago)
• Default Branch: main
• Last Pushed: 2024-07-07T10:36:06.000Z (5 months ago)
• Last Synced: 2024-09-07T20:17:20.076Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 944 KB
• Stars: 196
• Watchers: 5
• Forks: 38
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• jimsghstars - oflisback/react-favicon - Set or animate your React app's favicon (TypeScript)

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

```

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(

  


    

    
Hello, Favicon!

  
,

  document.getElementById("root")

);

```