favicon not changing
Unanswered
Southeastern blueberry bee posted this in #help-forum
Southeastern blueberry beeOP
as u can see my favicon isnt changing
74 Replies
Southeastern blueberry beeOP
Would you be able to show the full project structure? @Southeastern blueberry bee
Southeastern blueberry beeOP
@Southeastern blueberry bee Click to see attachment
Southeastern blueberry beeOP
this in /client
@Southeastern blueberry bee Click to see attachment
The favicon.ico is inside /app?
@B33fb0n3 The favicon.ico is inside /app?
Southeastern blueberry beeOP
yes
thats where it is put when i do
npx create-next-app@latest ...
so i put my custom one there
Would you rename it to „icon.ico“ and restart your app and clear the cache?
Southeastern blueberry beeOP
cache of my bnrower?
Yes
You don’t have a middleware, right?
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}`);
});
});
English Angora
I have my favicon in /public and I have it linked in my <head> like this:
<link rel="icon" href="/favicon.ico" />
<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" />
He uses the app folder. He can’t use the <Head> part
Southeastern blueberry beeOP
no
thats all of my index.js
in /server
@B33fb0n3 He uses the app folder. He can’t use the <Head> part
English Angora
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?
That’s Pages dir only
@Southeastern blueberry bee thats all of my index.js
Do you see where the browser calls the favocon from?
Southeastern blueberry beeOP
Does your head tag in your browser contains the url to the favocon?
https://github.com/vercel/next.js/discussions/14532#discussioncomment-30197
you need this on your express
you need this on your express
Southeastern blueberry beeOP
Yea, then it’s served though next. Then you need to do it like ray said
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
doesnt work
@Southeastern blueberry bee Click to see attachment
click this link and see if it can open the ico?
Southeastern blueberry beeOP
its not even there
ok put this on your app/layout.tsx
export const metadata = {
icon: "/favicon.ico"
}
icon: "/favicon.ico"
}
Southeastern blueberry beeOP
sorry should be
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
icons: {
icon: '/favicon.ico'
}
}
Southeastern blueberry beeOP
didnt change anything
and when i do /favicon.ico
CANNOT GET /favicon.ico
Southeastern blueberry beeOP
its on custom url
also need to remove app/favicon.ico
Southeastern blueberry beeOP
@Ray also need to remove app/favicon.ico
Southeastern blueberry beeOP
it is
show the server code again pls
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}`);
});
});
Southeastern blueberry beeOP
ill turn it on
try now
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
Southeastern blueberry beeOP
what
it doesnt for me
clear your browser cache?
Southeastern blueberry beeOP
i pressed clear data
and it doesnt fix
or purge cf cache too
its cached
or wait for 14400
as long as it show on my side, it should work
or ask someone who can try to open it
Southeastern blueberry beeOP
ok
ty