使用 react-hook 在 safari 上设置动态图标

Question

我有一个简单的 react-hook 应用程序，它使用 next.js，我尝试动态更新 fav-icon。所以在我的 index.js 我有：

import React from "react";
import Head from "next/head";
import { useTheme } from "@emotion/react";

export default function Home() {
    const theme = useTheme();

    return (
        <>
            <Head>
                <link id="favicon" rel="shortcut icon" type="image/png" href={theme.images.favicon} />
            </Head>
            <HomePage />
        </>
    );
}

这在 firefox、chrome 和 edge 上运行良好，但在 safari 上却不行我仍然从 /public/favicon.ico.

获取默认图标

我上网查了一下，发现有不同的解决办法。所以首先我尝试设置不同的 link (https://css-tricks.com/favicon-quiz/):

<link rel="apple-touch-icon" sizes="57x57" href={theme.images.favicon} />
<link rel="apple-touch-icon" sizes="114x114" href={theme.images.favicon} />
<link rel="apple-touch-icon" sizes="72x72" href={theme.images.favicon} />
<link rel="apple-touch-icon" sizes="144x144" href={theme.images.favicon} />
<link rel="apple-touch-icon" sizes="60x60" href={theme.images.favicon} />
<link rel="apple-touch-icon" sizes="120x120" href={theme.images.favicon} />
<link rel="apple-touch-icon" sizes="76x76" href={theme.images.favicon} />
<link rel="apple-touch-icon" sizes="152x152" href={theme.images.favicon} />

但没有任何变化。

我尝试使用 use-favicon 钩子 (https://bit.dev/giladshoham/react-hooks/use/use-favicon):

import React from "react";
import Head from "next/head";
import { useTheme } from "@emotion/react";
import {useFavicon} from 'react-use';

export default function Home() {
    const theme = useTheme();

    useFavicon({theme.images.favicon});

    return (
        <>
            <HomePage />
        </>
    );
}

而且我看到这个钩子的演示：https://www.npmjs.com/package/react-favicon 在 safari 上不起作用。

safari 似乎只接受默认的 favicon，我不知道如何使用其他地方的图标。

我确实漏掉了一些东西，希望你能帮助我。

提前致谢。

===== 编辑 =====

我忘了提一些可能比较重要的事情。我也在使用 Next.js

奇怪的是，所有 link 选项卡都在头部听到图片 link 是正确的，但 favicon 没有出现。我加入屏幕截图。

Answer 1

您可以为此使用 React Helmet。 https://www.npmjs.com/package/react-helmet

 import React from "react";
import { Helmet } from "react-helmet";
    import { useTheme } from "@emotion/react";
    
    export default function Home() {
        const theme = useTheme();
    
        return (
            <>
              <Helmet>
            <link
              rel="shortcut icon"
              type="image/jpg"
              href={theme.images.favicon}
            />
                <HomePage />
            </>
        );
    }

Answer 2

将 Head 元素移动到 _app.js 文件后，我开始在 safari 上看到图标。

import React from "react";
import Head from "next/head";

const faviconUrl = "myUrl";

export default function MyApp() {
    return (
        <>
           <Head>
              <link rel="icon shortcut " href={faviconUrl} />

              <link rel="apple-touch-icon" href={faviconUrl} />
           </Head>
        </>
    );
}

但是我仍然没有找到任何方法来动态更新 safari 上的 favIcon，但看起来这是不可能的。参考：

示例：https://mathiasbynens.be/demo/dynamic-favicons

感谢您的帮助。

Answer 3

在 NextJS 中，您可以通过将其绑定到状态来动态更改图标，例如：

<Head>
{ showOtherFavicon
   ? <link rel="icon" href="./logos/favicon_2.png" />
   : <link rel="shortcut icon" href="./logos/favicon_1.png" />
}
</Head>

favicon 文件位于 /public 目录下。

对于 create-react-app 你需要使用 react-helmet，但是因为它是一个 Single Page App，所以它不是' 由 SEO 处理。

如果您在浏览器中没有看到图标更新，您可以清空缓存，有时即使刷新页面也不会反映更新。

使用 react-hook 在 safari 上设置动态图标

Set a dynamic favicon on safari using react-hook

favicon

reactjs

next.js

react-hooks