Next.js Discord

Discord Forum

Global Favicon Doesn't Load Globally

Unanswered
Asian paper wasp posted this in #help-forum
Open in Discord
Asian paper waspOP
In _document.tsx file, we've got a favicon loaded. This is visible in the code below. It works on most pages, but once they get a certain depth they stop working. The short version is that it works for normal pages and archive pages, but not single pages. Looking for a reason, so it can be fixed.

// imports 
import { Head } from 'next/document';

// component
<Head>
  <link rel='icon' href='img/favicon.ico' />
</Head>

12 Replies

Chinese Egret
Where is your favicon located in the folder structore?
Asian paper waspOP
Example of pages working:
/
/about
/blog
/contact
/product
/category
/legal


Example of pages NOT working:
/blog/awesome-blog-name
/product/awesome-shirt
/category/awesome-category
/legal/terms
/legal/privacy
@Chinese Egret Where is your favicon located in the folder structore?
Asian paper waspOP
It's located at:
/public/img/favicon.ico
Chinese Egret
Do you see the link tag at all at the pages not working?
Chinese Egret
I mean in the source code in the browser
Asian paper waspOP
No. It's not in the HTML. I was expecting that it would be, and I'd just update the path URL.
Chinese Egret
Alright, yeah thats weird, have you tried moving the image from /imgto the root of public?
Chinese Egret
Or, try making the href: /img/favicon.ico
Asian paper waspOP
That's a winner. LoL! Sometimes it's the stupid stuff that baffles you most.
Chinese Egret
Hehe, ye indeed it is 🙂