반응형
👩🏻💻 문제 발생
사이트를 열었을 때 파비콘을 설정하고 싶은데 계속적으로 설정이 안되었다.
✔️ 문제 해결
맨 처음에 next.js가 13버전으로 업데이트하고 나서, metadata 파일을 따로 만들지 않아도 되었었다. layout.js파일에 들어가면 있는 metadata를 설정하면 됐다.
export function generateMetadata(): Metadata {
return {
title: "포트폴리오",
description: "포트폴리오 사이트 입니다.",
icons: {
icon: "/images/favicon.ico",
},
};
}
위의 파일은 layout.js에서 metadata가 작성되어 있는 파일인데 여기서 icons옵션을 추가한다. 파비콘 파일을 public에 넣고 이의 경로를 작성해주면 된다.
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>
);
}
루트의 layout.tsx의 html 에 link로 넣으면 파비콘이 안 나오는 방지할 수 있다. 이렇게 설정한다.
만약 이래도 안된다?
그러면 public에 넣어두었던 파일을 app아래로 가지고 와서 favicon.ico → icon.ico으로 변경한다. 그러면 바로 적용된다.
💡 app에 파비콘 파일을 가지고 와서 favicon.ico → icon.ico으로 변경한다.
🔗 참고
반응형
