Next.js Discord

Discord Forum

favicon not changing

Unanswered
Southeastern blueberry bee posted this in #help-forum
Open in Discord
Avatar
Southeastern blueberry beeOP
as u can see my favicon isnt changing

74 Replies

Avatar
Southeastern blueberry beeOP
Image
Image
Image
Avatar
B33fb0n3
Would you be able to show the full project structure? @Southeastern blueberry bee
Avatar
Southeastern blueberry beeOP
Image
Image
this in /client
Avatar
B33fb0n3
The favicon.ico is inside /app?
Avatar
Southeastern blueberry beeOP
yes
thats where it is put when i do npx create-next-app@latest ...
so i put my custom one there
Avatar
B33fb0n3
Would you rename it to „icon.ico“ and restart your app and clear the cache?
Avatar
Southeastern blueberry beeOP
cache of my bnrower?
Avatar
B33fb0n3
Yes
You don’t have a middleware, right?
Avatar
Southeastern blueberry beeOP
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}`);
    });

});
Avatar
English Angora
I have my favicon in /public and I have it linked in my <head> like this:
<link rel="icon" href="/favicon.ico" />
Avatar
B33fb0n3
He uses the app folder. He can’t use the <Head> part
Your images are also run thought this?
Avatar
Southeastern blueberry beeOP
no
thats all of my index.js
in /server
Avatar
English Angora
Whaaat? So if you use app, you can't use Next Head?
Avatar
B33fb0n3
That’s Pages dir only
Do you see where the browser calls the favocon from?
Avatar
Southeastern blueberry beeOP
Image
Image
Avatar
B33fb0n3
Does your head tag in your browser contains the url to the favocon?
Avatar
Ray
Avatar
Southeastern blueberry beeOP
Image
Avatar
B33fb0n3
Yea, then it’s served though next. Then you need to do it like ray said
Avatar
Ray
and put the ico to public
Avatar
Southeastern blueberry beeOP
doesnt work
Image
Image
Avatar
Ray
click this link and see if it can open the ico?
Avatar
Southeastern blueberry beeOP
its not even there
Image
Avatar
Ray
ok put this on your app/layout.tsx
export const metadata = {
icon: "/favicon.ico"
}
Avatar
Southeastern blueberry beeOP
Image
Avatar
Ray
sorry should be
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
  icons: {
    icon: '/favicon.ico'
  }
}
Avatar
Southeastern blueberry beeOP
didnt change anything
and when i do /favicon.ico
CANNOT GET /favicon.ico
Avatar
Ray
Avatar
Southeastern blueberry beeOP
its on custom url
Avatar
Ray
also need to remove app/favicon.ico
Avatar
Southeastern blueberry beeOP
it is
Image
Avatar
Ray
show the server code again pls
Avatar
Southeastern blueberry beeOP
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}`);
    });

});
Avatar
Ray
Image
Avatar
Southeastern blueberry beeOP
ill turn it on
try now
Avatar
English Angora
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
Avatar
Ray
it shows
Image
Avatar
Southeastern blueberry beeOP
what
it doesnt for me
Image
Image
Avatar
Ray
clear your browser cache?
Image
Avatar
Southeastern blueberry beeOP
Image
i pressed clear data
and it doesnt fix
Avatar
Ray
or purge cf cache too
its cached
Image
or wait for 14400
as long as it show on my side, it should work
or ask someone who can try to open it
Avatar
Southeastern blueberry beeOP
ok
ty