베스트 프랙티스
모든 플랫폼과 브라우저에서 잘 보이는 파비콘을 만드는 방법
디자인 가이드
텍스트 길이
한 글자가 가장 좋습니다. 파비콘은 16×16~32×32처럼 매우 작게 표시되므로 1~2 글자가 가장 읽기 쉽습니다. 더 길면 흐릿하고 복잡해집니다.
폰트 선택
작은 크기에서도 흐려지지 않는 폰트를 고르세요:
- 가느다란/장식 글꼴보다 두꺼운 산세리프가 유리합니다
- Bebas Neue, Oswald 같은 기하학적 글꼴은 축소해도 형태를 유지합니다. Google Fonts에서 불러올 수 있습니다.
- 필기체나 손글씨 스타일은 아주 큰 단일 문자에만 제한적으로 쓰는 게 좋습니다
- Google Fonts의 커스텀 폰트는 모든 내보내기 형식에서 완전히 지원됩니다
명암 대비
강한 대비가 필수입니다. 글자색이 배경에서 또렷이 드러나야 합니다. 어두운 배경+밝은 글자(또는 반대)가 가장 효과적이며, 비슷한 톤의 색 조합은 피하세요.
단순함
단순하게 유지하세요. 복잡한 디테일과 장식은 작은 크기에서 사라집니다. 브랜드를 대표하는 명확한 심볼이나 글자에 집중하세요.
기술적 권장사항
포맷 선택
SVG (Scalable Vector Graphics): SVG: 현대적 브라우저용. 어떤 크기에서도 손실 없이 확장/축소됩니다. 고해상도와 PWA에 최적.
PNG: PNG: 레거시 브라우저용 폴백이나 고정 크기 래스터가 필요할 때 사용합니다. 256×256 PNG가 대부분의 경우에 충분합니다.
ICO: ICO: 여전히 일부 오래된 브라우저와 Windows 바로가기에 필요합니다. 최대 호환성을 위해 포함하세요.
필요한 크기
플랫폼마다 요구 크기가 다릅니다:
- 16×16, 32×32, 48×48: 일반 브라우저 탭
- 96×96: 데스크톱 바로가기/북마크
- 180×180: Apple Touch Icon (iOS 홈 화면)
- 192×192, 512×512: PWA 아이콘
“모두 다운로드” 패키지에 필요한 모든 크기가 포함됩니다.
브라우저 호환성
모던 접근: SVG를 기본, PNG/ICO를 폴백으로 사용합니다. 대부분의 최신 브라우저는 SVG 파비콘을 지원합니다. 최대 호환성을 위해 HTML에 SVG와 ICO 둘 다 포함하세요.
테스트
브라우저와 기기 전반에서 반드시 테스트하세요. 탭, 북마크, 모바일 홈 화면, 데스크톱 바로가기에서 어떻게 보이는지 확인하고, 가장 작은 크기에서도 알아볼 수 있어야 합니다.
피해야 할 실수
- 작은 크기에서 읽히지 않는 긴 텍스트 사용
- 배경과 섞이는 낮은 대비의 색 조합
- 세부가 많은 복잡한 디자인
- 플랫폼별 여러 크기를 준비하지 않음
- 여러 브라우저/기기에서 테스트하지 않음
- 라이선스 확인 없이 저작권 있는 폰트나 소재 사용