패비콘(favicon)은 웹 브라우저의 탭이나 북마크 등에서 웹사이트를 식별하는 작은 아이콘이다. ‘파비콘’으로도 표기한다. 웹 페이지 안의 큰 로고와는 표시되는 자리와 크기가 다르다. 탭을 여러 개 열었을 때 제목보다 먼저 눈에 들어오기도 한다. (MDN: 웹 페이지의 아이콘)
- 작은 크기의 모양: 큰 로고를 그대로 줄이면 가는 선이나 긴 글자가 구별되지 않을 수 있다. 작은 아이콘의 식별에서는 원래 로고와 얼마나 같은지뿐 아니라 실제 탭에서 무엇이 남는지도 본다.
- 파일과 선언: HTML의
head안에rel="icon"을 둔다. 아래 예시는 웹사이트의 루트에favicon.png파일을 놓았을 때의 선언이다. 파일 이름만 적어두고 실제 이미지를 올리지 않으면 표시되지 않는다.
<link rel="icon" href="/favicon.png" type="image/png">- 여러 형식: ICO, PNG, SVG 등 사용할 수 있는 형식이 있으며, 대상 웹 브라우저와 표시 환경의 지원을 확인한다. 모바일 홈 화면용 아이콘은 패비콘과 별도로 지정할 수 있다. (MDN: link의 icon 관계)
- 공유 화면과 구분: 메신저의 큰 미리보기 이미지는 보통 패비콘이 아니라 오픈 그래프 같은 메타데이터를 통해 전달한다. 포트폴리오 웹사이트에서는 탭의 식별과 공유될 작업 이미지를 따로 고를 수 있다.