새벽에 서비스 배포를 끝내고 브라우저를 띄워봤는데, 탭에 당신의 로고 대신 하얀 빈 네모만 보인다면? 십중팔구 favicon 파일 경로 문제입니다. 브라우저가 icon을 요청했는데 server가 해당 위치를 찾지 못해 조용히 실패한 거죠.

원인을 깊게 파고들기 전에, 일단 응급처치부터 하겠습니다. 매주 반복되는 가장 흔한 해결책입니다.

가장 빠른 해결책: 절대 경로 사용하기

favicon이 메인 페이지에서는 잘 보이는데 서브 페이지에서 깨진다면, relative path가 원인입니다. HTML에서 root부터 시작하는 절대 경로로 변경하세요.

문제가 되는 relative path를 아래처럼 바꿔주면 됩니다:

<!-- Broken: depends on current URL depth -->
<link rel='icon' href='assets/favicon.ico'>

<!-- Fixed: always resolves from the domain root -->
<link rel='icon' href='/assets/favicon.ico'>

앞에 붙은 슬래시(/) 하나가 브라우저에게 https://yoursite.com/assets/favicon.ico를 무조건 바라보게 만듭니다. 사용자가 메인 페이지에 있든, 3단계 깊이의 블로그 아카이브에 있든 상관없이요. (네, 이 슬래시 하나 때문에 2026년에도 개발자들이 수백 시간을 날리고 있습니다.)

파일 경로가 깨지는 근본적인 이유

경로 해석은 마법이 아닙니다. 엄격한 문자열 파싱일 뿐입니다. 브라우저가 /blog/post-1/ 페이지에서 href='images/icon.png'를 만나면, URL을 /blog/post-1/images/icon.png로 해석합니다. images 폴더가 root 디렉토리에 있다면, 그 요청은 당연히 실패합니다.

Static Build의 함정

Next.js나 Vite 같은 최신 framework를 사용 중이라면, build 결과물이 개발 환경과 다를 수 있습니다. Framework가 assets을 /dist/나 /_next/static/ 폴더로 컴파일할 수 있습니다. 파일이 root에 있을 거라고 가정하고 경로를 하드코딩했다면, production build에서 깨지는 게 당연합니다.

Linux Server의 대소문자 구분

macOS와 Windows는 대소문자를 구분하지 않습니다. 하지만 Linux는 다릅니다. 로컬에서 Favicon.ico로 개발하고 Ubuntu server에 favicon.ico로 요청하면 404가 떨어집니다. 이런 케이스를 정말 매일 봅니다. 파일명은 항상 소문자로 사용하세요.

MIME Type 누락

경로는 맞는데 server가 파일을 어떻게 서빙할지 모르는 경우도 있습니다. .ico 파일에는 적절한 MIME type이 필요합니다. Server가 text/plain으로 보내면 브라우저가 거부합니다. Nginx나 Apache 설정에서 .ico 파일에 대해 image/x-icon을 명시하세요.

유명 서비스들은 어떻게 처리할까

GitHub를 보세요. 절대 root 경로에서 favicon을 서빙합니다. 사용자가 /github/docs 같은 깊은 링크로 유입될 수 있다는 걸 알기에 relative path에 의존하지 않습니다. href='/favicon.ico'를 사용해서 브라우저가 항상 파일을 찾도록 보장합니다. 또한 icon이 업데이트될 때 cache-busting query string을 사용해서 사용자가 이전 로고를 보지 않도록 처리합니다.

2026년에 대비하는 예방 팁

파일이 어디 있는지 추측하지 마세요. 다음 규칙으로 favicon 워크플로우를 표준화하세요:

사이트를 마이그레이션하거나 구조를 변경할 때 경로 에러는 거의 필연적으로 발생합니다. favicon migration checklist를 따라서 사용자보다 먼저 깨진 링크를 잡아내세요. icon이 아예 로드되지 않는 이유에 대해 더 깊이 알고 싶다면 favicon 404 error fix 가이드를 확인해보세요.

경로 에러는 지루하지만 피할 수 없습니다. 슬래시를 고치고, 대소문자를 확인하고, build 결과물을 검증하세요. 그러면 당신이 디자인에 쏟은 시간만큼이나 탭에 예쁘게 보일 favicon을 볼 수 있습니다.