Next.JS 13 App Dir Favicon Not Displaying

[SamKomesarook]

Before opening, please confirm:

• I have checked to see if my question is addressed in the FAQ.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• I have removed any sensitive information from my code snippets and submission.

App Id

d19oqxloeeub82

AWS Region

us-east-1

Amplify Hosting feature

Not Applicable

Describe the bug

The favicon added to the root of a NextJS 13 app-dir project does not display when deployed.

Expected behavior

As per the docs, the favicon with the name of 'icon.png' placed in the root dir should display as the favicon.

Reproduction steps

1. Create a new NextJS 13 project with the app-dir enabled.
2. In the app dir, add an icon with the name icon.{png, svg,etc...}
3. Build locally and observe the icon is displayed in the head.
4. Deploy to amplify, and observe the icon is not available.

Build Settings

No response

Log output

# Put your logs below this line

Additional information

No response

[ghost]

Hi @SamKomesarook 👋🏽 thanks for raising this issue. I'm not able to reproduce the behavior you're seeing. Here is what I did:

1. create a Next.js app using version 13
2. create an app directory
3. enable the app directory by adding experimental : {appDir: true} to the next.config.js file
4. create a layout.js
5. create a page.js
6. add the icon.png to the app directory.
7. serve the app locally to confirm the icon is visible
8. deploy to Amplify

I'm able to see my icon in the head locally and after deploying to Amplify.

Can you check your Network tab and see what response is being returned for the icon's GET request?

[SamKomesarook]

@hloriii I should have been more specific, I can see it in the source head, however it is not actually displayed in the browser tab. Can you see the icon in your test example?

[ghost]

@SamKomesarook I can see the icon being displayed in the browser tab for my app. Can you provide a screenshot to highlight what you're seeing in your hosted app and a screenshot of what you're expecting to see from your local app?

Here is my bare bones app using the app directory feature so you can see: https://main.d3e6hxeizdoy.amplifyapp.com/

[SamKomesarook]

Thank you for the example! From looking at your example, the href for your link is within the _next/static folder, while ours is a local reference, which breaks when deployed... This is likely a NextJS issue. I appreciate your help!

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please either tag a team member or open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.