HTML에서 웹사이트 아이콘(파비콘)의 크기를 지정하려면 sizes 속성을 사용합니다. 이 속성은 <link> 태그와 함께 작동하며, "너비x높이" 형식으로 픽셀 단위의 값을 입력합니다.
예를 들어 sizes="16x16"처럼 작성하며, 하나의 아이콘에 대해 여러 크기를 지정해야 할 경우 sizes="16x16 32x32"와 같이 공백으로 구분하여 나열할 수도 있습니다.
예제 코드
<!DOCTYPE html> <html> <head> <link rel = "icon" href = "my_icon.gif" type = "image/gif" sizes = "16x16"> </head> <body> <p>데모 텍스트입니다.</p> <p>여기서 아이콘을 설정했습니다.</p> </body> </html>
코드 설명
- rel="icon": 해당 링크가 웹사이트의 아이콘임을 브라우저에 알려줍니다.
- href="my_icon.gif": 아이콘으로 사용할 이미지 파일의 경로를 지정합니다.
- type="image/gif": 아이콘 파일의 MIME 유형을 명시합니다. PNG 이미지라면
image/png로 설정합니다. - sizes="16x16": 아이콘의 크기를 가로 16픽셀, 세로 16픽셀로 지정합니다.
이렇게 설정한 아이콘은 브라우저 탭, 북마크 목록 등 다양한 곳에서 웹사이트를 대표하는 이미지로 표시됩니다.