SVG favicon은 웹사이트 아이콘 기술의 최첨단을 대표합니다. 확장 가능하고, 다크 모드를 지원하며, 어떤 크기에서도 완벽하게 보이는 단일 파일이 될 수 있습니다. 알아야 할 모든 것을 여기에 정리했습니다.
SVG Favicon을 사용해야 하는 이유
- 무한히 확장 가능 — 16px, 32px, 512px 또는 어떤 크기에서도 선명하게 보입니다. 픽셀 깨짐이 전혀 없습니다.
- 매우 작은 파일 크기 — 간단한 SVG favicon은 1KB 미만으로, 어떤 PNG보다도 작을 수 있습니다.
- 다크 모드 지원 — SVG는 CSS
prefers-color-scheme미디어 쿼리를 사용하여 적응할 수 있습니다. - 모든 것을 아우르는 하나의 파일 — 여러 크기가 필요 없습니다 (하지만 PNG 폴백은 여전히 필요합니다).
브라우저 지원 (2026년)
| 브라우저 | SVG Favicon 지원 |
|---|---|
| Chrome 80+ | 예 |
| Firefox 41+ | 예 |
| Edge 80+ | 예 |
| Opera 67+ | 예 |
| Safari | 아니요 (Safari 18 기준) |
| IE | 아니요 |
주요 제한 사항: Safari는 SVG favicon을 지원하지 않습니다. 이는 모든 브라우저를 지원하기 위해 PNG/ICO 폴백을 반드시 제공해야 함을 의미합니다.
SVG Favicon 구현 방법
<!-- SVG favicon for modern browsers -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- PNG fallback for Safari and older browsers -->
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<!-- ICO fallback for very old browsers -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- Apple Touch Icon (always PNG, SVG not supported) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">SVG를 지원하는 브라우저는 SVG를 사용하고, 그렇지 않은 브라우저는 PNG 또는 ICO로 폴백합니다.
다크 모드 적응
SVG favicon의 핵심 기능은 아이콘이 사용자의 색상 스키마에 자동으로 적응할 수 있다는 것입니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
circle { fill: #1d1d1f; }
text { fill: white; }
@media (prefers-color-scheme: dark) {
circle { fill: white; }
text { fill: #1d1d1f; }
}
</style>
<circle cx="50" cy="50" r="45"/>
<text x="50" y="65" text-anchor="middle"
font-family="system-ui" font-size="50" font-weight="bold">M</text>
</svg>라이트 모드에서는 밝은 배경에 어두운 아이콘. 다크 모드에서는 어두운 배경에 밝은 아이콘. JavaScript 없이 자동으로 작동합니다.
SVG Favicon 생성
방법 1: 디자인 도구
- Figma — 아이콘을 디자인하고 선택한 다음 SVG로 내보냅니다.
- Illustrator — 파일 → 다른 이름으로 저장 → SVG
- Inkscape — 무료 오픈 소스 벡터 편집기
방법 2: 직접 코딩하기
간단한 아이콘의 경우, SVG를 직접 코딩하는 것이 빠릅니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" rx="20" fill="#0071e3"/>
<text x="50" y="70" text-anchor="middle"
font-size="60" font-weight="bold" fill="white">F</text>
</svg>최적화 팁
- 파일 크기를 최적화하려면 SVGOMG를 사용하세요.
- 불필요한 메타데이터, 주석 및 편집기별 속성을 제거하세요.
- 경로를 단순하게 유지하세요 — 복잡한 그라데이션은 작은 크기에서 잘 렌더링되지 않을 수 있습니다.
- 항상
xmlns속성을 포함하세요. - 적절한 스케일링을 위해
viewBox를 설정하세요.
2026년 권장 전체 설정
SVG와 전통적인 폴백을 결합하면 모든 장점을 얻을 수 있습니다.
<!-- Modern: SVG with dark mode support -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Fallback: Traditional favicon set -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- Apple (no SVG support) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- PWA -->
<link rel="manifest" href="/site.webmanifest">오늘날 SVG Favicon을 사용해야 할까요?
예, 하지만 항상 폴백과 함께 사용하세요. Safari의 제한으로 인해 SVG만으로는 의존할 수 없습니다. 그러나 Chrome, Firefox, Edge 사용자의 경우, SVG favicon은 특히 다크 모드를 지원한다면 훨씬 더 나은 경험을 제공합니다.