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 설정 파일
완전한 설정 예시
<!-- 기본 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 아이콘 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Android Chrome 아이콘 -->
<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 태그 -->
<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는 JSON 파일로, PWA(Progressive Web App)의 설정 정보를 정의합니다. 아이콘, 이름, 테마 색상 등을 포함합니다.
Favicon 로딩 속도를 어떻게 최적화할 수 있나요?
적절한 파일 크기를 사용하고, 너무 큰 아이콘 파일을 피하세요. ICO 파일은 여러 크기를 포함해야 하며, PNG 파일은 압축을 최적화해야 합니다.