검색
검색
공개 노트 검색
회원가입로그인

Next.js 14 favicon 바꾸기

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 폴더에 있어야지 브라우저에서 접근할 수 있다.

조회수 : 286
heart
공유하기
카카오로 공유하기
페이스북 공유하기
트위터로 공유하기
url 복사하기
T
페이지 기반 대답
AI Chat