{"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 <link> tags, making it suitable for applications requiring dynamic visual feedback in the browser tab.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-favicon"],"cli":null},"imports":["import Favicon from 'react-favicon';","import type { FaviconProps } from 'react-favicon';","import MyFavicon from 'react-favicon';"],"auth":{"required":false,"env_vars":[]},"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    <div>\n      <Favicon url={githubFaviconUrl} />\n      <h1>Hello, Favicon!</h1>\n      <p>This component dynamically sets the favicon for your page.</p>\n      <p>\n        You can also animate it or show alerts. Here's an animated example:\n      </p>\n      <Favicon url={animatedFavicons} animated={true} animationDelay={1000} />\n      <p>Check your browser tab to see the favicon change every second!</p>\n    </div>\n  );\n}\n\n// Assumes an HTML element with id=\"root\" exists.\nconst rootElement = document.getElementById(\"root\");\nif (rootElement) {\n  ReactDOM.render(\n    <App />,\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}