개발 slecs

favicon 404 에러, 인라인 SVG로 깔끔하게

목차

vtuber 프로필 페이지 배포 후 개발자 도구를 열면 favicon 요청이 계속 404를 던지고 있었다. 외부 파일 참조 방식에서 인라인 SVG favicon으로 전환해서 이 문제를 제거했다.

외부 favicon의 흔한 함정

처음엔 favicon을 public/ 디렉토리에 별도 파일(보통 .ico 또는 .png)로 두고 HTML에서 <link rel="icon"> 으로 참조하는 게 표준처럼 느껴진다. 하지만 이 방식은 생각보다 까다롭다.

정적 파일 배포 환경에서 favicon 경로가 잘못 구성되거나, CDN 설정이 미흡하거나, 빌드 단계에서 파일이 누락되면 404가 발생한다. 브라우저는 매 페이지 방문마다 favicon을 요청하므로 404 에러가 계속 반복되고, 콘솔이 지저분해진다. 무엇보다 서빙 성능 측면에서도 비효율이다—추가 HTTP 요청이 발생하기 때문이다.

이번 경우 vtuber 프로필은 단순한 브랜드 점(dot) 아이콘만 필요했다. 복잡한 이미지가 아니었다. 오히려 인라인으로 처리하는 게 훨씬 깔끔했다.

인라인 SVG favicon으로 전환

대부분의 브라우저는 SVG를 favicon으로 지원한다. SVG는 텍스트 기반이므로 HTML <head> 안에 직접 임베드할 수 있다.

방식 장점 단점
외부 파일 .ico 캐싱 가능, 도구로 생성 쉬움 HTTP 요청 추가, 경로 문제, 404 위험
인라인 SVG 요청 없음, 버전 관리 명확, 간단함 복잡한 이미지는 비효율, 별도 캐싱 불가

Astro의 Dex.astro 레이아웃에서 다음처럼 구현했다:

// src/layouts/Dex.astro
<head>
  <meta charset="UTF-8" />
  <title>{title}</title>

  {/* 브랜드 닷 favicon을 인라인 SVG로 */}
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><circle cx=%2250%22 cy=%2250%22 r=%2245%22 fill=%22%234F46E5%22/></svg>" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

핵심은 data: URI scheme을 사용해서 SVG를 직접 인라인하는 것이다. URL 인코딩만 신경 쓰면 된다. 간단하지만 효과적이다.

이런 패턴을 쓸 때 고민할 점들

  • 색상 정의: 브랜드 컬러를 SVG 요소에 직접 입력했다. 만약 테마(다크/라이트)를 지원해야 한다면 CSS 변수나 조건부 렌더링을 고려해야 한다.
  • 접근성: favicon은 시각적 요소라 접근성 이슈는 크지 않지만, 메인 로고처럼 중요한 시각 정보라면 스타일 fallback을 생각해둘 가치가 있다.
  • 복잡도 vs. 파일 크기: 간단한 도형(원, 선, 텍스트)이면 인라인이 좋다. 복잡한 일러스트나 그라데이션이 많으면 그냥 파일로 두고 경로 관리를 철저히 하는 게 낫다.
  • 크로스 플랫폼: 데스크톱 브라우저는 거의 모두 SVG favicon을 지원하지만, 모바일 기기의 앱 아이콘(Apple Touch Icon 등)은 여전히 PNG가 필요할 수 있다.

회고—작은 수정이 줄 수 있는 영향

4-5줄짜리 코드 변경이지만 수정 후 개발자 도구의 콘솔이 훨씬 깔끔해졌다. 404 에러 로그가 사라진 것만으로도 코드베이스가 건강해 보인다.

팀원들이 이 코드를 리뷰할 때 "왜 favicon을 인라인으로?" 질문할 수 있는데, 그럴 때 외부 파일의 배포 리스크와 단순 도형 아이콘의 특성을 설명할 수 있다. 작은 기술 선택도 그 이유를 명확히 하면 나중에 유지보수하는 사람들이 "아, 이건 의도적인 트레이드오프구나" 하고 이해한다.

유사하게 메타 태그, 스크립트 경로, 폰트 파일 같은 정적 리소스들도 같은 원칙으로 재검토해볼 여지가 있다. 외부 파일이 꼭 필요한가? 인라인으로 옮길 수 없나? 캐싱의 이득이 요청 오버헤드를 상쇄하는가? 이런 질문들이 성능과 안정성을 동시에 높인다.

🛒 이 글과 어울리는 추천 상품

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.

이어보기

댓글 0

첫 댓글 달아줘.