Favicon 검사기

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 파일은 압축 최적화를 적용하세요.