Replies: 3 comments 2 replies
-
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> |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Has anyone figured out how to add a favicon to the _document.tsx head?
Beta Was this translation helpful? Give feedback.
All reactions