favicon 404 에러 해소
목차
love.hedvion.com에 favicon.ico와 apple-touch-icon.png를 추가해서 브라우저의 자동 요청으로 인한 404 에러를 없앴다. 로고를 기반으로 아이콘을 만들어 정적 자산으로 제공하게 된 작은 수정이지만, 서버 로그 노이즈를 줄이고 사용자 경험도 함께 개선했다.
브라우저의 자동 요청과 404의 악순환
배포 초기에 간과하기 쉬운 부분이다. 사용자가 사이트에 방문하는 순간 브라우저는 자동으로 몇 가지를 요청한다. 그중 하나가 /favicon.ico다. 이 파일이 없으면 브라우저는 404를 받는다. 한 명의 방문자가 아니라 매일 수백, 수천 명이 방문한다면, 서버 로그에는 의미 없는 404가 엄청나게 쌓인다.
초기 단계에서는 "사소한 것"으로 넘어가기 쉽다. 하지만 모니터링 도구를 운영하다 보면 이런 노이즈가 문제가 된다. 실제 에러(사용자가 마주친 5xx, 의도하지 않은 3xx)를 찾아내려고 로그를 분석할 때, 404 노이즈가 너무 많으면 신호-대-잡음비(signal-to-noise ratio)가 떨어진다. 팀이 "이 404는 중요한가?"를 매번 판단하느라 대응 비용이 올라간다.
정적 자산 관리의 기본
이번 작업은 단순했다. 두 파일을 public 디렉토리에 추가한 것이다:
| 파일명 | 용도 | 크기 | 캐시 전략 |
|---|---|---|---|
| favicon.ico | 브라우저 탭, 주소창, 북마크 | 1-10KB | 장기 캐시 (변경 시 버전팅) |
| apple-touch-icon.png | iOS 홈 화면 추가 아이콘 | 20-50KB | 장기 캐시 (변경 시 버전팅) |
모두 로고를 기반으로 만들었다. 로고 리소스가 이미 있다면 이를 축소·포맷 변환하는 게 가장 효율적이고 일관성 있다. 브랜드 일관성을 유지하면서 정적 자산으로 제공할 수 있기 때문이다.
이 두 파일을 제공하면:
- 브라우저의 자동 요청이 200 OK로 응답된다
- 사용자의 홈 화면, 북마크, 브라우저 탭에 브랜드 이미지가 표시된다
- 서버 로그에서 /favicon.ico 404 노이즈가 사라진다
"작은" 파일이지만 UX와 모니터링 품질 측면에서는 생각보다 영향이 크다.
팀 리더로서의 관점
이런 작업을 하면서 느끼는 건 배포 체크리스트의 중요성이다. 팀을 이끌 때는 큰 기능과 버그 수정에만 집중하기 쉽다. 하지만 이런 작은 기술부채들이 모여서 운영 비용을 높인다.
특히 모니터링을 운영하는 팀이라면:
- 필수 정적 자산 확인 — favicon, robots.txt, sitemap.xml, 공통 에러 페이지 등은 배포 전에 미리 준비할 것
- 알려진 false positive 제거 — 404 모니터링을 할 때 브라우저 자동 요청(favicon, apple-touch-icon)은 미리 처리하고 제외하지 말 것
- 로그 필터 vs. 자산 제공 — 404를 필터로 제거하는 것보다 자산을 제공하는 게 근본적이다
또 한 가지는 우선순위 판단이다. 기능 개발 속도가 중요하지만, 배포 후 운영 비용을 낮추는 것도 함께 봐야 한다. 이 작업은 개발 시간이 거의 없지만 팀의 모니터링 부하를 줄인다. 작지만 일관되게 누적되는 이득이다.
다음
다음에 새로운 서비스를 만들 때는 이런 체크리스트를 배포 전에 한 번 더 확인하자. favicon부터 robots.txt, sitemap.xml 생성까지. 로고가 있으면 정적 자산 준비는 반나절 정도면 충분하다. 배포 후 무한정 404 로그를 보는 것보다는 훨씬 낫다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.