Next.js Discord

Discord Forum

Why don't I have a title and favicon?

Unanswered
Flemish Giant posted this in #help-forum
Open in Discord
Flemish GiantOP
This is my layout.jsx

I'm using NextJS 13 with app dir

'use client';
import './globals.css'

// Next
import Head from 'next/head';

export default function RootLayout({ children }) {

  return (
    <html lang="en">
      <Head>
        <title>Textuva - Learn Anything, Your Way</title>
        {/* Add the link to your favicon */}
        <link rel="icon" href="/textuva-logo.ico" />
      </Head>
      <body>
          ...
      </body>
    </html>
  )
}

61 Replies

Ray
because we export metadata instead in app dir
https://nextjs.org/docs/app/building-your-application/optimizing/metadata
Flemish GiantOP
problem is, this is a client side page and I need to "use client"
Ray
why would you make the root layout as a client component?
Flemish GiantOP
I pass icons to a component in my root layout
Ray
it need to be client to pass icons?
Flemish GiantOP
this is a seperate project ran under a subdomain of my site, every single page on this side will be client side
Anay-208
Its not a good idea to use 'use client' here
Flemish GiantOP
since its pages only accessed when the user is logged in, only csr
@Ray it need to be client to pass icons?
Flemish GiantOP
phosphor-icons need use client
Ray
leave it server, and make a route group
app/(client)/layout.tsx <- make this client and put all the route inside it
Flemish GiantOP
will take a note of that, I appreciate it
using js though, but will find a way aroudn it
Anay-208
export const metadata: Metadata = {
  title: 'Admin',
  description: 'Admin page',
}

Add this line with title and description
I see your issue is resolved
you can copypaste it
appreciate you trying to help but don't farm answers
Anay-208
Yes, I know. I just wanted to make it easier for you so you can copy paste
@Ray leave it server, and make a route group
Flemish GiantOP
any way I can make this work for the time being? Need this pushed asap no matter if its a sloppy wau to handle it

  return (
    <>
      <head>
        <title>Textuva - Learn Anything, Your Way</title>
        <link rel="icon" href="../public/textuva-logo.ico" />
      </head>
      <body>
        ...
      </body>
    </>
  )
removed the icons
still this doesn't work? Gonna restart dev server real quick to see if it has to do anything with that
Ray
your mean the ico not show?
Flemish GiantOP
okay title works
Ray
where is your icon located
Flemish GiantOP
gonna have to mess around with icon dir prob
Ray
if you can rename it, you can put it inside root of the app folder and name it favicon.ico
check the page element
and see if there is <link rel=icon />
@Ray and see if there is <link rel=icon />
Flemish GiantOP
can you elaborate?
its only used for favicon so
otherwise i use the svg
no still doesn't work :/
@Flemish Giant no still doesn't work :/
Ray
do you see there is a <link rel=icon href='/textuva-logo.ico' /> in the page source?
Flemish GiantOP
<link rel="icon" href="favicon.ico">
yes!
maybe corrupt ico?
Ray
you rename to favicon.ico?
click the link and see if it open correctly
Flemish GiantOP
i did
Ray
does the link work?
Flemish GiantOP
it links to this
got it
needed to put it in the public folder
Ray
yes
Flemish GiantOP
now i can also just use the svg
:p
thanks @Ray
idk if there is like a thank system here
Ray
yes the one under /app folder only support favicon.ico
Flemish GiantOP
sorry for the ping haha
quite small though, any way I can make it bigger?
using the svg
Ray
just mark solution 😆
you could try to resize it? or use some favicon generator
Flemish GiantOP
I will, thanks!