Favicon

[MincePie]

Has anyone figured out how to add a favicon to the _document.tsx head?

[JClackett]

Use https://www.favicon-generator.org to generate the favicon icons and copy them all into the public directory in the web package, if this doesn't exist yet it should go next to "src" i.e. "packages/web/public"

then add this to your _app.tsx file in within the "Head" component

        <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
        <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
        <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
        <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
        <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
        <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
        <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
        <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
        <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="manifest" href="/manifest.json" />
        <meta name="msapplication-TileColor" content="#ffffff" />
        <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
        <meta name="theme-color" content="#ffffff"></meta>

[MincePie]

thanks Jack

[MincePie]

Did this work for you Jack? I can't get it to read the favicon or the title properties from either _app.tsx or _document.tsx. I also tried referencing favicon.ico from these files and still cant get the browser tab to read the values. I think it might have something to do with this post (I'm still trying to make sense of what it says) https://beta.nextjs.org/docs/api-reference/file-conventions/head

[JClackett]

Are you using next version 13? and are you using the "app" directory, if not it should work as described - ill push an example soon to show how it works

[MincePie]

For next version 12.3.1, in the app directory, I can change the text of the browser tab (in the title property on index.tsx), but I can't get it to update the favicon. Thank you again.