Set a dynamic favicon on safari using react-hook

Question

I've a simple react-hook app that use next.js where I try to dynamically update the fav-icon. So in my index.js I've:

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 />
        </>
    );
}

This work well on firefox, chrome and edge but not on safari I'm still getting the default icon from /public/favicon.ico.

I check online and I see different solution. So first I try to set different 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} />

But nothing change.

I try to use use-favicon hook (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 />
        </>
    );
}

And I see that the demo of this hook : https://www.npmjs.com/package/react-favicon is not working on safari.

It look like safari only accept the default favicon and I don't see how to use an icon from somewhere else.

I certainly miss something and I hope you can help me.

Thx in advance.

===== EDIT =====

I forgot to mention something that might have some importance. I'm also using Next.js

What is weird is that all the link tab are hear inside the head the picture links are correct but the favicon does not appear. I join screen shot.

Does the favicon still not appear if you build the app for production with `next build && next start`? — juliomalves, Aug 10 '21 at 18:02
I try it but still nothing. However if I move my code to the _app.js file the icon appear on safari but I still can't update it dynamicly. I find some post saying safari does not support dynamic loading of favicon: https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically , https://stackoverflow.com/questions/63781987/cant-change-favicon-with-javascript-in-safari If it's the case their is nothing much I can do I guess. — Kvasir, Aug 11 '21 at 03:05

score 0 · Answer 1 · answered Aug 09 '21 at 11:01

You can use React Helmet for this purpose. 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 />
            </>
        );
    }

I try to use Helmet but still nothing. What is really weird is that the tag appear inside the head of the page, the value is good because when i open it I get the picture but it just doesn't show up on safari bar. — Kvasir, Aug 10 '21 at 09:41

score 0 · Accepted Answer · answered Aug 12 '21 at 09:53

After moving the Head element to the _app.js file I start to see the icon on 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>
        </>
    );
}

However I still don't find any way to dynamically update the favIcon on safari but it look like it's just not possible. Ref: Can't change favicon with javascript in safari

Example: https://mathiasbynens.be/demo/dynamic-favicons

Thank for your help.

score 0 · Answer 3 · answered Oct 04 '21 at 10:57

In NextJS, you can dynamically change the favicon by tying it to state, something like:

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

The favicon file is placed under /public directory.

For create-react-app you need to use react-helmet, but since it is a Single Page App, it isn't handled by SEO.

If you don't see the icon updating in your browser, you can empty the cache, sometimes updates are not reflected, even after refreshing the page.

Set a dynamic favicon on safari using react-hook

3 Answers3

Linked