Next.js 14버전 - favicon 바꾸기

📌next.js - favicon 기본 설정 

npm run dev로 실행시키면 위의 title과 아이콘이 저렇게 기본설정 되어있다. 

나는 저것을 

이렇게 바꿔주었다. 아주아주 간단하다. 

 

📌next.js - favicon 수정

export const metadata = {
  title: "도이 포트폴리오",
  description: "Generated by 도이",
  icons: {
    icon: "/tree.png",
  },
};

 

public파일 아래 사진을 추가한뒤 layout.js 에서 파일에서  metadata 객체에  icons 속성을 추가해주면 된다. 

 

삭제!

이 사진은 지워줘야 적용이 된다. 

 

 

📌13버전 이후 바뀐 메타 태그 방식 

라우팅 규칙이 변경됨에 따라 SEO에서 필수적인 메타태그 적용 방법도 달라졌다. 기존 Pages Router 방식에서는 일반적인 HTML과 유사하게 Head 태그에 메타 태그를 작성했는데, App Router 방식에서는 레이아웃 및 페이지 파일에서 별도로 Metadata를 export 하도록 만들었다. 이제 App Router에서는 메타 태그를 따로 작성하지 못하는 것은 물론, next/head의 Head 태그도 사용할 수 없다!!