처음 설정은 다음과 같았다
-
페이지 헤드부분
```js //ico경로 '/public/favicon.ico' //Head경로 '/pages/index.tsx' import Head from 'next/head'; import Main from './main'; export default function Home() { return ( <> <Head> <title>우유부단</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <main> <Main /> </main> </> ); }
검색해보니 public/image 폴더에 넣어야 된다고 해서 ico파일을 옮겨보았다
참고 링크 : https://stackoverflow.com/questions/61836949/why-is-my-favicon-not-working-in-my-next-js-app
옮기니까 잘 보였다
그렇지만 index.tsx에 넣으니 메인페이지가 아닌 다른 페이지에서 favicon이 안보이는 문제가 발생하여 Head의 위치도 바꿔야 할 필요성을 느꼈다.
참고 링크 : https://merrily-code.tistory.com/154
후보1. _app.tsx -> 앱이 처음 실행될 때 레이아웃을 설정하기 위해 사용
공식문서 : https://nextjs.org/docs/advanced-features/custom-app
후보2. _document.tsx -> _app.tsx가 실행되고 나서 공통으로 적용되는 부분(기본값)에 대해서 설정하기 위해 사용
공식문서 : https://nextjs.org/docs/advanced-features/custom-document
결론 : _document.tsx에 Head태그를 만들어서 favicon을 넣었다
web