My site is on NextJS v12.2.4. I'm having trouble displaying my site's favicon on the production build. The favicon works perfectly fine on my local build but it doesn't appear on my Vercel preview links or on my Production build.
The favicon.ico file lives in a /images folder within my /public directory.
I have my link tag in the Head tag of _document.tsx and looks like this:

<link rel='icon' href='/images/favicon.ico' sizes='any' />

The tag is rendering correctly on production builds and there aren't any console errors indicating that the favicon failed to load.

Something odd that I suspect is the reason behind the issue is that when I navigate to the favicon.ico resource url (www.my-website.com/images/favicon.ico) I am directed to a page in my site instead of the image file asset (serves an empty 404 page template). If I navigate to the same path on my local build I see the favicon.ico asset (localhost:4200/images/favicon.ico).

I've tried moving the location of the favicon.ico file to the root of the public folder, project root, adding query params to the href of the link tag and nothing seems to get it working. I haven't been able to find any other resources on this so hoping someone might be able to point me the right direction.

My nextJS site does exist within a NX mono-repo (./apps/my-website). Not sure if this could be related but would I have to declare a Root Directory in the Vercel Settings?