Next.js에서 File-based Metadata를 이용할 때, Favicon이 정상적으로 반영되지 않는 현상

Next.js의 App Router에서는 File-based Metadata를 이용하여, Favicon을 설정할 수 있다. 하지만, app 혹은 src/app 등 공식 문서에서 언급된 정상 경로에 Favicon 파일을 두었음에도, 해당 Favicon으로 변경되지 않는 문제가 발생한다.

Favicon은 브라우저가 강하게 캐싱하는 대표적인 파일이기에, 해당 문제는 기존 브라우저에 캐싱되어 있는 데이터로 인해 갱신된 데이터가 정상 반영되지 않았을 가능성이 높다.

해결 방안

1. 개발자 도구(F12 또는 Ctrl(Command)+Shift+i)를 연다.
2. 브라우저 좌측 상단의 새로고침 버튼을 마우스 좌측 버튼으로 길게 누른다.
3. '캐시 비우기 및 강력 새로고침'을 클릭한다.
4. 갱신된 Favicon이 정상 표시된다.

참고

• 개발자 도구를 켜지 않은 경우의 툴팁.

  

• 개발자 도구를 켠 경우의 툴팁.

  

• 개발자 도구를 켠 상태로, 마우스 좌측 버튼을 길게 누르고 있는 경우.

  

Reference

• https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons
• https://nextjs.org/docs/app/building-your-application/optimizing/metadata#file-based-metadata