Search code examples
reactjsreact-hooksnext.jsfavicon

Set a dynamic favicon on safari using react-hook

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. enter image description here

Solution

  • 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.