다크 모드 파비콘: 테마에 맞춰 바뀌는 SVG

투명 배경의 검정색 로고는 밝은 탭에서는 잘 보이지만 어두운 탭에서는 사라집니다. ICO는 테마에 맞춰 바뀌지 않지만 SVG 파비콘은 가능합니다. 브라우저 테마에 따라 색상을 바꾸는 CSS 규칙을 담을 수 있기 때문입니다.

파일 하나가 서로 다른 두 배경에 표시되는 문제

브라우저가 시스템 테마를 따르면서 같은 페이지의 탭 표시줄도 사용자에 따라 흰색에 가깝거나 검정색에 가까울 수 있습니다. 한쪽에 맞춰 만든 단색 파비콘은 다른 쪽에서 알아보기 어렵습니다.

많은 사이트가 아이콘에 불투명한 배경색을 넣어 해결합니다. 효과는 있지만 배경 없는 심벌을 쓰는 대형 브랜드와 달리 아이콘이 무겁고 덩어리져 보일 수 있습니다.

브라우저가 알맞은 모습을 선택하게 하면 됩니다. JavaScript나 서버 측 감지 없이도 가능합니다.

SVG는 단순한 픽셀 이미지가 아닌 문서이므로 style 태그와 미디어 쿼리를 포함할 수 있습니다. prefers-color-scheme: dark 규칙을 넣으면 브라우저가 다크 테마일 때 패스의 채우기 색상을 다시 지정할 수 있습니다.

실제로는 SVG에 라이트 테마용 기본 색상을 선언한 뒤 다크 모드에서 대체할 규칙을 추가합니다. 브라우저가 렌더링할 때 알맞은 규칙을 적용하고 사용자가 테마를 바꾸면 탭도 즉시 갱신합니다.

단순한 색상 반전보다 더 많은 작업이 가능합니다. 라이트 모드에서는 배경 없는 심벌, 다크 모드에서는 채워진 배지처럼 완전히 다른 그림을 표시할 수도 있습니다.

link rel="icon" type="image/svg+xml" href="/favicon.svg"로 SVG를 선언하세요. 이를 지원하는 브라우저는 SVG를 우선 사용하고, 지원하지 않는 브라우저는 루트의 favicon.ico로 대체합니다.

기존 파일을 제거할 필요가 없습니다. 두 파일이 함께 있으면서 서로 다른 클라이언트를 지원합니다. 32픽셀 아이콘에 점진적 향상을 적용하는 방식입니다.

한 가지 주의할 점은 파비콘 SVG에 외부 의존성이 없어야 한다는 것입니다. 이 환경에서는 외부 글꼴, 원격 이미지, 스크립트를 불러오지 않습니다. 텍스트는 패스로 변환해야 합니다.

다크 모드용 이미지는 데스크톱 브라우저 파비콘에 적용됩니다. 고정된 불투명 PNG인 Apple Touch 아이콘이나 Android가 자체 배경 위에 표시하는 웹 매니페스트 아이콘에는 영향을 주지 않습니다.

모든 브라우저가 지원하는 것도 아닙니다. Chromium 기반 브라우저와 Firefox는 테마에 반응하는 SVG를 읽지만 Safari는 버전에 따라 지원이 뒤처집니다. 이 경우 .ico로 자동 대체됩니다.

따라서 모든 방문자에게 표시할 기본 이미지로 라이트 모드 아이콘을 디자인하고, 다크 모드용 이미지는 지원 브라우저를 위한 개선 사항으로 추가하세요.

favicon.ico도 다크 모드에 대응할 수 있나요?

아니요. ICO는 고정된 래스터 이미지를 저장하며 테마 개념이 없습니다. 미디어 쿼리는 SVG에만 담을 수 있으므로 최신 구성에는 두 형식을 함께 제공합니다.

라이트용과 다크용 SVG를 각각 만들어야 하나요?

아니요. 파일 하나면 충분합니다. 같은 SVG 안에 두 이미지를 두고 prefers-color-scheme 미디어 쿼리로 구분하면 추가 요청이나 감지 코드가 필요 없습니다.

다크 테마 표시 결과는 어떻게 확인하나요?

운영체제 테마를 바꾼 뒤 탭을 새로고침하세요. 생성기에서는 라이트 테마와 다크 테마 탭을 나란히 미리 볼 수 있어 번갈아 확인할 필요가 없습니다.