파비콘(Favicon)
파비콘(Favicon)은 웹사이트의 아이콘을 나타내는 작은 이미지로, 웹 브라우저의 탭에 표시됩니다.
![favicon.png](https://assets.codefriends.net/docs/web/intro/html/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
을 사용합니다.