엄청난 영향력을 지닌 작은 아이콘
파비콘은 브라우저 탭, 북마크 목록, 브라우저 기록 및 2019년부터 Google 모바일 검색 결과에 표시되는 작은 아이콘입니다. 이러한 작은 이미지는 불균형적인 브랜드 무게를 담고 있습니다. 연구에 따르면 사용자는 주로 탭 텍스트가 아닌 파비콘 인식을 사용하여 열린 탭을 구별하는 것으로 나타났습니다. 누락되거나 일반 파비콘이 있으면 열려 있는 여러 탭에서 사이트를 찾기가 더 어려워집니다.
파비콘 크기 및 형식
| 체재 | 크기 | 필수 대상 |
|---|---|---|
| ICO | 16×16, 32×32 | 레거시 브라우저 탭 지원 |
| PNG | 192×192 | 안드로이드 홈 화면 아이콘, PWA |
| PNG | 512×512 | PWA 스플래시 화면, 높은 DPI 디스플레이 |
| 애플 터치 아이콘 | 180×180 | iOS "홈 화면에 추가" |
| SVG | 확장 가능 | 최신 브라우저 — 어떤 크기에서도 완벽하게 선명함 |
Google 검색 연결
2019년부터 Google은 모바일 검색결과의 URL 옆에 웹사이트 파비콘을 표시합니다. 누락된 파비콘에는 일반 지구본 아이콘이 표시됩니다. 픽셀화되거나 품질이 낮은 파비콘은 사용자에게(잠재적으로는 Google의 품질 신호에) 사이트가 제대로 유지되지 않을 수 있다는 신호를 보냅니다. 파비콘을 선명하고 최신 상태로 유지하는 것은 작지만 실제 SEO 고려 사항입니다.
💡 전문가 팁:16×16픽셀에서 작동하도록 파비콘을 디자인하세요. 큰 벡터 디자인으로 시작한 다음 작은 버전을 구체적으로 최적화하세요. 단순히 축소하는 것이 아닙니다. 256px에서는 훌륭해 보이는 디테일이 16px에서는 흐릿한 얼룩이 되는 경우가 많습니다.
웹사이트에 파비콘을 추가하는 방법
- 먼저 파비콘을 512×512 PNG로 만듭니다.
- 변환기를 사용하여 ICO(다중 크기: 16, 32, 48) 생성
- 장소
favicon.ico사이트의 루트 디렉터리에 - HTML에 추가
<머리>:<link rel="icon" href="/favicon.ico"> - Apple Touch 아이콘 추가:
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> - 192px 및 512px 아이콘을 참조하세요.
매니페스트.jsonPWA 지원을 위해
일부 사이트에서 깨진 파비콘이 표시되는 이유는 무엇입니까?
가장 일반적인 원인은 HTML의 잘못된 파일 경로, favicon.ico에 대해 404를 반환하는 서버 또는 도메인 간 파비콘 요청을 차단하는 CORS 제한 사항입니다. 대부분의 브라우저는 파비콘 요청을 적극적으로 캐시합니다. 파비콘을 변경한 후에는 브라우저 캐시를 지우십시오.