가이드

파비콘(.ico) 대 SVG

SVG는 벡터, 다크 모드 인식, 초소형 등 현대 시대의 가장 흥미로운 파비콘 형식입니다. 하지만 2026년에는 .ico를 완전히 대체할 수 없습니다. 그 이유와 두 가지를 모두 사용하는 방법은 다음과 같습니다.

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

SVG는 무한히 확장되며 파일 자체 내에서 다크 모드 미디어 쿼리를 지원합니다. 1KB SVG는 모든 최신 브라우저의 모든 밀도를 포괄합니다.

ICO는 범용 폴백입니다. 이전 Safari 버전, 레거시 브라우저 및 기본 URL <code>/favicon.ico</code> 규칙은 모두 여전히 이에 의존합니다.

권장 설정: <code>favicon.ico</code> + <code>favicon.svg</code> 배송. SVG를 지원하는 브라우저는 이를 선호합니다. 나머지는 자동으로 .ico로 돌아갑니다.

작동 방식

1
SVG 디자인 또는 내보내기
정사각형 viewBox, 단일 루트 <svg> 요소.
2
.ico 대체 생성
FetchFavicon를 사용하여 SVG를 여러 크기의 .ico로 래스터화하세요.
3
둘 다 연결
<link rel="icon" href="/favicon.ico"> + <link rel="icon" type="image/svg+xml" href="/favicon.svg">.

지금 사용해 보기

SVG를 사용하면 .ico를 완전히 삭제할 수 있나요?+

안전하지 않습니다. 많은 소셜 임베더, RSS 리더 및 레거시 도구는 여전히 관례에 따라 /favicon.ico를 요청합니다.

SVG 파비콘을 지원하는 브라우저는 무엇입니까?+

Chrome 80+, Edge 80+, Firefox 41+, Safari 15+ 및 Brave. iOS Safari는 여전히 apple-touch-icon PNG를 선호합니다.

SVG 파비콘은 얼마나 작을 수 있나요?+

깨끗한 단색 표시를 위해서는 1KB 미만입니다. 복잡한 다색 로고라도 4KB를 초과하는 경우는 거의 없습니다.