Registry / web-framework / react-favicon

react-favicon

library2.0.7jsnpmunverified

react-favicon is a React component that enables dynamic control over a web application's favicon. It allows developers to easily update the favicon image using a URL or a base64 encoded string, integrate animated sequences from a list of URLs, toggle these animations on and off, and display alert bubbles with customizable text and background colors directly on the favicon. Additionally, it supports custom icon overlays through a render function and offers a mechanism to preserve existing favicon links on the page, which can be beneficial for specific browser behaviors like desktop Safari. The package is currently at version 2.0.7 and appears to have an active release cadence, with recent updates ensuring compatibility with React 19 and addressing various internal component optimizations. Its key differentiator lies in providing a declarative, React-idiomatic way to manage complex favicon behaviors, moving beyond simple static <link> tags, making it suitable for applications requiring dynamic visual feedback in the browser tab.

web-framework

npm install react-favicon

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-FAVICON

react-favicon

web-frameworkjavascriptv2.0.7

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Favicon

✓ import Favicon from 'react-favicon';

✗ const Favicon = require('react-favicon');

Primary component import. CommonJS 'require' style is generally incorrect in modern React/ESM projects.

FaviconProps

✓ import type { FaviconProps } from 'react-favicon';

Type import for component props when using TypeScript.

Favicon (with alias)

✓ import MyFavicon from 'react-favicon';

You can alias the default import if 'Favicon' conflicts with another symbol.

Demonstrates basic `Favicon` usage with a static URL and an animated sequence, updating the browser tab's icon dynamically. Includes basic error handling for root element.

import React from "react"; import ReactDOM from "react-dom"; import Favicon from "react-favicon"; function App() { const githubFaviconUrl = "http://oflisback.github.io/react-favicon/img/github.ico"; const animatedFavicons = [ "http://oflisback.github.io/react-favicon/img/github.ico", "https://www.google.com/favicon.ico", "https://www.npmjs.com/favicon.ico" ]; return ( <div> <Favicon url={githubFaviconUrl} /> <h1>Hello, Favicon!</h1> <p>This component dynamically sets the favicon for your page.</p> <p> You can also animate it or show alerts. Here's an animated example: </p> <Favicon url={animatedFavicons} animated={true} animationDelay={1000} /> <p>Check your browser tab to see the favicon change every second!</p> </div> ); } // Assumes an HTML element with id="root" exists. const rootElement = document.getElementById("root"); if (rootElement) { ReactDOM.render( <App />, rootElement ); } else { console.error("Root element not found. Please ensure an element with id='root' exists in your HTML."); }

Debug

Known issues

breakingVersion 2.0.0 introduced a rewrite to React's functional component API and a new build system. While the public API was intended to remain compatible, internal changes might affect projects with specific bundler configurations or reliance on pre-v2 internal behaviors.

fix

Review your bundler configuration for ESM/CJS compatibility. If issues arise, report bugs to the maintainers, as API breakage was not intended.

affects: >=2.0.0

gotchaThe `defaultProps` functionality was inconsistently handled across patch versions 2.0.4, 2.0.5, and 2.0.6 due to fixes and reverts related to issue #54. Relying on implicit `defaultProps` might lead to unexpected behavior or regressions in specific patch versions.

fix

Always explicitly pass all required props to the `Favicon` component, or define default values within your consuming component, rather than relying solely on the library's `defaultProps`.

affects: 2.0.4 - 2.0.6

gotchaThe `keepIconLink` prop defaults to `() => false`. This means `react-favicon` will remove existing favicon links from the document head when it takes control. If you intend to preserve pre-existing favicons (e.g., for specific browser behaviors like desktop Safari or during initial page load), you must explicitly set this prop.

fix

Pass `keepIconLink={() => true}` to the `Favicon` component if you wish to prevent it from removing other favicon `<link>` tags in the document head.

affects: All versions

gotchaThe `url` prop is required and expects either a `string` for a static favicon or a `string[]` for an animated sequence. Providing `null`, `undefined`, or an invalid type will prevent the favicon from updating or may cause runtime errors.

fix

Ensure the `url` prop is always provided and is of type `string` or `string[]`.

affects: All versions

Errors

Common errors & fixes

TypeError: Favicon is not a function

Attempting to import `Favicon` using CommonJS `require` syntax in an environment expecting ESM, or a bundler misconfiguration.

fix

Use ESM `import Favicon from 'react-favicon';` in your JavaScript/TypeScript files.

Property 'url' is missing in type '{}' but required in type 'FaviconProps'.

When using TypeScript, the required `url` prop was not provided to the `Favicon` component.

fix

Ensure you pass the `url` prop: `<Favicon url="https://example.com/favicon.ico" />` or `<Favicon url={['url1', 'url2']} />`.

Cannot read properties of undefined (reading 'alertCount')

A prop that has `null` as its default in the component is being accessed directly without a null-check, or an internal assumption about `defaultProps` was broken by a patch update.

fix

Ensure all props are explicitly passed or correctly default to prevent `undefined` values, especially for props like `alertCount`, `alertFillColor`, etc.

Upgrade

Version history

2.0.7latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for the component to function within a React application.

react-domrequiredRequired for rendering React components in a browser environment.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/oflisback/react-favicon ↗

packagehttps://www.npmjs.com/package/react-favicon ↗