SVG 대 ICO 아이콘
SVG는 미래이고 ICO는 기반입니다. 둘 다 제공하세요.
두 가지 형식, 서로 다른 직업
SVG favicon는 추가 바이트 없이 모든 탭 크기로 확장되는 단일 XML 문서입니다. ICO 파일은 하나 이상의 사전 래스터화된 프레임을 포함하는 바이너리 컨테이너입니다.
최신 Chromium, Firefox 및 Safari는 탭에서 SVG를 렌더링할 수 있습니다. Windows 셸, 이전 포함 및 암시적 /favicon.ico 가져오기에는 여전히 래스터 ICO 데이터가 필요합니다.
질문은 SVG 또는 ICO가 아닙니다. SVG에 ICO를 더한 것이며, 가능한 브라우저에는 SVG가, 안전망에는 ICO가 나열되어 있습니다.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
SVG가 최신 브라우저에서 승리하는 이유
One file covers 16×16 through 256×256 logical pixels. 유지하도록 설정된 밉맵이 없습니다.
단순 마크의 경우 파일 크기가 2KB 미만인 경우가 많으며, 이는 6프레임 .ico보다 훨씬 작습니다.
내장된 CSS는 @media(prefers-color-scheme: dark) 아래의 채우기를 반전시켜 별도의 야간 자산을 내보내지 않고도 적응형 탭을 제공할 수 있습니다.
SVG는 텍스트입니다. 다른 소스 자산과 마찬가지로 Git에서 favicon 변경 사항을 비교할 수 있습니다.
ICO가 여전히 필수적인 이유
브라우저는 HTML에서 생략한 경우에도 /favicon.ico를 요청합니다. 해당 요청은 .ico로 이름이 변경된 SVG가 아닌 유효한 아이콘 컨테이너를 반환해야 합니다.
Windows 핀, Outlook 링크 전개 및 일부 RSS 리더는 SVG를 완전히 무시합니다. 노출수의 약 5%가 ICO 전용 경로를 사용할 것으로 예상됩니다.
ICO는 예측 가능한 픽셀도 제공합니다. 복잡한 SVG 필터는 엔진마다 다르게 렌더링될 수 있습니다. 래스터 폴백은 모양을 안정화합니다.
둘 다 함께 사용
호환성을 최대화하려면 먼저 ICO를 선언하고, 향상을 위해서는 SVG를 선언하세요.
<link rel="icon" href="/favicon.ico" 크기="모든">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
가능한 브라우저는 유형과 MIME이 올바른 경우 SVG를 선호합니다. 다른 것들은 깨진 이미지 글리프 없이 ICO로 대체됩니다.
iOS는 홈 화면 아이콘에 SVG를 사용하지 않으므로 180×180 PNG apple-touch-icon과 페어링됩니다.
예
단색 레터마크: 단일 <path> 및 다크 모드 채우기 스왑이 포함된 SVG. Windows 바로가기에 대해 동일한 모양에서 생성된 ICO입니다.
그라데이션 로고: SVG에 대해 단순화합니다(평평한 채우기에만 해당). 16×16 탭이 아닌 웹사이트에서 마케팅 그라데이션을 유지하세요.
레거시 IE 요구 사항이 있는 정부 또는 기업 사이트: ICO 우선 순위를 지정합니다. 분석에서 무시할 만한 IE 트래픽이 표시된 후에만 SVG를 추가하세요.
엄격한 브랜드 색상을 사용하는 디자인 시스템: SVG를 저장소에 저장하고 CI 작업을 실행하여 각 릴리스 태그에서 .ico를 재생성합니다.
자주 묻는 질문
SVG만 사용할 수 있나요? Windows 바로가기 및 암시적 .ico 가져오기에 관심이 있는 경우에는 그렇지 않습니다.
Safari는 SVG favicon를 지원합니까? 데스크탑의 Safari 15+는 그렇습니다. iOS 홈 화면에는 여전히 PNG가 필요합니다.
SVG가 첫 번째 페인트를 느리게 합니까? 1~2KB SVG는 히어로 이미지에 비해 무시할 수 있습니다.
SVG 안에 비트맵을 삽입할 수 있나요? 가능하지만 확장성을 잃게 됩니다. 대신 ICO를 사용하세요.
문제 해결
SVG favicon는 어두운 모드에서 보이지 않습니다. 채우기는 탭 배경과 일치합니다. 명시적 채우기 또는 prefers-color-scheme 규칙을 추가합니다.
Chrome는 SVG가 아닌 ICO를 사용합니다. type="image/svg+xml"을 확인하고 서버 Content-Type이 image/svg+xml인지 확인하세요.
SVG가 들쭉날쭉해 보입니다. 복잡한 필터를 래스터화했습니다. 경로를 단순화하거나 탭에 ICO를 사용하세요.
대용량 SVG 파일: SVGO로 내보내기; Illustrator 메타데이터 및 사용되지 않는 정의를 제거합니다.
성능 및 캐싱 참고 사항
SVG 구문 분석 비용은 히어로 이미지에 비해 작지만 Illustrator(100KB+)에서 내보낸 막대한 SVG 내보내기는 여전히 모든 탭에서 바이트를 낭비합니다.
브라우저는 HTML의 HTTP 캐시 제어와 별도로 favicon를 캐시합니다. favicon.svg의 이름을 favicon-v2.svg로 바꾸면 마케팅에서 요구할 때 강제로 새로 고쳐집니다.
HTML를 캐시하는 서비스 작업자는 재검증 중 오래된 아이콘 응답을 영원히 캐시해서는 안 됩니다. 브랜드 변경 시 캐시 키가 범프됩니다.
HTTP/2 멀티플렉싱은 세 개의 작은 아이콘 파일이 워터폴 문제가 아니라는 것을 의미합니다. 올바른 형식으로 제공하세요. SVG와 ICO를 하나의 파일로 병합하지 마십시오.
접근성 및 대비
파비콘은 탭에 장식되어 있으므로 HTML에는 대체 텍스트가 필요하지 않습니다. 의미 있는 사이트 이름은 여전히 <제목>에 속합니다.
낮은 대비 SVG 표시는 페이지 콘텐츠에서 실패하는 것과 마찬가지로 UI 크롬에 대한 WCAG에서 실패합니다. #fff 및 #323232 배경 모두에서 대비를 테스트합니다.
색상 전용 브랜드 마크는 사용자에게 색각 이상을 혼동시킵니다. 16×16 실루엣에 색조 변화뿐만 아니라 뚜렷한 모양을 추가합니다.
이중 형식 아이콘용 CI/CD
Git에 favicon.svg를 저장합니다. 릴리스 태그에서 헤드리스 스크립트 또는 수동 생성기 단계를 실행하여 favicon.ico를 생성하고 바이너리를 커밋하거나 배포 아티팩트에 연결합니다.
favicon.ico가 favicon.svg mtime보다 오래된 경우 CI 실패 — 로고 조정 후 잊어버린 재생성을 포착합니다.
미리보기 환경은 병합 전에 404를 포착하기 위해 프로덕션과 동일한 아이콘 경로를 사용해야 합니다.
브랜드 시스템 문서
스타일 가이드의 문서: SVG는 소스, ICO는 생성된 아티팩트, PNG 크기는 내보내기 대상입니다.
최소 획 무게와 패딩을 16×16으로 지정하여 외부 대행사가 브랜드 마크를 벗어난 표시를 배송하지 않도록 합니다.
브랜드 PDF에 밝은 스크린샷과 어두운 스크린샷을 포함하세요. 마케팅 팀은 레터헤드만큼 자주 탭을 참조합니다.
기능 출시에 따라 아이콘이 변경될 때 제품 릴리스와 일치하는 semver 태그가 있는 버전 favicon 자산입니다.
분기별 감사 실행: 분석 결과 청중의 SVG 지원이 98% 이상인 것으로 나타나면 여전히 ICO를 유지하십시오. 기업 설치의 경우 롱테일 문제가 됩니다.
SVG + ICO 출시 체크리스트
먼저 favicon.ico를 배포하고 암시적 /favicon.ico 요청이 200을 반환하는지 확인하세요.
준비 시 올바른 MIME을 사용하여 favicon.svg를 추가하세요. Content-Type이 image/svg+xml인지 자동 확인을 실행합니다.
프로덕션으로 배송하고, CDN을 제거하고, 브라우저 3개를 새로 고치고, Chromium에서 SVG 탭을 확인하고, 예상되는 경우 ICO 대체를 확인합니다.
일주일 동안 지원 티켓을 모니터링합니다. QA가 Windows 바로가기를 건너뛴 경우 브랜드 변경 직후 아이콘 문제 클러스터가 발생합니다.
릴리스 티켓에 기본 스크린샷을 기록하여 코드 검토 중에 향후 회귀가 명확하게 나타나도록 하세요.