Favicon 검사기
사이트의 Favicon 설정이 완벽한지 확인하고 다양한 형식 및 크기의 아이콘 파일을 확인하세요. 확인하려는 사이트 주소를 입력하세요:
완벽 검사
사이트의 모든 favicon 파일을 다양한 형식 및 크기로 확인
호환성 검사
다양한 플랫폼 및 기기의 favicon 호환성 확인
최적화 제안
자세한 최적화 제안 및 최적 실천 가이드 제공
Favicon 형식 설명
클래식 형식
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 파일은 압축 최적화를 적용하세요.