favicon을 만든다.

public 의 images 폴더에 넣는다.

루트의 layout.tsx 의 메타 데이터를 다음과 같이 바꾼다.

```javascript
export function generateMetadata(): Metadata {
 return {
 title: "포트폴리오",
 description: "포트폴리오 사이트 입니다.",
 icons: {
 icon: "/images/favicon.ico",
 },
 };
}
```

추가 방법

루트의 layout.tsx의 html 에 link로 넣는다. 이렇게 했을 때 metadata를 페이지 레벨로 했을 때 파비콘이 안나오는 상황을 예방할 수 있다.

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

favicon을 만든다.public 의 images 폴더에 넣는다.루트의 layout.tsx 의 메타 데이터를 다음과 같이 바꾼다.<pre><code class="language-javascript">export function generateMetadata(): Metadata {
 return {
 title: "포트폴리오",
 description: "포트폴리오 사이트 입니다.",
 icons: {
 icon: "/images/favicon.ico",
 },
 };
}</code></pre>추가 방법루트의 layout.tsx의 html 에 link로 넣는다. 이렇게 했을 때 metadata를 페이지 레벨로 했을 때 파비콘이 안나오는 상황을 예방할 수 있다.<pre><code class="language-javascript">export const metadata = {
 title: "Rahul More",
 description: "A Frontend Developer Portfolio",
};

export default function RootLayout({ children }) {
 return (
 &lt;html lang="ko"&gt;
 &lt;link rel="icon" href="/images/favicon.ico" sizes="any" /&gt;
 &lt;body className={pretendard.className}&gt;{children}&lt;/body&gt;
 &lt;/html&gt;
 );
}</code></pre><ul><li>favicon 은 ico 도 되고 png 도 된다.</li><li>public 폴더에 있어야지 브라우저에서 접근할 수 있다.</li></ul>

Next.js 14 favicon 바꾸기