파비콘이란 무엇인가?
파비콘(Favicon)은 웹 브라우저 탭의 페이지 제목 왼쪽에 표시되는 작은 아이콘입니다. 일반적으로 웹사이트를 대표하는 로고를 축소한 형태로 사용되며, 방문자가 여러 개의 탭을 열어두었을 때 자신의 사이트를 쉽게 식별할 수 있도록 도와주는 중요한 요소입니다.
CSS로 파비콘 크기를 지정할 수 있을까?
결론부터 말하면, CSS로는 파비콘의 크기를 지정할 수 없습니다. 현재 웹 표준에서는 CSS를 이용해 파비콘 크기를 조절하는 기능을 지원하지 않기 때문입니다. 파비콘은 스타일시트가 아닌 HTML 문서의 <head> 영역에서 선언해야 합니다.
HTML 속성으로 파비콘 크기 설정하기
파비콘의 크기를 지정하려면 <link> 태그의 sizes 속성을 사용해야 합니다. 아래 예제처럼 16x16 픽셀 크기의 PNG 파비콘을 연결할 수 있습니다.
<link rel="icon" type="image/png" href="https://tutorialspoint.com/favicon-16x16.png" sizes="16x16">
위 코드에서 각 속성의 역할은 다음과 같습니다.
- rel="icon": 해당 링크가 파비콘임을 브라우저에 알립니다.
- type="image/png": 파비콘 파일의 MIME 유형을 지정합니다.
- href: 파비콘 이미지 파일의 경로를 나타냅니다.
- sizes="16x16": 파비콘의 크기를 가로x세로(픽셀) 단위로 명시합니다.
이렇게 파비콘을 추가하면 브라우저 탭에 다음과 같이 작은 아이콘이 표시됩니다.
마무리
파비콘 크기는 CSS가 아닌 HTML의 sizes 속성을 통해 설정해야 한다는 점을 기억하세요. 필요에 따라 32x32, 48x48 등 여러 크기의 파비콘을 함께 등록하면, 다양한 기기와 브라우저 환경에서 최적화된 아이콘이 표시되도록 할 수 있습니다.