{"id":11704,"library":"react-favicon","title":"React Favicon Helper","description":"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 tags, making it suitable for applications requiring dynamic visual feedback in the browser tab.","status":"active","version":"2.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/oflisback/react-favicon","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-favicon","lang":"bash","label":"npm"},{"cmd":"yarn add react-favicon","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-favicon","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the component to function within a React application.","package":"react","optional":false},{"reason":"Required for rendering React components in a browser environment.","package":"react-dom","optional":false}],"imports":[{"note":"Primary component import. CommonJS 'require' style is generally incorrect in modern React/ESM projects.","wrong":"const Favicon = require('react-favicon');","symbol":"Favicon","correct":"import Favicon from 'react-favicon';"},{"note":"Type import for component props when using TypeScript.","symbol":"FaviconProps","correct":"import type { FaviconProps } from 'react-favicon';"},{"note":"You can alias the default import if 'Favicon' conflicts with another symbol.","symbol":"Favicon (with alias)","correct":"import MyFavicon from 'react-favicon';"}],"quickstart":{"code":"import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport Favicon from \"react-favicon\";\n\nfunction App() {\n const githubFaviconUrl = \"http://oflisback.github.io/react-favicon/img/github.ico\";\n const animatedFavicons = [\n \"http://oflisback.github.io/react-favicon/img/github.ico\",\n \"https://www.google.com/favicon.ico\",\n \"https://www.npmjs.com/favicon.ico\"\n ];\n\n return (\n
\n \n
Hello, Favicon!
\n
This component dynamically sets the favicon for your page.
\n
\n You can also animate it or show alerts. Here's an animated example:\n
\n \n
Check your browser tab to see the favicon change every second!
\n
\n );\n}\n\n// Assumes an HTML element with id=\"root\" exists.\nconst rootElement = document.getElementById(\"root\");\nif (rootElement) {\n ReactDOM.render(\n ,\n rootElement\n );\n} else {\n console.error(\"Root element not found. Please ensure an element with id='root' exists in your HTML.\");\n}\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Review your bundler configuration for ESM/CJS compatibility. If issues arise, report bugs to the maintainers, as API breakage was not intended.","message":"Version 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.","severity":"breaking","affected_versions":">=2.0.0"},{"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`.","message":"The `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.","severity":"gotcha","affected_versions":"2.0.4 - 2.0.6"},{"fix":"Pass `keepIconLink={() => true}` to the `Favicon` component if you wish to prevent it from removing other favicon `` tags in the document head.","message":"The `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.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Ensure the `url` prop is always provided and is of type `string` or `string[]`.","message":"The `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.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use ESM `import Favicon from 'react-favicon';` in your JavaScript/TypeScript files.","cause":"Attempting to import `Favicon` using CommonJS `require` syntax in an environment expecting ESM, or a bundler misconfiguration.","error":"TypeError: Favicon is not a function"},{"fix":"Ensure you pass the `url` prop: `` or ``.","cause":"When using TypeScript, the required `url` prop was not provided to the `Favicon` component.","error":"Property 'url' is missing in type '{}' but required in type 'FaviconProps'."},{"fix":"Ensure all props are explicitly passed or correctly default to prevent `undefined` values, especially for props like `alertCount`, `alertFillColor`, etc.","cause":"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.","error":"Cannot read properties of undefined (reading 'alertCount')"}],"ecosystem":"npm"}