2026년에 favicon을 올바르게 설정하려면 최신 기능과 이전 버전과의 호환성 사이에서 균형을 맞춰야 합니다. 이 가이드는 모든 것을 실행 가능한 체크리스트로 정리했습니다.
2026년 Favicon 체크리스트
- favicon.ico (32×32) — 루트에 배치합니다. 보편적인 대체 아이콘입니다.
- favicon-32x32.png — 최신 브라우저 탭용(Retina).
- favicon-16x16.png — 표준 DPI 브라우저 탭용.
- apple-touch-icon.png (180×180) — iOS 홈 화면용.
- android-chrome-192x192.png — Android 및 PWA용.
- android-chrome-512x512.png — PWA 스플래시 화면용.
- site.webmanifest — Android 아이콘을 참조하는 PWA manifest.
- HTML <link> tags — 모든 페이지의
<head>안에 포함합니다.
디자인 모범 사례
단순하게 유지하기
16×16 픽셀에서는 미세한 디테일이 완전히 사라집니다. 최고의 favicon은 다음과 같습니다.
- 단일 문자 또는 기호
- 전경과 배경 간의 높은 대비
- 그라데이션이나 얇은 선이 없는 굵고 깔끔한 모양
투명 배경 사용하기
단색 배경은 최신 브라우저 UI에서 구식으로 보입니다. 투명 PNG는 라이트 모드, 다크 모드 또는 사용자 지정 테마 등 모든 브라우저 테마와 자연스럽게 어울립니다.
예외: Apple Touch Icon은 iOS가 투명한 영역을 검은색으로 채우기 때문에 단색 배경을 가져야 합니다.
라이트 모드와 다크 모드 모두를 위해 디자인하기
다크 모드가 표준이 됨에 따라, 밝은 배경과 어두운 배경 모두에서 favicon을 테스트하십시오. 어두운 브라우저 탭에 어두운 favicon이 있으면 보이지 않습니다.prefers-color-scheme 지원이 있는 SVG favicon 사용을 고려해 보십시오 (저희 SVG favicon 가이드를 참조하십시오).
크게 시작하여 축소하기
항상 512×512 이상으로 디자인한 다음, 필요한 각 크기로 내보내십시오. 필요한 경우 16×16 버전을 수동으로 최적화하십시오. 자동 축소는 때때로 흐릿한 결과를 초래할 수 있습니다.
기술 모범 사례
파일 배치
favicon.ico는 도메인의 루트에 배치하십시오. 브라우저가 자동으로 그곳을 찾습니다.- 다른 파일은 정리를 위해
/favicons/하위 디렉토리에 넣을 수 있습니다. - HTML에서 절대 경로를 사용하십시오 (
/favicon.ico,favicon.ico가 아님).
캐싱 전략
- favicon 파일에 긴 캐시 헤더(1년)를 설정하십시오. 이 파일들은 거의 변경되지 않습니다.
- 업데이트할 때는 캐시 무효화 쿼리 문자열을 사용하십시오:
href="/favicon.ico?v=2" - 또는 파일 이름을 변경하십시오:
href="/favicon-v2.ico"
성능
- TinyPNG 또는
pngquant와 같은 도구로 PNG 파일을 최적화하십시오. - 32×32 PNG는 2KB 미만이어야 합니다.
- 브라우저가 32×32만 필요할 때 512×512 이미지를 제공하지 마십시오.
SEO 모범 사례
Google 검색 결과
Google은 검색 결과에 favicon을 표시합니다. 당신의 favicon이 나타나도록 하려면:
- 48px의 배수(48×48, 96×96 등)인 favicon을 제공하십시오.
robots.txt에서 favicon 파일을 차단하지 마십시오.- favicon은 웹사이트와 동일한 도메인에 있어야 합니다.
- 정사각형 이미지여야 합니다.
- 부적절하거나, 불쾌하거나, 일반적인 아이콘이 아니어야 합니다.
페이지 간 일관성
사이트의 모든 페이지에서 동일한 favicon을 사용하십시오. 페이지마다 다른 favicon을 사용하면 사용자를 혼란스럽게 하고 브랜드 인지도를 희석시킵니다.
피해야 할 일반적인 안티패턴
| 안티패턴 | 나쁜 이유 | 대신해야 할 것 |
|---|---|---|
| favicon.ico만 제공 | iOS/Android/PWA 지원 부족 | 모든 크기 제공 |
| 텍스트가 있는 전체 로고 사용 | 16px에서 읽기 어려움 | 기호 또는 모노그램 사용 |
| JPEG를 .ico로 이름 변경 | 브라우저가 거부할 수 있음 | 올바른 형식 변환 사용 |
| CDN에서만 favicon 제공 | Google이 색인하지 않을 수 있음 | 동일 도메인에서 호스팅 |
| 애니메이션 favicon | 산만하고 지원이 미흡함 | 정적 아이콘 사용 |
| favicon이 전혀 없음 | 비전문적이며 SEO에 해로움 | 추가하십시오 — 5분이면 됩니다 |
Favicon 설정 테스트하기
- 브라우저 탭 — Chrome, Firefox, Safari, Edge에서 확인하십시오.
- 북마크 — 페이지를 북마크하고 아이콘을 확인하십시오.
- iOS 홈 화면 — iPhone 홈 화면에 추가하십시오.
- Android 홈 화면 — Android 홈 화면에 추가하십시오.
- Google 검색 — Search Console을 사용하여 favicon 색인 생성을 확인하십시오.
- 소셜 공유 — 링크 미리보기를 위해 OG image를 확인하십시오.
경쟁업체가 favicon을 어떻게 처리하는지 알고 싶으십니까? Mzu favicondl을 사용하여 모든 웹사이트의 favicon 설정을 즉시 확인할 수 있습니다.