브랜드의 검은색 로고를 완벽하게 만드는 데 몇 시간을 보냈지만, 다크 모드를 사용하는 80%의 사용자에게는 보이지 않는다는 사실을 깨달았다면, 당신만 그런 것이 아닙니다. 우리 모두는 그런 경험을 해봤습니다. 다크 테마 브라우저 탭에서 새 빌드를 열었을 때, 전문적인 아이콘이 있어야 할 자리에 텅 빈 사각형만 보이는 경우 말이죠. 이는 깨져 보이며, 2026년에는 게으른 구현의 신호입니다.

favicon 다크 모드 지원은 단순히 미적인 문제만이 아닙니다. 접근성과 브랜드 일관성에 관한 문제입니다. 사용자가 시스템 테마를 전환할 때, 당신의 사이트는 즉시 반응해야 합니다. 기술적으로는 JavaScript를 사용하여 <link> 태그를 교체할 수도 있지만, 이는 어색한 접근 방식이며 종종 눈에 띄는 깜빡임을 유발합니다. 이를 처리하는 현대적이고 전문적인 방법은 SVG를 통하는 것입니다.

전제 조건

시작하기 전에 아이콘의 SVG 버전이 필요합니다. 여전히 ICO 또는 PNG 파일만 사용하고 있다면, 왜 SVG가 표준인지 이해하기 위해 SVG Favicons에 대한 저희 가이드를 확인해 보시기를 강력히 권장합니다. 또한, favicon vs logo 비교에서 논의했듯이, 아이콘 디자인이 16x16 픽셀에서도 읽을 수 있을 만큼 충분히 단순화되었는지 확인해야 합니다.

1단계: SVG 내부 스타일 트릭

원활한 다크 모드 지원의 비결은 SVG 파일 자체에 있습니다. SVG는 본질적으로 XML이므로, <style> 블록을 그 안에 직접 포함할 수 있습니다. 이를 통해 브라우저는 아이콘에 특화된 CSS 미디어 쿼리를 평가할 수 있습니다.

코드 편집기에서 SVG 파일을 열고 다음과 같이 스타일 블록을 추가하세요:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="..." />
</svg>

이 예시에서 아이콘은 기본적으로 검은색이지만, 사용자 시스템이 다크 모드일 때는 자동으로 흰색으로 바뀝니다. 이는 GitHub와 같은 브랜드가 브라우저의 UI 테마와 관계없이 Octocat이 계속 보이도록 하기 위해 사용하는 방식과 정확히 일치합니다.

2단계: HTML 구현

SVG 준비가 완료되면 브라우저에 이를 사용하도록 알려야 합니다. <head> 섹션에 다음 줄을 추가하세요. 오래된 환경을 위한 폴백으로 표준 favicon.ico를 여전히 유지하지만, 최신 브라우저는 SVG를 우선시할 것입니다.

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

type="image/svg+xml"을 사용함으로써, 이 파일이 내부 스타일링이 가능하다는 것을 브라우저에 알립니다. 다양한 형식에 대한 특정 코드에 대해 더 자세히 알고 싶다면, 저희의 HTML guide for favicons를 참조하세요.

3단계: Safari 고정 탭 처리

Apple의 Safari는 상황을 약간 다르게 처리합니다. SVG favicon을 지원하지만, 고정된 탭에는 특정 "mask-icon"도 사용합니다. 거기서도 브랜드가 멋지게 보이도록 하려면 아이콘의 단색 버전을 정의해야 합니다.

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

color 속성은 탭이 활성화되었을 때 아이콘의 채우기 색상을 정의합니다. 이는 주 적응형 SVG와는 별개의 파일이지만, 진정으로 세련된 경험을 위해서는 필수적인 단계입니다.

흔히 발생하는 문제점

favicon 다크 모드 지원에서 가장 큰 골칫거리는 브라우저 캐싱입니다. 브라우저는 favicon을 매우 적극적으로 캐싱하는 것으로 악명이 높습니다. SVG를 업데이트했는데도 변경 사항이 보이지 않는다면, URL에 버전 문자열을 추가하거나(예: favicon.svg?v=2) 브라우저의 사이트 데이터를 완전히 지워보세요.

또 다른 흔한 실수는 SVG를 지나치게 복잡하게 만드는 것입니다. 경로를 깔끔하게 유지하세요. 만약 SVG의 모든 path 요소에 하드코딩된 fill 속성이 있다면, 1단계에서 추가한 CSS 블록은 CSS 특이성 규칙 때문에 무시될 수 있습니다. 미디어 쿼리가 우선하도록 클래스를 사용하거나 태그를 직접 대상으로 지정하세요.

나의 추천

favicon을 변경하기 위해 복잡한 JavaScript 테마 리스너에 신경 쓸 필요가 없습니다. 이는 취약하고 불필요합니다. SVG의 prefers-color-scheme 메서드를 고수하세요. 이는 네이티브하고 성능이 뛰어나며, 한 번 배포하면 유지보수가 필요 없습니다. 기존 이미지에서 이 파일들을 빠르게 생성해야 한다면, 사용자 지정 CSS 로직을 추가하기 전에 Mzu favicondl을 사용하여 기본 자산을 준비할 수 있습니다。