Hello! I've been trying to favicon my page for days but I have not succeeded, try the link tag but it does not work, I wish someone could teach me how to do it, thanks
CamilaSolis
All 31 comments
Where do you have your favicon in your folder structure?
stramel
on 17 May 2018
favicons are only guaranteed to work if you drop them in your root folder, but for that you must use a custom server
https://github.com/zeit/next.js/blob/canary/examples/root-static-files/server.js
and copy the file if you do an export
fgarcia
on 21 May 2018
I'm using this for a static export, so a custom server would not work. In this case, I think a custom webpack configuration would work, correct? I've done this before in another project where I did the webpack loader manually.
siakaramalegos
on 23 Jul 2018
@siakaramalegos could you share that config? I'm in the same situation hosting a static export in netlify and I would love a hint on how to set up my next.confg.js.
oquirozm
on 12 Aug 2018
I've the same need, but I'd like to use express, is there an example?
realtebo
on 12 Nov 2018
I, too, am trying to add a favicon using express... I've tried serve-favicon but it doesn't seem to work.
const app = next({dev});
const favicon = require('serve-favicon');
const { join } = require('path');
app.prepare()
.then(() => {
const server = express();
server.use(favicon(join(__dirname, 'static', 'favicon.ico')));
// ...
});
stephanemombuleau
on 5 Dec 2018
place it in pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document';
<html lang="id">
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="icon" type="image/x-icon" href="../static/favicon.ico" />
</Head>
<body className="custom_class">
<Main />
<NextScript />
</body>
</html>
bhirmbani
on 6 Dec 2018
No methods work.
Sorry.
But It's a Chrome bug/feature, not a next.js bug.
realtebo
on 3 Jan 2019
favicon.ico in static folder
server.get('/favicon.ico', (req, res) => (
res.status(200).sendFile('favicon.ico', {root: __dirname + '/static/'})
));
ruock
on 21 Jan 2019
put your icon file in your /static folder and use a <link rel="icon" href="/static/images/icon.ico">
Jauny
on 3 Mar 2019
You can use react-helmet package (helmet) in your Next project and import the favicon.ico as any other image asset.
In _app.js:
render () {
const { Component, pageProps, store } = this.props
return (
<Container>
<Helmet>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href={require("images/favicon.ico")} />
</Helmet>
<Provider store={ store }>
<Component {...pageProps} />
</Provider>
</Container>
)
}
You can also edit the _document.js file and create the link tag there as well.
carlosbensant
on 4 Mar 2019
@carlosbensant I'm not super familiar with Helmet so they might offer some features next/head doesn't, but I next's next/head package does pretty much the same thing as helmet, so in case of your example, I'd recommend using the next package, avoiding an additional dependency in your project.
Jauny
on 4 Mar 2019
@Jauny Glad to read this. I'm going to read the package documentation and see if it matches my current requirements. This thread #5668 sounds quite interesting though.
Adding html attributes is a must-have, because I'm building a multilingual website.
carlosbensant
on 4 Mar 2019
Ah that's interesting, didn't think of using Head of react-helmet to change html's attributes. Seems like it's been marked as a bug, so hopefully someone will take this on!
Jauny
on 4 Mar 2019
It's not a bug. It's listed as one of the React-Helmet features.
carlosbensant
on 4 Mar 2019
I meant seems like this feature missing in next/head has been marked as a bug :)
Jauny
on 4 Mar 2019
For anyone still having issues with this. In your /pages directory, create a file called _app.js and paste the following code
import React from 'react';
import App from 'next/app';
import Head from 'next/head';
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
render() {
const { Component, pageProps } = this.props;
return (
<div>
<Head>
<title>Baya</title>
<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico" />
</Head>
<Component { ...pageProps } />
</div>
);
}
}
export default MyApp;
Ensure your .ico file is located in the same href path as the one you decide to use in the <link /> tag
frontendtony
on 2 May 2019
This will be solved by https://github.com/zeit/next.js/issues/7177
timneutkens
on 2 May 2019
This will be solved by #7177
Awesome!
frontendtony
on 2 May 2019
Adding files for icon and adding these paths within _document.js solved it for me.
lloan
on 12 May 2019
add this line to the Head tag <link rel="icon" type="image/x-icon" href="/static/favicon.ico" /> work for me, the path must be /static/favicon.ico, others won't work, I don't know why
I know now, https://github.com/zeit/next.js/#static-file-serving-eg-images; static or public folder are the only directories that Next.js uses for serving static assets
inoutw
on 31 May 2019
Just a quick note, in Chrome if you enter in the URL "website.com/static/image.jpg" it will request for the image.jpg AND favicon.ico as well.
so other then updating _document.js you should add express route (like @ruock posted - https://github.com/zeit/next.js/issues/4414#issuecomment-456215768) - if you use custom server
Can also use the new canary option that tim mentioned.
pantchox
on 16 Jul 2019
I'm getting a warning that the static directory has been deprecated in favor of the public dir, but if I put my favicon in the public dir and update the path in <Head> it no longer loads correctly.
erikrahm
on 27 Nov 2019
@erikrahm after you’ve moved favicon from static/favicon.ico to public/favicon.ico, a url in Head should change from static/favicon.ico to favicon.ico. Stuff in public is ‘mounted’ to the server root.
kachkaev
on 28 Nov 2019
Just to add my view, i upgraded to the latest version of next: 9.1.5 and moved my static directory inside the public directory but still was unable to serve the favicon.
So renamed static directory to images under public directory which worked fine for me.
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
I hope this would help.
sharique-asghar
on 13 Dec 2019
Just to add my view, i upgraded to the latest version of
next: 9.1.5and moved mystaticdirectory inside thepublicdirectory but still was unable to serve thefavicon.So renamed
staticdirectory toimagesunderpublicdirectory which worked fine for me.
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />I hope this would help.
The solution worked for me too but why does it matter if it's in a sub folder of public just wondering
uverus2
on 27 Feb 2020
@CamilaSolis
I am using nextjs version 9.3.4 . i has also faced this issue but i have resolved it by creating public folder in root directory and put favicon.ico file there itself. not needed any kind of import by href.
JayeshLadumor
on 22 Apr 2020
If the icon is successfully fetched (you can check the Network tab of the Dev console on Google Chrome) it is worth checking if you have any errors on the console. Fixing the errors and then force-refreshing the page may make the icon appear.
GeorgiosGoniotakis
on 13 May 2020
Just create a public folder in root level and add favicon.png there.
- To use it :
kushankurxd
on 11 Jun 2020
Next 9.4.4 here. Still having problems with favicon, possible culprit is styled components. The only solution I've found is to link it from cdn.
alekslario
on 20 Jul 2020
EDIT: got it working, using @sharique-asghar s solution with an "images" folder inside my "public" folder.
Have tried all solutions mentioned here, and elsewhere, and cannot get favicon to show up. Does having a site.webmanifest file linking to the favicons mess with the <link> I put in _document.js?
Sheldonfrith
on 2 Aug 2020
Related issues
olifante
·
3Comments
DvirSh
·
3Comments
havefive
·
3Comments
pie6k
·
3Comments
sospedra
·
3Comments
Most helpful comment
place it in pages/_document.js