Favicon 검사기
완벽 검사
사이트의 모든 favicon 파일을 다양한 형식 및 크기로 확인
호환성 검사
다양한 플랫폼 및 기기의 favicon 호환성 확인
최적화 제안
자세한 최적화 제안 및 최적 실천 가이드 제공
이 무료 도구는 웹사이트의 favicon 설정이 완전한지 검사합니다. 기본 favicon 파일, Apple 터치 아이콘, 웹 앱 매니페스트, 주요 meta 태그를 점검하고 누락되거나 잘못 설정된 항목을 표시합니다.
공개된 웹사이트라면 어디든 사용할 수 있습니다. 도메인이나 URL을 입력하면 어떤 favicon 파일이 존재하고 어떤 파일이 필요한지에 대한 보고서를 즉시 받을 수 있습니다.
- favicon 누락 – favicon.ico나 PNG 아이콘을 찾을 수 없음
- 크기 오류 – 파일 크기가 브라우저가 기대하는 값과 다름
- 링크 깨짐 – favicon 파일이 404를 반환하거나 로드 실패
- apple-touch-icon 누락 – iOS 홈 화면용 아이콘이 없음
- PWA 아이콘 또는 웹 앱 매니페스트 누락
- 검사할 웹사이트 URL을 입력합니다.
- Check를 클릭하고 몇 초간 기다립니다.
- 각 섹션(Classic Favicon, Touch Icons, Web App Manifest, Meta Tags)을 확인합니다.
- 오류로 표시된 항목을 수정한 뒤 다시 검사합니다.
체커는 파일과 HTML의 정확성까지만 확인합니다. 파비콘 캐싱 방식은 브라우저마다 다르므로, 이 체크리스트로 새 아이콘이 실제로 적용되었는지 확인하세요.
- Chrome & Edge: 두 브라우저는 Chromium 아이콘 캐시를 공유합니다. 주소창에 chrome://favicon/https://your-site.com 을 열어 캐시된 아이콘을 확인하세요. 오래된 경우 강력 새로 고침(Ctrl+Shift+R)이나 시크릿 창으로 재요청을 강제합니다.
- Firefox: 캐시가 가장 공격적이며 아이콘을 며칠까지 유지할 수 있습니다. ?v=2 같은 쿼리가 붙은 아이콘 URL을 시크릿 창에서 열어 우회하거나, 설정 → 개인정보 보호 → 웹 페이지 캐시에서 삭제하세요.
- Safari(macOS): 버전 14부터 탭에 아이콘을 표시하며 ?v= 쿼리를 무시합니다. 새 시크릿 창에서 테스트하거나, 페이지를 다시 확인한 후 Safari 메뉴 → 방 기록 지우기로 정리하세요.
- iOS 홈 화면: apple-touch-icon.png는 홈 화면에 추가하는 순간에만 가져옵니다. 기존 바로 가기를 삭제하고 다시 추가하세요. 파일만 교체해서는 기존 아이콘이 갱신되지 않습니다.
- Google 검색 결과: 검색 결과의 파비콘은 브라우저 캐시가 아닌 색인된 복사본에서 옵니다. 변경 후 Google Search Console에서 홈페이지 재색인을 요청하세요. 보통 며칠 내에 반영됩니다.
클래식 형식
favicon.ico
전통적인 ICO 형식, 모든 브라우저 호환
favicon.png
현대적인 PNG 형식, 투명 배경 지원
favicon.svg
벡터 형식, 어두운 모드 지원
모바일 기기
Apple Touch Icon
iOS 기기 메인 화면 아이콘
Android Chrome
Android PWA 아이콘
Web App Manifest
PWA 설정 파일
Complete Configuration Example
<!-- Basic Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Android Chrome Icon -->
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<!-- Meta Tags -->
<meta name="theme-color" content="#ffffff">
<meta name="application-name" content="Your App Name">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">왜 여러 Favicon 형식이 필요한가요?
브라우저와 기기마다 지원하는 형식과 크기가 다릅니다. 여러 형식을 제공하면 모든 플랫폼에서 아이콘이 올바르게 표시됩니다.
ICO 형식은 아직 필요한가요?
현대 브라우저가 PNG를 지원하지만 ICO 형식은 여전히 가장 높은 호환성을 제공하며 특히 구형 브라우저에서 유용합니다.
Web App Manifest란 무엇인가요?
Web App Manifest는 PWA(프로그레시브 웹 앱)의 구성 정보를 정의하는 JSON 파일로, 아이콘, 이름, 테마 색상 등을 포함합니다.
Favicon 로딩 속도를 어떻게 최적화하나요?
적절한 파일 크기를 사용하고 과도하게 큰 아이콘 파일을 피하세요. ICO 파일에는 여러 크기를 포함하고, PNG 파일은 압축 최적화를 적용하세요.