본문으로 건너뛰기
실습하기

파비콘(Favicon)

파비콘(Favicon)은 웹사이트의 아이콘을 나타내는 작은 이미지로, 웹 브라우저의 탭에 표시됩니다.

favicon.png

Favicon을 사용하는 이유​

  • 사용자 편의성: 사용자가 여러 탭을 열어 놓았을 때, favicon으로 해당 웹사이트를 쉽게 인식할 수 있습니다.

  • 브랜딩: 특별한 아이콘을 통해 웹사이트의 브랜드나 정체성을 강조할 수 있습니다.


Favicon을 추가하는 방법​

파비콘은 HTML 문서의 <head> 섹션 내에 외부 리소스를 정의하는 <link> 태그로 아래와 같이 정의합니다.

주로 .ico 확장자의 파일을 사용하지만, .png나 .jpg와 같은 다른 이미지 형식도 사용될 수 있습니다.


파비콘 코드 예시
<head>
  <link rel="icon" href="이미지경로/favicon.ico" type="image/x-icon" />
</head>

  • rel 속성은 현재 문서와 외부 리소스 사이의 관계를 정의합니다. icon은 외부 리소스가 현재 문서의 아이콘임을 나타냅니다.

  • href 속성은 외부 리소스(아이콘 이미지)의 URL 경로 지정합니다.

  • type 속성은 image/x-icon처럼 외부 리소스의 미디어 타입을 지정합니다. 파비콘은 대부분 .ico 확장자를 사용하므로 image/x-icon을 사용합니다.


여러 크기의 Favicon 사용하기​

다양한 장치나 상황에 맞게 여러 크기의 favicon을 제공해야 할 때가 있습니다.

이럴 때는 여러 <link> 태그를 사용해서 각각의 아이콘을 지정할 수 있습니다.


코드 예시​

다양한 파비콘 크기 설정
<head>
  <link rel="icon" sizes="16x16" href="path/to/favicon-16x16.png" />
  <link rel="icon" sizes="32x32" href="path/to/favicon-32x32.png" />
  <link
    rel="apple-touch-icon"
    sizes="180x180"
    href="path/to/apple-touch-icon-180x180.png"
  />
</head>

이렇게 설정하면, 브라우저는 화면 크기에 가장 적절한 크기의 아이콘을 선택해 표시합니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!