useFavicon

設置頁面的 favicon 圖標。

useFavicon 透過操作文件標頭中的 <link rel="icon"> 元素來動態更新頁面的網站圖示。傳入圖示 URL（以及可選的基礎 URL 和 rel 屬性），hook 將建立或更新相應的連結元素。這對於在瀏覽器分頁中視覺化反映應用程式狀態非常有用。

使用場景

  • 更改網站圖示以指示未讀通知或狀態變更
  • 根據當前主題或品牌上下文切換網站圖示
  • 在瀏覽器分頁中顯示使用者上傳或動態生成的圖示

注意事項

  • SSR 安全：此 hook 在伺服器端渲染時為空操作。伺服器上不會存取 document。
  • DOM 操作：此 hook 直接修改 document.head 中的 <link> 元素。變更會立即反映在瀏覽器分頁中。
  • 相關 hooks：另請參閱 useTitle 用於動態設定文件標題。

Usage

Live Editor

function Demo() {
  const logo = 'https://react.dev/favicon.ico';
  const twitter = 'https://twitter.com/favicon.ico';
  const [icon, setIcon] = useState(twitter);
  useFavicon(icon);
  return (
    <div>
      <p>更改 Favicon 為</p>
      <button
        onClick={() => {
          setIcon(logo);
        }}
      >
        React
      </button>
      <button
        onClick={() => {
          setIcon(twitter);
        }}
      >
        Twitter
      </button>
    </div>
  );
};
Result

API

useFavicon

Returns

void

Arguments

參數名描述類型預設值
href图标路径string (必填)-
baseUrl基础 urlstring | undefined-
rel设置 link 标签的 rel 属性string | undefinedicon