파비콘(favicon)
파비콘은 웹사이트의 브라우저 탭에 표시되는 아이콘을 말합니다. 브라우저 탭의 왼쪽에 작은 그림이나 아이콘이 보이는데, 이것이 파비콘입니다. 사용자가 웹사이트를 쉽게 식별할 수 있도록 하거나, 웹사이트를 나타내는 작은 시각적 신호 역할을 합니다. 예를 들어, 구글의 파비콘은 "G"로 되어 있습니다. 파비콘은 웹사이트의 브랜드 아이덴티티를 강화하고 사용자 경험을 향상하는 데 도움이 됩니다.
선명하게 표시하는 방법
파비콘을 더 선명하게 표시하는 방법은 이미지를 더 높은 해상도로 제공하는 것입니다. 일반적으로 고해상도의 디스플레이를 지원하는 장치에서 파비콘을 선명하게 표시하려면 다음 단계를 따를 수 있습니다.
- 고해상도 아이콘 제작
- 파비콘 추가
- HTML에 링크 추가
먼저 원본 이미지를 더 높은 해상도 (보통은 192x192 픽셀)의 아이콘으로 제작합니다. 고해상도 아이콘은 주로 Apple의 Retina 디스플레이 및 다른 고해상도 디스플레이에서 더 선명하게 표시됩니다. 고해상도 아이콘을 생성한 후, 해당 이미지를 웹사이트 루트 디렉토리에 favicon.ico 파일로 추가합니다. 웹사이트의 HTML 코드에서 다음과 같이 고해상도 파비콘을 가리키는 링크를 추가합니다.
<!--[ Favicon ]-->
<link href='https://이미지 경로/favicon.ico' rel='apple-touch-icon' sizes='120x120'/>
<link href='https://이미지 경로/favicon.ico' rel='apple-touch-icon' sizes='152x152'/>
<link href='https://이미지 경로/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://이미지 경로/favicon.ico' rel='shortcut icon' type='image/x-icon'/>위 코드에서 "/favicon.ico"는 실제로 사용자의 웹사이트 경로에 맞게 수정되어야 합니다. 이러한 단계를 따르면 고해상도 디스플레이에서 더 선명한 파비콘이 표시됩니다.
참고사항
모든 브라우저에서 호환되는 파비콘 이미지 확장자명은 .ico입니다. 하지만 최근에는 .png도 많이 사용하고 있습니다. 좀 더 정밀한 화질을 원하시는 분들은 png 확장자를 사용하셔도 괜찮습니다.
