favicon("favorite icon"의 줄임말)은 브라우저 탭의 페이지 제목 옆에 나타나는 작은 아이콘입니다. 이는 웹사이트에서 가장 쉽게 인식할 수 있는 요소 중 하나이지만, 많은 개발자들이 이를 간과하고 있습니다.
favicon은 어디에 나타날까요?
favicon은 생각보다 더 많은 곳에 나타납니다.
- 브라우저 탭 — 가장 흔한 장소입니다. 열려 있는 각 탭에 사이트의 favicon이 표시됩니다.
- 북마크 바 — 사용자가 사이트를 북마크할 때, favicon은 나중에 사이트를 찾는 데 도움을 줍니다.
- Google 검색 결과 — 2019년부터 Google은 모바일 검색 결과의 URL 옆에 favicon을 표시했으며, 이제 데스크톱에서도 표시됩니다.
- 기록 — 브라우저 기록은 빠른 시각적 식별을 위해 favicon을 사용합니다.
- PWA 홈 화면 — 사이트가 Progressive Web App으로 설치되면, favicon이 앱 아이콘이 됩니다.
favicon이 중요한 이유
1. 브랜드 인지도
잘 디자인된 favicon은 브랜드 인지도를 높여줍니다. Google의 "G", Twitter의 새, YouTube의 재생 버튼이 16×16 픽셀 크기에서도 얼마나 즉시 인식되는지 생각해 보세요.
2. 사용자 경험
사용자가 20개 이상의 탭을 열었을 때, favicon은 사이트를 구별하는 유일한 방법입니다. favicon이 없으면 탭은 일반적인 빈 아이콘이 되어 쉽게 닫히고 쉽게 잊혀집니다.
3. SEO 영향
Google은 검색 결과에 favicon을 표시합니다. favicon이 없거나 품질이 낮으면 목록이 비전문적으로 보여 클릭률(CTR)이 감소할 수 있습니다. favicon이 있는 웹사이트는 CTR이 최대 20% 향상될 수 있다는 연구 결과도 있습니다.
4. 신뢰성 및 신뢰도
전문적인 favicon은 누군가가 세부 사항에 신경 쓰고 있음을 나타냅니다. 이는 작은 부분이지만, 전반적인 품질 인식에 기여합니다.
favicon 파일 형식
| 형식 | 최적의 용도 | 브라우저 지원 |
|---|---|---|
| .ico | 레거시 지원, 여러 크기 포함 가능 | 모든 브라우저 |
| .png | 최신 브라우저, 선명한 렌더링 | 모든 최신 브라우저 |
| .svg | 확장 가능, 다크 모드 지원 | Chrome, Firefox, Edge (Safari는 미지원) |
| .gif | 애니메이션 favicon (드묾) | 제한적 |
일반적인 favicon 크기
- 16×16 — 브라우저 탭 (클래식 크기)
- 32×32 — 브라우저 탭 (고DPI / Retina)
- 180×180 — Apple Touch Icon (iOS 홈 화면)
- 192×192 — Android Chrome
- 512×512 — PWA 스플래시 화면
시작하는 방법
기존 웹사이트에서 favicon을 얻는 가장 빠른 방법은 전용 도구를 사용하는 것입니다. Mzu favicondl을 사용하면 어떤 도메인이든 입력하여 여러 크기의 favicon을 즉시 다운로드할 수 있습니다. 가입이 필요 없습니다.
favicon을 처음부터 만들어야 한다면, 도구 섹션의 이미지-투-favicon 변환기를 사용하여 단일 이미지에서 필요한 모든 크기를 생성할 수 있습니다.
최소 favicon 설정
최소한 다음 두 줄을 HTML <head>에 추가하세요.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">이것으로 99%의 사용 사례를 커버할 수 있습니다. 더 포괄적인 설정은 자세한 HTML 가이드를 참조하십시오.