Next.js 14에서 favicon.ico 파일을 app 디렉토리 루트에 있으면 자동으로 감지한다.
app/
├─ icon.png // 32x32 이상 권장
├─ apple-icon.png // iOS 홈 화면용 (선택)
├─ layout.tsx
└─ page.tsx
// app/layout.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "사이트명",
icons: {
icon: "/favicon.ico", // public 폴더 경로
shortcut: "/favicon-16x16.png",
apple: "/apple-icon.png",
},
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ko">
<body>{children}</body>
</html>
);
}
디자인 툴로 512x512 png 이미지를 만든다.
https://realfavicongenerator.net
https://favicon.io/favicon-converter
변환 사이트에 접속해서 ico로 변환 후 다운로드 한다.
zip으로 다운로드 받아서 public 폴더에 넣는다.
ico 파일을 사이트에 적용한다.
'next.js' 카테고리의 다른 글
| font awesome 설치 (0) | 2025.02.12 |
|---|---|
| next.js 14 프로젝트에서 scss 구성 (0) | 2025.02.11 |
| cross env 설치 (0) | 2025.02.11 |
| next.js 14 프로젝트 생성 (0) | 2025.02.11 |
| 6. Todo List > 완료 (0) | 2024.08.05 |
