파비콘(.ico) 대 SVG

SVG는 벡터 형식입니다. 즉, 단일 SVG 파비콘이 품질 저하 없이 모든 픽셀 밀도에서 렌더링된다는 의미입니다. 1x 디스플레이에서는 16×16 픽셀로 렌더링됩니다. 3x Retina 디스플레이에서는 동일한 파일의 48×48 물리적 픽셀로 렌더링됩니다. 4개의 크기별 래스터 프레임이 포함된 ICO 번들은 이 자동 밀도 처리와 일치할 수 없습니다. SVG는 최신 높은 DPI 디스플레이에 이상적인 형식입니다.

.ico 형식은 보편적인 기준으로 남아 있습니다. 웹 아이콘을 처리하는 모든 데스크톱 브라우저, 모바일 브라우저, 운영 체제 및 타사 도구는 1990년대 후반부터 favicon.ico를 지원해 왔습니다. 이러한 환경 중 다수는 HTML 링크 태그를 전혀 확인하지 않고 단지 관례에 따라 도메인 루트에서 /favicon.ico를 가져오려고 시도합니다. 설정에서 .ico를 제거하면 의미 있는 사용자 및 도구 세그먼트에 대한 파비콘이 즉시 중단됩니다.

다크 모드 지원은 SVG 파비콘의 핵심 기능입니다. SVG 파일은 `@media (prefers-color-scheme: dark)` 쿼리와 함께 `<style>` 블록을 포함할 수 있습니다. 브라우저가 어두운 모드에 있으면 쿼리가 활성화되고 아이콘의 채우기, 획 또는 배경색을 변경할 수 있습니다. .ico 또는 PNG에서는 불가능합니다. 이러한 형식은 환경에 대한 인식이 없는 정적 래스터입니다.

SVG 파비콘에 대한 브라우저 지원이 크게 발전했습니다. Chrome 80+(2020년 출시), Edge 80+, Firefox 41+ 및 Safari 15+(2021년 출시)는 모두 `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`를 지원합니다. 2026년 현재 활성 브라우저 설치의 대다수는 SVG 파비콘을 지원합니다. 주목할만한 예외는 이전 iOS 장치의 이전 Safari(15 이전)입니다. 이러한 장치는 자동으로 .ico로 대체됩니다.

파일 크기는 또 다른 SVG 이점입니다. 단순 표시를 위한 깔끔한 단색 SVG 파비콘은 일반적으로 1KB 미만입니다. 16, 32, 48 및 64px 래스터 프레임을 좋은 품질로 묶는 .ico 파일은 일반적으로 10-25KB입니다. 로드 시간 요구 사항이 매우 빠른 사이트의 경우 독립형 PNG 세트 대신 SVG 파비콘을 배송하면 파비콘 페이로드가 크게 줄어듭니다. 단, 두 형식 모두 첫 번째 로드 후에 캐시됩니다.

SVG 파비콘 연결 구문은 .ico와 약간 다릅니다. 명시적인 유형 속성(``<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`)이 필요합니다. type 속성이 없으면 일부 브라우저는 파일을 파비콘으로 인식하지 못합니다. 먼저 이를 .ico 대체 링크 태그 `<link rel='icon' href='/favicon.ico'>`와 쌍으로 연결합니다. SVG 파비콘을 이해하는 브라우저는 보다 구체적인 SVG 태그를 선호합니다. 다른 사람들은 .ico로 이동합니다.

파비콘을 배포하기 전에 SVG 최적화를 수행할 가치가 있습니다. 디자인 도구는 편집기 메타데이터, 주석, 보이지 않는 경로 및 시각적 기여 없이 바이트를 추가하는 중복 속성과 함께 SVG를 내보냅니다. SVG optimizer를 통해 SVG를 실행하면 아이콘을 시각적으로 동일하게 유지하면서 파일 크기를 50-80% 줄일 수 있습니다. 더 작은 SVG는 더 빠르게 구문 분석하므로 느린 연결에 중요합니다.

.ico 형식은 SVG가 처리할 수 없는 Windows OS 통합을 처리합니다. 브라우저 탭, 작업 표시줄 핀 및 Windows 파일 탐색기 아이콘에서 생성된 바탕 화면 바로 가기는 모두 /favicon.ico입니다. SVG는 이러한 상황에서 인식되는 Windows 아이콘 형식이 아닙니다. 브라우저 탭에서 주로 SVG 파비콘을 보는 사용자라도 사이트에 대한 Windows 바로가기를 만들면 .ico 버전이 표시됩니다.

`<animate>` 요소 또는 SVG 파일 내의 SMIL 애니메이션을 사용하여 SVG를 사용하면 파비콘 애니메이션이 가능합니다. 애니메이션 SVG 파비콘은 펄스, 회전 또는 색상 변경을 할 수 있습니다. 파비콘의 SVG 애니메이션에 대한 브라우저 지원은 제한적이지만(Chrome 및 Edge는 지원하고 Firefox 및 Safari는 지원하지 않음) 파비콘을 통해 상태 변경(예: 로딩 표시기, 새 알림 점)을 표시하려는 웹 앱을 위한 창의적인 옵션입니다.

SVG 파비콘은 단순한 어둡거나 밝은 전환 이상의 고급 색상 모드를 지원합니다. SVG 내에서 CSS 사용자 정의 속성을 사용하고, 고대비 모드에 대한 `forced-colors` 미디어 쿼리에 응답하고, 여러 색 구성표 중단점을 사용할 수 있습니다. 이러한 수준의 테마 지정은 래스터 형식에서는 불가능하며 SVG는 접근성 중심 디자인 시스템을 위한 최선의 선택입니다.

프로덕션에서 SVG의 실질적인 제한은 여전히 ​​SVG가 아닌 대체가 필요하다는 것입니다. 가장 간단한 접근 방식은 SVG를 기본 아이콘으로 유지하고 동일한 SVG 소스에서 .ico 및 apple-touch-icon PNG를 생성하는 것입니다. favicon generator는 SVG를 소스 형식으로 허용하고 벡터 데이터에서 .ico 및 PNG 출력을 생성하므로 래스터화로 인한 품질 손실이 없습니다.

소셜 미디어 공유 카드, OG 이미지 및 링크 전개의 경우 파비콘 소스 형식은 관련이 없습니다. 소셜 플랫폼은 HTML 또는 /favicon.ico에서 파비콘을 가져와 내부적으로 변환합니다. 파비콘이 .ico, PNG, SVG인지 관계없이 펼쳐진 링크 카드에는 아이콘이 표시됩니다. 소셜 공유 시나리오의 형식보다는 아이콘 콘텐츠의 품질에 중점을 둡니다.

권장되는 ico+SVG 설정을 구현하려면 `.ico` fallback, `image/svg+xml` SVG 및 `apple-touch-icon` PNG의 세 가지 링크 태그만 필요합니다. 브라우저는 구체적인 순서대로(가장 구체적인 형식부터) 읽고 지원하는 첫 번째 형식을 선택합니다. 이러한 점진적인 개선 접근 방식은 모든 사용자가 브라우저에서 처리할 수 있는 최고의 파비콘을 얻을 수 있음을 의미합니다. 전체 결정 매트릭스는 best favicon format guide를 참조하세요.