next.js 파비콘 설정시 라이트/다크 모드에 따라 동적으로 파비콘 변경하는 방법

사전 환경 및 구현 목표: 

- 프로젝트 내부에서 라이트/다크 모드 구분 없이 단일 모드(라이트 모드) 사용 

- 시스템 설정에 따라 브라우저가 라이트 또는 다크 모드로 변경됨에 따라 파비콘 이미지가 동적으로 변경될 수 있도록 하고자 함 

 

// app/layout.tsx
export const metadata: Metadata = {
  title: "Your application's title",
  description:
    "Your application's description",
  icons: {
    icon: [
      {
        media: "(prefers-color-scheme: light)",
        url: "/images/favicon-light.png",
        type: "image/png",
      },
      {
        media: "(prefers-color-scheme: dark)",
        url: "/images/favicon-dark.png",
        type: "image/png",
      },
    ],
  },
};

 

파비콘 png 파일 경로는 다음과 같이 배치

 

 

📚 참고자료

https://stackoverflow.com/questions/76977678/how-to-dynamically-change-favicon-for-dark-and-light-mode-in-next-js-14-or-15

How to Dynamically Change Favicon for Dark and Light Mode in Next.js 14 or 15?