Next.js Discord

Discord Forum

favicon not working

Unanswered
Mackenzie River Husky posted this in #help-forum
Open in Discord
Mackenzie River HuskyOP
I'm trying to wrangle my icon to work but everything I've done seems to not be working. I think it has something to do with how I had to set up my <head> tag but I'm not sure. If someone has a better way to do this please let me know!

44 Replies

Mackenzie River HuskyOP
Using app
It's the first Next app I've made so I very may well be doign something wrong lol
@Mackenzie River Husky Using app
sdanialraza
I'd recommend using metadata, when I started, I also used Head tag, but I prefer metadata much more, especially when you're using TypeScript because of intellisense, it'd be something like this, you'd export a variable called metadata in your layout file
export const metadata = {
  icons: "/icon.png",
  ...
}

Here's the link to the metadata documentation:
https://nextjs.org/docs/app/building-your-application/optimizing/metadata
@Mackenzie River Husky It's the first Next app I've made so I very may well be doign something wrong lol
sdanialraza
I am new to Next.js as well, and it's been tough so I know what you mean
Mackenzie River HuskyOP
Ah so it just has an icon thing for the metadata
And yeah lol. Coming from normal react this is like, just different enough to be very confusing
sdanialraza
I have not worked with a single icon file but different depending on what device you're using so let me make sure I am showing you the correct code
That should work
Mackenzie River HuskyOP
It doesn't seem to be doingn anything. I may have the file paths wrong?
Mackenzie River HuskyOP
Where ever it needs to be lol. Right now I have it just dropped inot the app folder
Ive tried putting it in public like a lot of what google says but that doesnt do anything
sdanialraza
Inspect the page and see if you see a tag to do with icon there, like this:
Yacare Caiman
Im my experience, name your icon "favicon.png" and drop it inside the app folder
It should automátically load it, without the need for specifying it in metadata
@sdanialraza Inspect the page and see if you see a tag to do with icon there, like this:
Mackenzie River HuskyOP
The only icon link in there is the one i've added
Mackenzie River HuskyOP
It is giving me a 500 with the favicon though
So something is fucked up with the pathing I bet but idk what
@Mackenzie River Husky So something is fucked up with the pathing I bet but idk what
sdanialraza
Yeah, what does it show when you put the icon in the public folder?
Mackenzie River HuskyOP
Same thing, still a get error
sdanialraza
Can you show the error?
Mackenzie River HuskyOP
Full thing is just a 500. It cant find the icon but I don't know what it wants out of me to FIND the icon lol
sdanialraza
Maybe try converting the png file to ico and see if that makes a difference
Mackenzie River HuskyOP
I figured out that the error is specifically from the head path. So if I can work out wtf path it wants it may fix it
not-milo.tsx
Theoretically you should be able to use .png, .gif and .ico files. So that shouldn't be a problem.

https://www.w3.org/2005/10/howto-favicon
Did you switch to the new metadata api as Danial suggested?
Mackenzie River HuskyOP
I treid using that yeah. Didn't seem to do anything but it may have also had the wrong file path. The error is giving me the path that I give me <head> tag so that's where it seems to want it to be?
not-milo.tsx
Where's you favicon located in the project's directory?
Mackenzie River HuskyOP
At the moment it's in the media folder. But Ive moved it to the app, to its own image folder in public, and about 9 other places lol
Mackenzie River HuskyOP
This is my folder layout
not-milo.tsx
Ok, leave your favicon at the root of the public directory and reference it like this:

export const metadata = {
   title: "Your title here...",
   description: "Your description here...",
   icons: {
      icon: {
         rel: "icon",
         type: "image/png",
         sizes: "32x32", // change this accordingly
         url: "/favicon.png",
      },
      // ...other icons...
   },
};
Keep in mind that the metadata object should be exported from either a layout.tsx or page.tsx file. And the paths you declare in there are relative to the public directory.
not-milo.tsx
On a separate note. That's a really tedious way of internationalising your website. Take a look at the official Next.js i18n example https://github.com/vercel/next.js/tree/canary/examples/app-dir-i18n-routing
Mackenzie River HuskyOP
Hmm. That seems to still not be working. I think I've done my head totally wrong thought. Do you have good examples of how to actually set up your head for a NExt project?
not-milo.tsx
I would advise you against using the head tag.

Currently the correct way of declaring page metadata is through the usage of the metadata object.

See this doc page:

https://nextjs.org/docs/app/api-reference/file-conventions/metadata
Mackenzie River HuskyOP
Ive looked over that page several times and nothing on it has seemed to work. I'm wondering what it is I'm doing wrong with it
not-milo.tsx
Without seeing your code it's kinda hard to tell tbh
sdanialraza
Also the updated file structure