[React / Vite] favicon 경로 문제로 안 불러와지는 현상 해결

실제 배포된 서비스 / 로컬 환경

로컬 환경에서 favicon이 제대로 적응되는 것을 보고 배포했으나 실제 배포된 서비스에서는 favicon이 보이지 않는 현상이 발생했다.

문제를 찾기 위해서는 우선 네트워크 상에서 제대로 favicon 아이콘을 불러왔는지 확인을 해야한다.

favicon 아이콘을 응답으로 받아야하는데 기본적인 index.html이 응답이 된 것을 볼 수 있다.

<link rel="icon" href="../public/favicon.ico" />

현 프로젝트에서 public안에 favicon이 있고 index.html은 최상단에 위치해있다.
하지만 실제 배포됐을 때 favicon 경로 처리가 제대로 되지 않아서 찾을 수 없기에 기본 index.html을 응답값으로 내놓는 것이다.

따로 세세하게(?) 경로 지정을 해 줄 필요 없이 Vite라는 번들러가 알아서 /favicon으로 경로 설정하면 public 안에서 찾아준다.
빌드하면 최종 빌드 결과물이 위치하는 dist로 번들러가 옮겨주기 때문에 경로 설정만 수정하면 되는 일이다.

여기에 type까지 명시적으로 지정해서 

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

 

하면 제대로 빌드된다.

경로 지정이 잘못돼서 생긴 현상이었다.