예전엔 파비콘에 파일이 십수 개 필요했습니다. 2026년에는 세 개로 거의 모든 브라우저를 커버할 수 있습니다 — SVG, 래스터 폴백, Apple 터치 아이콘.
실제로 필요한 파일
- favicon.svg — 기본 아이콘. Chrome·Firefox·Edge는 SVG 파비콘을 어떤 크기에서도 선명하게 렌더합니다.
- favicon.ico (또는 32px PNG) — 아직 SVG 파비콘을 지원하지 않는 Safari·구형 브라우저용 폴백.
- apple-touch-icon.png (180×180) — iOS에서 홈 화면에 추가할 때 쓰는 아이콘.
마크업
<head>에 다음을 추가하세요:
<!-- SVG primary (Chrome, Firefox, Edge) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<!-- Fallback for Safari / older browsers -->
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<!-- iOS home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <!-- 180×180 -->ICO 파일은 16×16·32×32·48×48을 하나에 묶을 수 있어 폴백에 유용합니다. 하지만 대부분의 사이트는 32×32 PNG 하나로 충분합니다.
작은 크기를 위한 디자인 팁
- 단순화하세요. 파비콘은 종종 16px로 렌더돼 미세한 디테일이 사라지니, 본질적인 형태만 남기세요.
- 작은 크기에서 흐려지는 얇은 외곽선보다, 대비 높은 단단한 실루엣을 쓰세요.
- 밝은/어두운 브라우저 테마 양쪽에서 테스트하고, 각각에 맞는 버전을 고려하세요.
아이콘으로 만들기
단순하고 알아보기 쉬운 아이콘을 골라 선명한 색을 주고 내보내세요. Icony에서는 같은 아이콘을 깔끔한 SVG(favicon.svg용)와 180px PNG(Apple 터치 아이콘용)로 내보낼 수 있습니다 — 둘 다 사이트 루트에 넣고 위 마크업을 추가하면 됩니다.