NextJS favicon 변경하기

NextJS에서 파비콘을 변경하는 방법을 빠르게 알아보자.

먼저 파비콘이 무엇인고?

파비콘은 인터넷 브라우저의 탭을 보면 이름의 좌측에 위치해있는 아이콘을 의미하는데, 디자인적인 요소나 제공하고자 하는 서비스의 이미지라던지 여튼 서비스의 정체성을 보여주는 중요한 요소 중 하나라고 생각한다 개인적으로.

NextJS 프로젝트를 생성하면 기본적으로 위 이미지와 같이 파비콘이 생성이 되어있는데 바꾸는 방법은 간단히 아래 순서대로 하면 된다.

1. app/favicon.ico 파일 삭제
2. 원하는 이미지를 public 폴더에 위치 시키기
3. app/layout 파일(최상위 layout.tsx)에서 메타데이터 설정하는 부분에 아래와 같이 icons를 추가.

export const metadata: Metadata = {
    title: "브라우저 탭에 보여질 타이틀",
    description: "메타 데이터에 들어갈 디스크립션",
    icons: {
        icon: "/resource/images/logo/favicon.ico",
    },
};

끝~