[Next.js] 14 버전 favicon(파비콘) 미적용 에러 해결하기

Next.js 14 버전 프로젝트에서 favicon(이하 파비콘)을 적용하던 도중 한 가지 에러 상황을 마주치게 되었습니다.

 

문제 상황

로컬 개발 환경(localhost)	상용 환경(vercel)

 

1. 로컬 개발 환경에서는 파비콘이 정상적으로 적용되지만 vercel을 통하여 상용 배포를 진행한 경우에는 파비콘이 노출되지 않고 있음.
2. 투명 배경 파비콘을 적용하고자 하였지만 투명 배경이 적용되지 않고 흰색으로 노출되고 있음.

투명 배경 처리(뒷 배경 체크무늬)가 된 것을 확인 가능

 

해결 방안

 

Next.js 14 버전으로 업그레이드 되며 파비콘을 관리하는 방법이 변경된 것으로 추정됩니다.

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons

Metadata Files: favicon, icon, and apple-icon | Next.js

위 공식 문서에 따르면 파비콘은 app 디렉토리 아래 favicon.ico라는 파일명으로 관리하라고 적혀있지만 이 부분이 변경된 것으로 보입니다.

 

 

새로운 파비콘 파일의 이름은 icon.ico!

 

정상적으로 투명 배경도 동작하는 모습

 

 새로운 파비콘 관리는 icon.ico 파일을 통하여 진행되는 것 같습니다. favicon.ico와 icon.ico 2가지 두 파일이 모두 존재할 경우에는 icon.ico를 먼저 참조하는 것도 확인할 수 있습니다.

 

 Next.js 14 버전은 이전 버전으로부터 많은 변경 사항이 있던 만큼 실제 릴리즈 노트에 포함되지 않은 변경 사항들도 개발을 하다보며 많이 마주하는 것 같습니다. 이와 같이 제가 개발을 하며 발견한 릴리즈 노트에 존재하지 않는 나머지 변경 사항들도 포스트로 다룰 수 있도록 하겠습니다. 읽어주셔서 감사합니다.