SVG 파비콘: 더 나은 이유와 실제 사용법

EspañolFrançais日本語한국어English繁體中文简体中文
Favicon.im

파비콘에 대해 이야기해 봅시다. 우리는 1999년부터 픽셀화된 ICO 파일에 갇혀 있었습니다. 25년간의 흐릿한 작은 아이콘들이었죠. 하지만 SVG 파비콘은? 솔직히 꽤 놀랍습니다. 그런데 대부분의 개발자들이 아직 사용하지 않고 있습니다.

왜 전환을 고려해야 하는지, 그리고 더 중요하게는 오래된 브라우저 사용자들을 위한 지원을 깨뜨리지 않으면서 어떻게 구현하는지 보여드리겠습니다.

SVG 파비콘이 정말 가치 있는 이유

흐림 없는 무한 확장

파비콘을 위해 다섯 가지 다른 PNG 크기를 만들던 것 기억하시나요? 16x16, 32x32, 48x48... 금방 지칩니다. SVG를 사용하면 파일 하나만 만들면 됩니다. 그게 전부입니다. 브라우저 탭의 16픽셀로 표시되든 PWA 스플래시 화면의 512픽셀로 표시되든 선명하게 보입니다.

일반적인 SVG 파비콘의 용량은 300-800바이트입니다. PNG 파비콘 패키지의 2-5KB와 비교해 보세요. 85-95%의 크기 감소입니다. 절대적인 수치로는 크지 않지만, 최적화할 때는 모든 바이트가 중요합니다.

그냥 작동하는 다크 모드

이것이 킬러 기능입니다. SVG 파비콘을 사용하면 CSS 미디어 쿼리를 파일에 직접 삽입할 수 있습니다. 사용자가 다크 모드로 전환하면 파비콘이 자동으로 적응합니다.

실제로 어떻게 보이는지 확인해 보세요:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M16 4L4 28h24L16 4z"/>
</svg>

이것은 밝은 배경에서는 어둡고 어두운 배경에서는 밝은 단순한 삼각형입니다. JavaScript가 필요 없습니다. 서버 측 감지도 필요 없습니다. 그냥 작동합니다.

CSS 스타일링과 애니메이션

SVG는 기본적으로 스타일링이 있는 XML이기 때문에, 래스터 형식에서는 불가능한 것들을 할 수 있습니다:

  • 호버 시 색상 변경 (지원되는 컨텍스트에서)
  • 미묘한 애니메이션 추가
  • 테마 설정을 위한 CSS 변수 사용
  • JavaScript로 스타일 수정

파비콘에서 애니메이션을 과하게 사용하는 것은 권장하지 않습니다. 좀 짜증날 수 있거든요. 하지만 옵션이 있다는 것은 좋습니다.

브라우저 지원 현황

솔직히 말씀드리겠습니다: SVG 파비콘 지원은 완벽하지 않습니다. 2025년 현재 현실은 이렇습니다:

완전 지원:

  • Chrome 80+ (데스크톱 및 Android)
  • Firefox 41+
  • Edge 80+
  • Opera 44+
  • Samsung Internet 13+

미지원:

  • Safari (데스크톱 및 iOS 모두)
  • Internet Explorer
  • Android Browser

Safari가 큰 문제입니다. Apple의 브라우저는 아직 SVG 파비콘을 지원하지 않습니다. 즉, 약 20%의 사용자가 SVG 아이콘을 보지 못합니다. 폴백이 필요합니다.

SVG 파비콘을 올바르게 구현하기

폴백과 함께하는 기본 설정

모든 사용자를 커버하는 마크업입니다:

<head>
  <!-- 매우 오래된 브라우저를 위한 ICO 폴백 -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- 최신 브라우저를 위한 SVG -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- Safari를 위한 PNG 폴백 -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  <!-- Apple Touch Icon (Safari는 SVG를 사용하지 않음) -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

순서가 중요합니다. 브라우저는 이것들을 순차적으로 파싱하고 지원하는 마지막 것을 사용합니다. 최신 브라우저는 SVG를 사용하고, Safari는 PNG를 사용하며, 아주 오래된 브라우저는 ICO로 폴백합니다.

프로 팁: Chrome이 ICO를 사용하는 것 방지하기

Chrome은 SVG가 사용 가능해도 때때로 ICO를 다운로드합니다. ICO 링크에 sizes="32x32"를 추가하세요. 이것은 Chrome에게 ICO가 그 특정 크기에만 해당된다고 알려주어, 확장 가능한 SVG를 선호하게 됩니다.

다크 모드 적응형 SVG 만들기

좀 더 완전한 예제입니다:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon-bg { fill: #ffffff; }
    .icon-fg { fill: #000000; }

    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #1a1a1a; }
      .icon-fg { fill: #f0f0f0; }
    }
  </style>

  <circle class="icon-bg" cx="16" cy="16" r="15"/>
  <text class="icon-fg" x="16" y="21"
        text-anchor="middle"
        font-family="system-ui"
        font-weight="bold"
        font-size="18">F</text>
</svg>

이것은 시스템 환경설정에 따라 색상이 반전되는 글자가 있는 원형 아이콘을 만듭니다.

파일 크기 현실 점검

사람들은 때때로 SVG가 항상 더 작다고 주장합니다. 완전히 사실은 아닙니다. 실제는 이렇습니다:

  • 단순한 기하학적 아이콘: SVG가 이깁니다, 종종 많이
  • 복잡한 일러스트레이션: PNG가 실제로 더 작을 수 있습니다
  • 사진이나 상세한 그래픽: 파비콘으로 사용하지 마세요

로고 스타일의 파비콘(도형, 글자, 단순한 그래픽)의 경우, SVG는 파일 크기 면에서 거의 항상 더 나은 선택입니다.

최적화 팁

SVG 파비콘을 배포하기 전에 SVGOMG나 비슷한 최적화 도구를 통해 실행하세요. Illustrator나 Figma 같은 내보내기 도구는 많은 불필요한 것들을 추가합니다. 메타데이터, 편집기 주석, 좌표의 불필요한 정밀도 등.

좋은 최적화는 SVG 크기를 50-70% 줄일 수 있습니다.

또한 디자인을 단순하게 유지하세요. 복잡한 그라디언트, 필터, 수백 개의 패스는 파일 크기만 늘리는 것이 아니라 렌더링 지연을 일으킬 수 있습니다.

테마 감지에 대해 알아야 할 것

SVG 내부의 prefers-color-scheme 미디어 쿼리는 브라우저의 테마 설정이 아닌 운영체제 환경설정을 따릅니다. 누군가가 macOS를 다크 모드로 사용하지만 브라우저는 라이트 테마로 설정한 경우, 파비콘은 여전히 다크 모드 스타일이 됩니다.

이것은 대부분의 웹사이트가 다크 모드를 처리하는 방식과 일치하지만, 알아둘 가치가 있습니다.

SVG로 전환해야 할까요?

현재 파비콘이 단순한 도형이나 레터마크라면, SVG가 아마도 가치가 있습니다. 얻는 것:

  • 여러 파일 대신 하나의 파일
  • 자동 다크 모드 지원
  • 더 작은 총 파일 크기
  • 미래 대비 확장성

파비콘이 상세한 일러스트레이션이거나 Safari 사용자가 많다면, PNG를 기본 형식으로 유지하세요.

대부분의 사이트에 가장 좋은 접근 방식? 둘 다 사용하세요. 지원하는 브라우저에는 SVG, 지원하지 않는 브라우저에는 PNG 폴백. 설정하는 데 5분이 더 걸리고 100%의 사용자를 커버합니다.

빠른 구현 체크리스트

  • [ ] SVG 파비콘 만들기 (단순하게 유지)
  • [ ] 필요시 다크 모드 미디어 쿼리 추가
  • [ ] SVGOMG로 최적화
  • [ ] PNG 폴백 만들기 (최소 32x32)
  • [ ] apple-touch-icon.png 만들기 (180x180)
  • [ ] 폴백 순서와 함께 적절한 link 태그 추가
  • [ ] Chrome, Firefox, Safari에서 테스트

그게 전부입니다. SVG 파비콘은 복잡하지 않습니다. 단지 활용도가 낮을 뿐입니다. 다음 프로젝트에서 시도해 보세요.

참고 자료

  1. Can I Use - SVG Favicons - SVG 파비콘 지원에 대한 브라우저 호환성 데이터
  2. Building an Adaptive Favicon - web.dev - 적응형 파비콘 생성에 대한 Google 가이드
  3. SVG Favicons and All the Fun Things We Can Do With Them - CSS-Tricks - SVG 파비콘 기능에 대한 포괄적인 탐구
  4. How to Favicon in 2025 - Evil Martians - 실용적인 현대 파비콘 구현 가이드
파비콘 확인하기

favicon.im을 사용하여 파비콘이 올바르게 구성되어 있는지 빠르게 확인하세요. 저희 무료 도구는 모든 브라우저와 기기에서 웹사이트의 파비콘이 올바르게 표시되도록 보장합니다.

무료 공개 서비스

Favicon.im은 전 세계 개발자들이 신뢰하는 완전 무료 공개 서비스입니다.

15M+
월간 파비콘 요청
100%
영구 무료