인프런 커뮤니티 질문&답변
작성한 질문수 7
2.19 파비콘이 안보여요
해결된 질문
작성
·
41
0
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="kr">
<Head />
{/* favicon 설정 */}
<link rel="icon" href="/public/favicon.ico" />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
파비콘 설정 설명이 없어서 chatgpt가 알려줘서 이렇게 했는데 안보이네요 답변 2
0
안녕하세요 Ming님 이정환입니다.
질문 가이드라인에서 안내드린대로프로젝트에서 발생한 문제의 원인을 파악하기 위해서는 전체 프로젝트의 코드를 살펴봐야 합니다. 이때 전체 코드는 텍스트 복사-붙여넣기가 아니라 GitHub 또는 구글 드라이브를 통해 링크 형태로 전달해주시면 됩니다.
우선 아래의 체크리스트를 점검해보시고 동일한 문제가 지속된다면 전체 코드를 전달해주시면 감사하겠습니다.
파비콘은 src/app 폴더 안에 favicon.ico 파일로 넣으면 바로 적용됩니다. 혹시 해당 파일이 정확한 위치에 존재하는지 확인해보세요
브라우저의 캐시 문제일 수 있으니 강력한 새로고침(ctrl + shift + r)을 여러번 수행해 보세요
.next 폴더를 제거하신 다음 npm run dev를 다시 명령하여 프로젝트를 재 가동해보세요
0
안녕하세요, 인프런 AI 인턴입니다. Ming님께서 Next.js 프로젝트에서 파비콘이 보이지 않는 문제로 고민하고 계신 것 같습니다. 이런 현상은 파일 경로나 파일 배치에 문제가 있을 수 있습니다. 다음 조언을 통해 문제를 해결해보세요.
1. Favicon 설정
public 폴더는 Next.js에서 기본으로 제공하는 정적 파일 경로입니다. Document 컴포넌트 내의 <link rel="icon" href="/favicon.ico" /> 코드를 사용하면 자동으로 public 폴더 내의 파비콘 파일을 참조합니다. 맞습니다, 단순히 /favicon.ico로 설정하면 됩니다:
<link rel="icon" href="/favicon.ico" />
2. Check for File Placement
- 파비콘 파일인
favicon.ico가public폴더 바로 아래에 위치하는지 확인하세요.public폴더는 프로젝트의 최상위 디렉토리에 있어야 하며 그 내부에 직접적으로favicon.ico파일이 있어야 합니다.
3. 캐시 문제
브라우저 캐시 때문에 이전의 파비콘이 보일 수 있습니다. 강력 새로고침 ([Cmd + Shift + R]이나 [Ctrl + Shift + R])를 해보세요.
4. 재시작
배포가 아닌 개발 환경에서 발생하는 경우라면, 개발 서버를 재시작하여 변경사항을 반영해보세요. 터미널에서 실행 중인 서버를 종료한 후, 다시 시작하세요.
5. 추가 참고사항
관련된 이전 답변들을 참고하시면 문제 해결에 도움이 될 수 있습니다:
이러한 방법들을 시도해 보신 후에도 문제가 해결되지 않으면 프로젝트의 다른 설정이나 파일 구조를 다시 한번 점검해보시길 권장합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.