I'm trying to add a favicon to a Next js project. The project was created using create-next-app.
I have a favicon.png in the public folder - Following the directions from static file serving here
In my Layout file I have below code:
<Head>
<title>{title}</title>
<meta charSet="utf-8" />
<meta
name="viewport"
content="initial-scale=1.0, width=device-width"
/>
<link rel="shortcut icon" href="../public/favicon.png" />
<link
rel="stylesheet"
href=".4.1/css/bootstrap.min.css"
/>
</Head>
Layout file lives in a ponents directory and public is in the root.
However, the favicon is not showing up. What am I doing wrong?
I'm trying to add a favicon to a Next js project. The project was created using create-next-app.
I have a favicon.png in the public folder - Following the directions from static file serving here
In my Layout file I have below code:
<Head>
<title>{title}</title>
<meta charSet="utf-8" />
<meta
name="viewport"
content="initial-scale=1.0, width=device-width"
/>
<link rel="shortcut icon" href="../public/favicon.png" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn./bootstrap/4.4.1/css/bootstrap.min.css"
/>
</Head>
Layout file lives in a ponents directory and public is in the root.
However, the favicon is not showing up. What am I doing wrong?
Share Improve this question asked Mar 25, 2020 at 18:29 SoorajSooraj 10.6k12 gold badges67 silver badges103 bronze badges 2- please, check: stackoverflow./questions/56213019/… – manelescuer Commented Mar 25, 2020 at 18:33
- I'm following exactly as mentioned there in the updated answer. Hence the confusion. – Sooraj Commented Mar 25, 2020 at 19:19
2 Answers
Reset to default 4The favicon is loaded by browser and not during build time. You should specify the webroot directory.
<link rel="icon" type="image/png" href="/favicon.png" />
In your example you do not need to move up a directory. Simply use /public instead of ../public.
<link rel="shortcut icon" href="/public/favicon.ico" />