lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroHtmlChapter4Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

# 파비콘(Favicon)

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

<img
 src="https://assets.codefriends.net/docs/web/intro/html/favicon.png"
 alt="favicon.png"
/>

 
 

## 파비콘을 사용하는 이유

파비콘은 웹사이트를 더욱 전문적으로 보이게 합니다. 다음과 같은 이유로 파비콘을 사용하는 것이 좋습니다.

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

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

 

## 파비콘을 추가하는 방법

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

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

 

```html title="파비콘 코드 예시"
<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을 제공해야 할 때가 있습니다.

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

 

```html title="다양한 크기의 파비콘 설정 예시"
<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>
```

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

Favicon은 웹사이트의 아이콘으로, HTML 문서의 `<head>` 섹션에 `<link>` 태그를 사용하여 추가할 수 있습니다. `<head>` 섹션은 페이지의 메타데이터와 관련된 요소를 포함합니다.

파비콘(Favicon)

파비콘을 사용하는 이유

파비콘을 추가하는 방법

여러 크기의 파비콘 사용하기

Favicon을 추가하는 방법