Favicon이 설정이 안 됩니다.
현재 이미지를 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. 다음 내용도 확인해보세요:
- 브라우저 캐시 문제: 브라우저의 캐시를 비우고 확인해보세요. 브라우저 캐시가 남아서 이전 아이콘이 계속 보일 수 있습니다.
- 개발 서버를 다시 시작해보세요. 때때로 단순히 서버를 재시작하면 문제가 해결되기도 합니다.
추가로 참고할 수 있는 기존의 질문
아래는 비슷한 문제를 해결하는 데 도움이 될 수 있는 질문과 답변입니다. 비슷한 사례를 참고하시면, 문제 해결의 힌트를 얻으실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
next.js 프로젝트
0
2
0
Next.js + Tanstack Query BFF 구조 질문
0
17
1
Next.js 사전렌더링 이해하기 부분
0
30
2
모달 관련 질문
0
37
3
렌더링 관련 질문
0
80
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
64
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
62
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
75
2
npx prisma db push 시 에러가 뜹니다.
0
93
3
vercel 배포를 실패하였습니다.
0
99
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
57
2
getServerSideProps 함수와 SSR의 관계
0
78
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
60
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
114
2
일반적인 nextjs project architecture에 대하여..
0
88
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
73
2
배포 시 오류 발생
0
89
2
백엔드 서버 오류납니다.
0
83
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
91
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
105
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
62
2
빨간줄 설정
0
77
2
익스텐션 질문
0
60
1
강의 들으면서 궁금한 부분 질문드립니다.
0
111
1