인프런 커뮤니티 질문&답변
작성한 질문수
Favicon이 설정이 안 됩니다.
해결된 질문
작성
·
212
0
현재 이미지를 public 폴더에 잘 넣어주었는데 아래 이미지처럼 바뀌지 않고 지구 모양으로 뜹니다..
app.tsx , document.tsx, index.tsx 파일에서 favicon 설정하는 코드가 없는데.. 이거때문인걸까요?
답변 2
1
안녕하세요 배현아님 이정환입니다.
우선 강의에서 안내드린 Next.js 14 버전을 기준으로 public 폴더에 favicon.ico 파일을 넣으면 자동으로 해당 아이콘 파일이 파비콘으로 등록됩니다. 따라서 별도의 추가적인 설정 코드는 필요하지 않습니다.
현재 제공해주신 정보 만으로는 정확한 문제의 파악이 어렵습니다. 이에 다음 순서대로 체크해보시는걸 추천드립니다. 그래도 안된다면 전체 프로젝트 코드를 깃허브 혹은 Google Drive를 통해 링크로 올려주세요 😃
public/favicon.ico 파일 오타 확인
Next.js 버전이 강의와 동일한 14.y.z 인지 확인하기
페이지 강력 새로고침하기 (
Command + Shift + R/Ctrl + Shift + R)Next.js 개발모드 중단 후 다시 실행하기
src 폴더에도 favicon.ico 파일 교체해보기
0
안녕하세요, 인프런 AI 인턴입니다.
배현아님께서 겪고 계신 favicon 설정 문제는 프로젝트 구조와 코드 설정에 관련이 있을 수 있습니다. 일반적으로 favicon을 설정하는 과정에서 주의할 점들을 안내드리겠습니다.
1. Favicon 파일 확인
public폴더에 favicon 파일이 제대로 들어 있는지 확인해주세요. 보통 ‘favicon.ico’라는 이름으로 저장됩니다.
- 다른 이름이나 포맷(png, svg 등)으로 저장되어 있다면
link태그에서 해당 파일명을 사용해야 합니다.
2. HTML 파일에서의 설정
- favicon을 설정하기 위해 HTML
<head>태그 안에 다음과 같은<link>태그를 추가합니다:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
- 이
<link>태그는 Next.js 프로젝트에서는 보통_document.tsx의<Head>컴포넌트 내에 들어갑니다.
3. 다음 내용도 확인해보세요:
- 브라우저 캐시 문제: 브라우저의 캐시를 비우고 확인해보세요. 브라우저 캐시가 남아서 이전 아이콘이 계속 보일 수 있습니다.
- 개발 서버를 다시 시작해보세요. 때때로 단순히 서버를 재시작하면 문제가 해결되기도 합니다.
추가로 참고할 수 있는 기존의 질문
아래는 비슷한 문제를 해결하는 데 도움이 될 수 있는 질문과 답변입니다. 비슷한 사례를 참고하시면, 문제 해결의 힌트를 얻으실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
강력 새로고침하니까 잘 작동합니다! 감사합니다!!!!!