웹사이트를 방문할 때 브라우저 탭 왼쪽에 작은 아이콘이 표시되는 것을 본 적이 있을 것입니다.
이 작은 아이콘을 파비콘(Favicon)이라고 합니다. 파비콘은 웹사이트의 브랜드를 나타내는 중요한 요소이며 사용자에게 사이트를 쉽게 인식하게 만들어 줍니다.
예를 들어 네이버, 구글, 유튜브 같은 사이트는 각자의 파비콘을 가지고 있으며 브라우저 탭이나 북마크 목록에서 바로 식별할 수 있습니다. 이런 작은 아이콘 하나만으로도 웹사이트의 완성도가 높아 보일 수 있습니다.
이번 글에서는 HTML 문서에 favicon을 적용하는 방법, favicon 파일 준비 방법, 그리고 실무에서 자주 사용하는 설정 방식까지 정리해보겠습니다.
favicon이란 무엇인가?
favicon은 "favorite icon"의 줄임말로 웹사이트를 대표하는 작은 아이콘을 의미합니다.
보통 다음과 같은 위치에서 표시됩니다.
- 브라우저 탭
- 북마크 목록
- 브라우저 즐겨찾기
- 모바일 홈 화면 바로가기
이처럼 favicon은 웹사이트의 브랜드 이미지를 전달하는 중요한 역할을 합니다.
favicon 파일 준비하기
favicon은 일반적으로 정사각형 형태의 이미지 파일을 사용합니다. 가장 기본적으로 많이 사용하는 크기는 다음과 같습니다.
- 16x16 px
- 32x32 px
- 48x48 px
- 64x64 px
파일 형식은 보통 다음과 같은 확장자를 사용합니다.
- .ico
- .png
- .svg
가장 전통적인 방식은 .ico 파일을 사용하는 것이지만 최근에는 PNG 파일을 사용하는 경우도 많습니다.
HTML에서 favicon 적용하는 기본 방법
favicon은 HTML 문서의 head 태그 안에 link 태그를 추가하여 설정할 수 있습니다.
<link rel="icon" href="/favicon.ico">
위 코드를 HTML 문서의 head 영역에 추가하면 브라우저에서 해당 이미지를 파비콘으로 인식합니다.
예를 들어 전체 구조는 다음과 같이 작성할 수 있습니다.
<head>
<meta charset="UTF-8">
<title>웹사이트 제목</title>
<link rel="icon" href="/favicon.ico">
</head>
PNG favicon 적용 방법
PNG 파일을 사용하는 경우 다음과 같이 작성할 수 있습니다.
<link rel="icon" type="image/png" href="/favicon.png">
type 속성을 함께 작성하면 브라우저가 이미지 형식을 더 정확하게 인식할 수 있습니다.
모바일 favicon 설정
모바일 환경에서는 홈 화면에 웹사이트를 추가할 때 사용하는 아이콘도 설정할 수 있습니다.
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
이 설정을 사용하면 iOS 기기에서 웹사이트를 홈 화면에 추가할 때 지정한 아이콘이 표시됩니다.
favicon이 적용되지 않을 때 확인할 것
favicon을 설정했는데 브라우저에 표시되지 않는 경우가 있습니다. 이런 경우 다음 사항을 확인해 보는 것이 좋습니다.
브라우저 캐시
브라우저 캐시 때문에 favicon이 업데이트되지 않을 수 있습니다.
이 경우 강력 새로고침을 해보는 것이 좋습니다.
파일 경로 확인
favicon 파일의 경로가 정확한지 확인해야 합니다.
특히 루트 경로 설정이 잘못되면 아이콘이 표시되지 않습니다.
이미지 파일 형식
브라우저가 지원하지 않는 형식의 이미지를 사용하면 favicon이 표시되지 않을 수 있습니다.
favicon이 중요한 이유
favicon은 작은 요소처럼 보이지만 실제로는 웹사이트 브랜드 인식에 큰 영향을 미칩니다.
- 사이트 인지도 향상
- 브라우저 탭 식별 쉬움
- 북마크 목록에서 구분 가능
- 웹사이트 완성도 상승
특히 여러 개의 탭을 동시에 사용하는 사용자에게는 favicon이 사이트를 구분하는 중요한 기준이 됩니다.
마무리
HTML 문서에 favicon을 적용하는 방법은 매우 간단하지만 웹사이트의 완성도를 높이는 중요한 요소입니다.
정리하면 다음과 같습니다.
- favicon은 웹사이트를 대표하는 아이콘이다.
- HTML head 태그 안에 link 태그로 설정한다.
웹사이트를 제작할 때 작은 디테일까지 신경 쓰는 것이 사용자 경험을 향상시키는 중요한 요소입니다.
favicon을 올바르게 설정하여 더 완성도 높은 웹사이트를 만들어 보시기 바랍니다.