브라우저 탭을 20개 열어놓고 작업하다 보면, 결국 파비콘만 보고 탭을 찾게 됩니다. 그만큼 파비콘은 작지만 중요한 존재예요. 근데 막상 만들려고 하면 크기가 몇이어야 하는지, ICO를 써야 하는지 PNG를 써야 하는지 헷갈리기 시작합니다.
파비콘에 필요한 파일 목록
2026년 기준으로 모든 브라우저와 기기를 커버하려면 이 정도가 필요합니다:
- favicon.ico — 16x16, 32x32 멀티사이즈. 레거시 브라우저용인데, 아직 필요합니다.
- favicon.svg — 벡터라서 어떤 크기에서도 선명. 다크모드 대응도 가능.
- apple-touch-icon.png — 180x180. 아이폰 홈 화면 추가 시 사용.
- favicon-32x32.png, favicon-16x16.png — PNG 기반 브라우저용.
이 중에서 하나만 골라야 한다면? SVG입니다. 하나의 파일로 모든 해상도에 대응하고, CSS 미디어 쿼리로 다크모드까지 처리할 수 있거든요.
ICO vs PNG vs SVG — 뭘 써야 하나
ICO는 여러 크기를 하나의 파일에 담을 수 있어서 편리하지만, 2026년에 ICO만 쓰는 건 좀 구식이에요. 다만 오래된 브라우저 호환성 때문에 favicon.ico는 루트에 하나 두는 게 안전합니다.
PNG는 투명 배경을 지원하고 대부분의 상황에서 잘 동작합니다. 32x32와 16x16 두 가지면 충분해요.
SVG가 가장 현대적인 선택입니다. 크기에 무관하게 선명하고, 파일 크기도 보통 1KB 미만이에요. 단, Internet Explorer에서는 안 됩니다(IE는 이미 은퇴했지만).
SVG 파비콘으로 다크모드 대응하기
SVG의 진짜 장점은 CSS를 내장할 수 있다는 겁니다. 이걸로 다크모드에서 파비콘 색상을 바꿀 수 있어요.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
circle { fill: #2563eb; }
@media (prefers-color-scheme: dark) {
circle { fill: #60a5fa; }
}
</style>
<circle cx="16" cy="16" r="14"/>
</svg>
라이트모드에서는 진한 파란색, 다크모드에서는 밝은 파란색으로 자동 전환됩니다. 별도 JavaScript 없이 CSS만으로 동작하는 게 깔끔해요.
제작 시 주의사항
단순하게 만드세요. 파비콘은 16x16 픽셀에서도 알아볼 수 있어야 합니다. 로고를 그대로 축소하면 대부분 뭉개져요. 로고의 핵심 도형이나 이니셜 한 글자만 따는 게 훨씬 나아요.
투명 배경을 쓰세요. 배경색이 들어간 파비콘은 브라우저 테마에 따라 어색하게 보일 수 있습니다.
고대비 색상을 쓰세요. 작은 아이콘이라 명암 대비가 약하면 그냥 점처럼 보입니다.
HTML에 파비콘 넣는 코드
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
sizes="any"는 ICO 파일이 여러 크기를 포함한다는 걸 브라우저에 알려줍니다. SVG와 ICO를 함께 선언하면 모던 브라우저는 SVG를, 구형 브라우저는 ICO를 선택합니다.
파비콘이 안 바뀔 때
파비콘을 교체했는데 브라우저에서 안 바뀌는 경우가 정말 많습니다. 브라우저가 파비콘을 강하게 캐싱하기 때문이에요.
해결 방법: 파비콘 URL에 쿼리 파라미터를 붙여보세요. href="/favicon.svg?v=2" 이런 식으로요. 또는 시크릿 모드에서 확인하면 캐시 영향 없이 새 파비콘을 볼 수 있습니다.