패비콘(favicon)은 웹 브라우저의 탭이나 북마크 등에서 웹사이트를 식별하는 작은 아이콘이다. ‘파비콘’으로도 표기한다. 웹 페이지 안의 큰 로고와는 표시되는 자리와 크기가 다르다. 탭을 여러 개 열었을 때 제목보다 먼저 눈에 들어오기도 한다. ([MDN: 웹 페이지의 아이콘](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#adding_custom_icons_to_your_site))

- **작은 크기의 모양:** 큰 로고를 그대로 줄이면 가는 선이나 긴 글자가 구별되지 않을 수 있다. [[작은 아이콘의 식별]]에서는 원래 로고와 얼마나 같은지뿐 아니라 실제 탭에서 무엇이 남는지도 본다.
- **파일과 선언:** [[HTML]]의 `head` 안에 `rel="icon"`을 둔다. 아래 예시는 웹사이트의 루트에 `favicon.png` 파일을 놓았을 때의 선언이다. 파일 이름만 적어두고 실제 이미지를 올리지 않으면 표시되지 않는다.

```html
<link rel="icon" href="/favicon.png" type="image/png">
```

- **여러 형식:** ICO, PNG, SVG 등 사용할 수 있는 형식이 있으며, 대상 웹 브라우저와 표시 환경의 지원을 확인한다. 모바일 홈 화면용 아이콘은 패비콘과 별도로 지정할 수 있다. ([MDN: link의 icon 관계](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel#icon))
- **공유 화면과 구분:** 메신저의 큰 미리보기 이미지는 보통 패비콘이 아니라 [[오픈 그래프]] 같은 [[메타데이터]]를 통해 전달한다. [[포트폴리오 웹사이트]]에서는 탭의 식별과 공유될 작업 이미지를 따로 고를 수 있다.

#HTML #웹 #디자인 #기초