HTML Favicon
1. Favicon이란?
Favicon은 웹 브라우저의 탭, 즐겨찾기, 북마크 등에 표시되는 작은 아이콘입니다. 파비콘은 웹사이트의 정체성을 시각적으로 나타내는 중요한 요소로, 사이트의 인지도를 높이고 사용자가 페이지를 쉽게 구별할 수 있도록 돕습니다.
2. Favicon의 기본 설정
HTML에서 Favicon을 설정하려면 <link> 태그를 사용하여 HTML 문서의 <head> 섹션에 아이콘 파일을 연결합니다.
<link rel="icon" href="favicon.ico" type="image/x-icon">3. 다양한 이미지 형식 지원
Favicon은 여러 가지 이미지 파일 형식을 지원합니다. 주로 .ico와 .png 파일 형식을 사용합니다.
<link rel="icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.ico" type="image/x-icon">4. 고해상도 Favicon 설정
고해상도 디스플레이(레티나 디스플레이 등)를 사용하는 기기에서 Favicon이 뚜렷하게 보이려면 고해상도 이미지를 제공하는 것이 좋습니다.
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="favicon-64x64.png" sizes="64x64" type="image/png">5. 여러 브라우저 및 플랫폼 지원
파비콘을 여러 브라우저와 기기에서 최적화하려면 다양한 크기의 아이콘을 설정할 수 있습니다.
<link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="favicon-96x96.png" sizes="96x96" type="image/png">6. iOS 및 Android에서의 Favicon
iOS와 Android에서는 홈 화면에 추가할 때 애플 터치 아이콘(Apple Touch Icon)이나 모바일 아이콘을 사용합니다.
<!-- iOS용 애플 터치 아이콘 -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Android용 아이콘 -->
<link rel="icon" sizes="192x192" href="android-icon-192x192.png" type="image/png">7. 브라우저에서의 Favicon 캐싱 문제 해결
파비콘이 변경된 후에도 캐시된 파비콘이 표시될 수 있습니다. 이를 해결하려면 파일 이름에 쿼리 스트링을 추가하여 캐시를 무력화할 수 있습니다.
<link rel="icon" href="favicon.ico?v=2" type="image/x-icon">