인프런 커뮤니티 질문&답변
작성한 질문수
Vercel 배포 관련 질문 파비콘문제
작성
·
15
0
안녕하세요!
제가 vercel에 배포를하려고 시도하고 있습니다.
현재까지 진행 상황과 문제를 정리하면 아래와 같습니다.
프로젝트 배포는 정상적으로 완료됨
그러나 브라우저에 접속 시 파비콘이 표시되지 않음
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
public 폴더 내 favicon.ico 파일 존재
로컬 개발 서버(npm run dev)에서는 정상적으로 표시됨
배포 후 URL 접속 시 브라우저 캐시를 지워도 여전히 표시되지 않음
혹시 Vercel 환경에서 파비콘이 정상적으로 나오도록 하기 위해 추가로 확인해야 할 부분이나, 권장 설정이 있을지 조언 부탁드립니다.
답변 2
0
안녕하세요 강정빈님 이정환입니다.
현재로써는 문제의 원인을 파악할 수 있는 정보가 없어서, 배포된 서비스 URL과 전체 프로젝트 코드를 GitHub 혹은 구글 드라이브 링크로 남겨주시면 확인해보겠습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 강정빈님께서 Vercel에 배포한 프로젝트에서 파비콘이 나타나지 않는 문제를 겪고 계신 것 같습니다. 이 문제는 주로 파일 경로나 브라우저 캐시와 관련이 있을 수 있습니다. 문제를 해결하기 위한 몇 가지 방법을 제시해 드리겠습니다.
1. 파일 구조 및 경로 확인
public폴더에favicon.ico파일이 제대로 있는지 다시 한번 확인해 주시기 바랍니다. Vercel은public폴더 내에 있는 정적 파일을 서비스 방식 그대로 배포하므로 경로가 맞다면/favicon.ico경로로 접근할 수 있어야 합니다.
2. HTML 코드 확인
- HTML 내의 파비콘 설정 코드가 다음과 같이 되어 있는지 확인하세요. 파일 타입이
image/x-icon일 수도 있으므로 이를 한번 시도해 보세요:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
3. 캐시 문제 해결
- 브라우저 캐시 문제가 있을 수 있습니다. 강력 새로고침([Cmd + Shift + R]이나 [Ctrl + Shift + R])을 해보세요.
- 빠른 테스트를 위해 시크릿 모드에서 웹사이트에 접속하시는 것도 추천합니다.
4. Vercel 배포 확인
- Vercel에서 제대로 배포된 URL을 이용하고 있는지 확인하세요. 개발 및 배포 환경이 다를 수 있으므로, Vercel의
Domains탭에서 올바른 URL을 사용 중인지 확인이 필요합니다.
5. 관련된 기존 질문과 답변
- 비슷한 사례에 대한 기존의 해결 방법을 참고하시면 문제 해결에 도움이 될 수 있습니다:
이러한 방법들이 문제 해결에 도움이 되셨길 바랍니다. 문제가 여전히 발생한다면 프로젝트 설정이나 파일 구조를 다시 리뷰해 보시고, 추가적인 질문이 있으시면 언제든지 알려주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.