혹시 경쟁사 사이트에서 완벽하게 선명한 파비콘을 본 적 있나요? 16x16에서도 안 깨지고, 다크 모드를 지원하며, 레티나 디스플레이에서도 선명하게 보이는 그 파비콘 말이죠. DevTools를 열어 <head>를 뒤져보면 PNG와 ICO 파일만 잔뜩 나오고 SVG는 눈씻고 찾아봐도 없을 겁니다.

문제는 대부분의 파비콘 추출 가이드가 PNG나 ICO 파일을 가져오는 방법만 알려준다는 점입니다. 하지만 2026년 현재, 진짜 가치는 SVG 파비콘에 있습니다. 무한히 확장 가능하고, prefers-color-scheme으로 다크 모드를 지원하며, 용량은 래스터 이미지의 몇 분의 일에 불과하죠. 진짜 SVG 파비콘을 추출하는 방법을 알려드립니다.

SVG 파비콘을 찾아야 하는 이유

본격적인 추출 방법에 앞서, 왜 SVG 파비콘이 중요한지부터 짚고 넘어가겠습니다. GitHub, Stripe, Apple 모두 SVG 파비콘을 사용합니다. 이 회사들이 SVG를 선택한 이유는 단순히 트렌디해서가 아닙니다. 하나의 SVG 파일로 여섯 개의 PNG, ICO, 웹 매니페스트 항목을 모두 대체할 수 있기 때문입니다.

SVG 파비콘은 다크 모드에서도 유령처럼 흐릿해지지 않습니다. SVG 파일 안에 직접 @media (prefers-color-scheme: dark)를 임베드하면 아이콘이 자동으로 색상을 반전시키거나 변경합니다. PNG로는 불가능한 일이죠.

수동 추출 워크플로우

1단계: 페이지 소스 검사

Chrome이나 Firefox에서 아무 웹사이트나 엽니다. 아무 곳이나 우클릭하고 '검사'를 선택하거나 Ctrl+Shift+I를 누릅니다. 'Elements' 탭으로 이동해 <head> 안에서 rel='icon'을 검색하세요. SVG 링크를 찾아보세요:

<link rel='icon' type='image/svg+xml' href='/favicon.svg'>

이걸 찾았다면 운이 좋은 겁니다. href 값을 클릭해 새 탭에서 SVG를 열고 저장하면 됩니다. 하지만 주의할 점이 있습니다. 많은 사이트가 SVG 파비콘을 sizes 속성 뒤에 숨기거나 Safari용 rel='mask-icon'을 사용합니다. 첫 번째 링크만 보고 멈추지 마세요.

2단계: 웹 매니페스트 확인

최신 프로그레시브 웹 앱(PWA)은 종종 site.webmanifest 파일 안에 SVG 파비콘을 선언합니다. <head>에서 rel='manifest'를 검색하세요:

<link rel='manifest' href='/site.webmanifest'>

해당 JSON 파일을 새 탭에서 엽니다. icons라는 속성을 찾으세요. 객체 배열입니다. type이 'image/svg+xml'인 항목을 찾으면 그게 SVG 파비콘 URL입니다. 복사해서 파일을 다운로드하세요.

3단계: 파비콘 API를 대체 수단으로 사용

일부 사이트는 HTML에 SVG 파비콘을 전혀 노출하지 않습니다. 브라우저의 자동 /favicon.ico 요청에 의존하는 경우죠. 이럴 땐 경로를 추측해야 합니다. 일반적인 위치는 다음과 같습니다:

도메인 뒤에 이 경로들을 주소창에 입력해보세요. 서버가 404를 반환하면 해당 사이트는 SVG 파비콘을 사용하지 않거나 잘 숨겨놓은 겁니다.

Mzu favicondl로 SVG 파비콘 추출하기

수동 검사도 물론 가능하지만, 여러 사이트에서 파비콘을 추출해야 한다면 상당히 번거롭습니다. 이럴 때 Mzu favicondl이 유용합니다. 이 도구는 페이지의 <head>, 웹 매니페스트, 그리고 일반적인 파일 경로까지 자동으로 스캔해 SVG 파비콘을 찾아냅니다.

사용법은 간단합니다:

  1. Mzu favicondl에 접속합니다.
  2. 입력 필드에 웹사이트 URL을 붙여넣습니다.
  3. 'Extract' 버튼을 클릭합니다.
  4. 도구가 SVG, PNG, ICO, Apple Touch 아이콘 등 모든 파비콘을 목록으로 보여줍니다.
  5. SVG 항목 옆의 다운로드 버튼을 클릭합니다.

끝입니다. 다운로드 전에 SVG 코드를 미리 확인할 수도 있습니다. 광고도, 회원가입도, 번거로운 절차도 없습니다.

SVG 파비콘 추출을 위한 프로 팁

상대 경로 주의

많은 사이트가 /assets/favicon.svg 같은 상대 경로를 사용합니다. DevTools에서 href 값을 복사할 때는 도메인을 앞에 붙여야 합니다. Mzu favicondl은 이 작업을 자동으로 처리하지만, 수동으로 할 때는 기본 URL을 잊지 마세요.

다크 모드 변형 확인

일부 사이트는 사용자의 색상 설정에 따라 다른 SVG 파비콘을 제공합니다. <link> 태그에 media='(prefers-color-scheme: dark)' 속성이 있는지 확인하세요. 찾았다면 라이트 모드와 다크 모드 변형을 모두 추출해야 합니다.

SVG 유효성 검사

모든 SVG 파일이 유효한 파비콘은 아닙니다. 외부 참조, JavaScript, 또는 지나치게 큰 viewBox 값을 포함한 경우가 있습니다. 추출한 SVG 파비콘을 사용하기 전에 텍스트 편집기로 열어 자체 포함되어 있는지 확인하세요. <script> 태그는 브라우저가 파비콘에서 무시하긴 하지만, 제거하는 것이 좋은 습관입니다.

추출 후 할 일

SVG 파비콘을 얻었다면 이제 자신의 사이트에 적용할 차례입니다. SVG 파비콘: 최신 접근법 가이드에서 정확한 HTML 코드와 다크 모드 설정 방법을 확인하세요. 레거시 브라우저를 위해 SVG를 ICO로 변환해야 한다면 SVG to ICO 변환기가 한 번에 처리해드립니다.

결론: SVG 파비콘 추출은 로켓 과학이 아닙니다. 하지만 어디를 봐야 하는지 아는 것이 중요합니다. PNG는 건너뛰고 바로 SVG를 찾으세요. 브라우저 탭이 감사할 겁니다.