SVG 파비콘 가이드

0 0 64 64 같은 정사각형 viewBox를 사용하고 심벌 주변에 여백을 남기세요. viewBox는 좌표계를 정의하며 실제 표시 크기를 고정하지 않습니다.

이미지는 특징적인 모양 위주로 단순화하세요. 벡터 파일이 기술적으로 선명하더라도 미세한 디테일, 작은 글자 내부 공간, 긴 단어는 16픽셀에서 사라지기 쉽습니다.

필요한 스타일을 SVG 안에 포함하세요. 심벌이 특정 글꼴에 의존한다면 텍스트를 패스로 변환하세요. 이 환경에서는 외부 웹 글꼴을 안정적으로 불러올 수 없습니다.

스크립트, 원격 링크, 불필요한 편집기 메타데이터를 제거하세요. 단순한 도형과 스타일은 보안 검토를 쉽게 하고 파일 용량도 줄입니다.

마지막으로 브라우저에서 파일만 따로 열고 오프라인으로 테스트하세요. 그림이 바뀌거나 사라진다면 아직 외부 리소스에 의존하므로 해당 리소스를 포함하거나 대체해야 합니다.

type image/svg+xml과 루트 기준 URL을 가진 link rel icon을 추가하세요. SVG를 선택하지 않거나 ICO를 직접 요청하는 클라이언트를 위해 루트의 favicon.ico도 유지하세요.

SVG가 Apple Touch 아이콘이나 매니페스트 아이콘을 대체하지는 않습니다. 해당 인터페이스를 위해 불투명 PNG나 maskable PNG를 내보내세요.

style 요소 안의 prefers-color-scheme 규칙으로 다크 모드에서 fill이나 stroke를 변경할 수 있습니다. 먼저 안정적인 기본 색상을 정한 뒤 점진적 향상으로 다크 모드용 스타일을 추가하세요.

실제 탭과 여러 확대 수준에서 파일을 테스트하세요. SVG가 선택되지 않을 때의 대체 아이콘도 확인해야 합니다. ICO가 어두운 배경에서 사라진다면 해당 클라이언트에서는 여전히 문제가 됩니다.