lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroHtmlChapter4Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>HTML Favicon 예시</title>

    
    <link rel="icon" href="path/to/favicon.ico" type="image/x-icon" />

    
    <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>

  <body>
    <h1>파비콘 설정 예시</h1>
    <h3>HTML head 태그를 확인해 보세요</h3>
    <p>이 웹사이트는 Favicon 예시를 보여주기 위한 페이지입니다.</p>
  </body>
</html>

# 파비콘(Favicon)

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

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

<br />
<br />

## Favicon을 사용하는 이유

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

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

<br />

## Favicon을 추가하는 방법

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

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

<br />

```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`을 사용합니다.

<br />

### 여러 크기의 Favicon 사용하기

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

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

<br />

### 코드 예시

```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>
```

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