favicon not changing

Unanswered

Southeastern blueberry bee posted this in #help-forum

Open in Discord

Southeastern blueberry beeOP

2023-12-09T17:54:32.000Z

as u can see my favicon isnt changing

74 Replies

Southeastern blueberry beeOP

2023-12-09T17:54:39.000Z

B33fb0n3

2023-12-09T17:58:10.000Z

Would you be able to show the full project structure? @Southeastern blueberry bee

Southeastern blueberry beeOP

2023-12-09T17:58:20.000Z

@Southeastern blueberry bee Click to see attachment

Southeastern blueberry beeOP

2023-12-09T17:58:36.000Z

this in /client

@Southeastern blueberry bee Click to see attachment

B33fb0n3

2023-12-09T17:59:24.000Z

The favicon.ico is inside /app?

@B33fb0n3 The favicon.ico is inside /app?

Southeastern blueberry beeOP

2023-12-09T17:59:29.000Z

yes

thats where it is put when i do npx create-next-app@latest ...

so i put my custom one there

B33fb0n3

2023-12-09T18:00:24.000Z

Would you rename it to â€žicon.icoâ€œ and restart your app and clear the cache?

Southeastern blueberry beeOP

2023-12-09T18:00:41.000Z

cache of my bnrower?

B33fb0n3

2023-12-09T18:00:45.000Z

Yes

You donâ€™t have a middleware, right?

Southeastern blueberry beeOP

2023-12-09T18:01:29.000Z

express

const express = require("express");
const next = require("next");
const cors = require('cors')

const port = 8080;
const dev = "production";
const app = next({ dev, dir: '../client' });
const handle = app.getRequestHandler();

app.prepare().then(() => {
    
    const server = express();

    server.use(cors())

    server.get('/', (req, res) => {
        return app.render(req, res, "/");
    });

    server.get('/api/v1/guildamount', async (req, res) => {
        return res.send({ amount: '1' })
    })

    server.listen(port, (err) => {
        if (err) throw err;
        console.log(`Ready on http://localhost:${port}`);
    });

});

English Angora

2023-12-09T18:02:16.000Z

I have my favicon in /public and I have it linked in my <head> like this:
<link rel="icon" href="/favicon.ico" />

@English Angora I have my favicon in /public and I have it linked in my <head> like this: <link rel="icon" href="/favicon.ico" />

B33fb0n3

2023-12-09T18:02:42.000Z

He uses the app folder. He canâ€™t use the <Head> part

@Southeastern blueberry bee js const express = require("express"); const next = require("next"); const cors = require('cors') const port = 8080; const dev = "production"; const app = next({ dev, dir: '../client' }); const handle = app.getRequestHandler(); app.prepare().then(() => { const server = express(); server.use(cors()) server.get('/', (req, res) => { return app.render(req, res, "/"); }); server.get('/api/v1/guildamount', async (req, res) => { return res.send({ amount: '1' }) }) server.listen(port, (err) => { if (err) throw err; console.log(`Ready on http://localhost:${port}`); }); });

B33fb0n3

2023-12-09T18:03:06.000Z

Your images are also run thought this?

Southeastern blueberry beeOP

2023-12-09T18:03:12.000Z

thats all of my index.js

in /server

@B33fb0n3 He uses the app folder. He canâ€™t use the <Head> part

English Angora

2023-12-09T18:03:43.000Z

Whaaat? So if you use app, you can't use Next Head?

@English Angora Whaaat? So if you use app, you can't use Next Head?

B33fb0n3

2023-12-09T18:04:04.000Z

Thatâ€™s Pages dir only

@Southeastern blueberry bee thats all of my index.js

B33fb0n3

2023-12-09T18:04:38.000Z

Do you see where the browser calls the favocon from?

Southeastern blueberry beeOP

2023-12-09T18:04:58.000Z

B33fb0n3

2023-12-09T18:05:37.000Z

Does your head tag in your browser contains the url to the favocon?

Ray

2023-12-09T18:05:52.000Z

https://github.com/vercel/next.js/discussions/14532#discussioncomment-30197
you need this on your express

Southeastern blueberry beeOP

2023-12-09T18:06:03.000Z

B33fb0n3

2023-12-09T18:06:35.000Z

Yea, then itâ€™s served though next. Then you need to do it like ray said

Ray

2023-12-09T18:07:24.000Z

and put the ico to public

@Ray https://github.com/vercel/next.js/discussions/14532#discussioncomment-30197 you need this on your express

Southeastern blueberry beeOP

2023-12-09T18:09:04.000Z

doesnt work

@Southeastern blueberry bee Click to see attachment

Ray

2023-12-09T18:10:18.000Z

click this link and see if it can open the ico?

Southeastern blueberry beeOP

2023-12-09T18:10:55.000Z

its not even there

Ray

2023-12-09T18:11:12.000Z

ok put this on your app/layout.tsx

export const metadata = {
icon: "/favicon.ico"
}

Southeastern blueberry beeOP

2023-12-09T18:12:09.000Z

Ray

2023-12-09T18:12:43.000Z

sorry should be

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
  icons: {
    icon: '/favicon.ico'
  }
}

Southeastern blueberry beeOP

2023-12-09T18:13:16.000Z

didnt change anything

and when i do /favicon.ico

CANNOT GET /favicon.ico

Ray

2023-12-09T18:14:45.000Z

http://localhost:8080/favicon.ico ?

Southeastern blueberry beeOP

2023-12-09T18:15:45.000Z

its on custom url

Ray

2023-12-09T18:15:52.000Z

also need to remove app/favicon.ico

Southeastern blueberry beeOP

2023-12-09T18:15:58.000Z

https://customprofiles.xyz/favicon.ico

@Ray also need to remove app/favicon.ico

Southeastern blueberry beeOP

2023-12-09T18:16:07.000Z

it is

Ray

2023-12-09T18:16:48.000Z

show the server code again pls

Southeastern blueberry beeOP

2023-12-09T18:17:09.000Z

const express = require('express');
const next = require('next');
const path = require('path');
const cors = require('cors')

const port = 8080;
const dev = "production";
const app = next({ dev, dir: '../client' });
const handle = app.getRequestHandler();

app.prepare().then(() => {
    
    const server = express();

    server.use(express.static(path.join(__dirname, '../client/public')))
    server.use('/_next', express.static(path.join(__dirname, '../client/.next')))
    server.use(cors())

    server.get('/', (req, res) => {
        return app.render(req, res, "/");
    });

    server.get('/api/v1/guildamount', async (req, res) => {
        return res.send({ amount: '1' })
    })

    server.listen(port, (err) => {
        if (err) throw err;
        console.log(`Ready on http://localhost:${port}`);
    });

});

Ray

2023-12-09T18:18:00.000Z

Southeastern blueberry beeOP

2023-12-09T18:18:09.000Z

ill turn it on

try now

English Angora

2023-12-09T18:18:51.000Z

Now that I think of it, I had an issue at work where the public folder didn't show files. It was on React, but I suspected it could have been due to webpack not being configured properly. I have no idea if this info would help

Ray

2023-12-09T18:19:50.000Z

it shows