Next.js 14 favicon 바꾸기

공개 노트 검색

회원가입 로그인

Next 14 스터디 (공개)

favicon을 만든다.

public 의 images 폴더에 넣는다.

루트의 layout.tsx 의 메타 데이터를 다음과 같이 바꾼다.

export function generateMetadata(): Metadata {
  return {
    title: "포트폴리오",
    description: "포트폴리오 사이트 입니다.",
    icons: {
      icon: "/images/favicon.ico",
    },
  };
}

추가 방법

루트의 layout.tsx의 html 에 link로 넣는다. 이렇게 했을 때 metadata를 페이지 레벨로 했을 때 파비콘이 안나오는 상황을 예방할 수 있다.

export const metadata = {
  title: "Rahul More",
  description: "A Frontend Developer Portfolio",
};

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <link rel="icon" href="/images/favicon.ico" sizes="any" />
      <body className={pretendard.className}>{children}</body>
    </html>
  );
}

favicon 은 ico 도 되고 png 도 된다.
public 폴더에 있어야지 브라우저에서 접근할 수 있다.