웹사이트에 파비콘 추가하는 방법 (HTML 코드)

안녕하세요. 지오입니다. 파비콘(Favicon)은 웹사이트, 블로그 또는 웹페이지를 아이콘으로 나타나는 데 사용할 수 있는 작은 이미지 파일이죠. 오늘은 이를 웹사이트 HTML에 추가하고, 사용하는 방법에 대해 알아보도록 하겠습니다. (본 글은 HTML Favicon Code를 정리 및 번역한 것입니다.)

파비콘을 사용하는 이유

파비콘은 보통 브라우저 탭, 상태 표시줄, 브라우저 히스토리, 북마크 바 등에 나타나는데요. 사용자가 여러 탭을 열고 있는 경우 이러한 파비콘은 다른 웹사이트와 해당 웹사이트를 쉽게 구분할 수 있게 해줍니다. 또한 파비콘을 통해 색상, 글꼴 등을 설정해 웹사이트를 브랜딩할 수도 있죠. 만약 파비콘이 없다면 사용자는 일반적입 웹페이지 아이콘만 보게 됩니다.

웹사이트에 파비콘 추가하기

가장 먼저 할 일은 파비콘을 서버에 업로드하는 것입니다. 이름은 자유롭게 지을 수 있지만, favicon.ico이라 이름한 뒤 웹사이트의 루트 디렉토리에 배치하면 대부분의 브라우저에 자동으로 표시됩니다.

 

웹사이트에 HTML 코드를 추가해 브라우저에게 어떤 파비콘을 사용할지 지정해 줄 수도 있습니다. 해당 코드는 다음과 같습니다.

<link rel="shortcut icon" href="http://example.com/favicon.ico" />

예시에서는 .ico 확장자를 사용하고 있지만, png, gif, jpeg, gif 등의 이미지 확장자를 사용할 수 있습니다. 하지만, .ico 형식이 오랫동안 브라우저에서 널리 사용되어 왔으며, 일반적으로 파비콘에 사용됩니다.

 

파비콘의 크기는 16x16, 32x32, 48x48 또는 64x64 픽셀,색상은 8 비트, 24 비트 또는 32 비트일 수 있습니다.

애플 iOS 홈 스크린 아이콘

iOS 운영 체제 버전 1.1.3 이상이 설치된 Apple 기기에서는 웹 클립 기능 사용시, 홈 화면에 표시 될 사용자 아이콘을 설정할 수 있습니다. 해당 아이콘을 표시하려면, 아이콘을 서버에 업로드하고 다음 HTML 코드를 head 섹션에 이를 추가합니다.

<link rel="apple-touch-icon" href="http://example.com/images/apple-touch-icon.png" />

iOS에서는 자동으로 둥근 모서리와 반사광이 추가됩니다. 만약, 반사광이 없는 것을 사용하고자 하면 다음 코드를 사용하면 됩니다.

<link rel="apple-touch-icon-precomposed" href="http://example.com/images/apple-touch-icon.png" />