파비콘 (Favicon)

파비콘은 웹사이트를 나타내는 작은 아이콘입니다. 브라우저 탭과 북마크, Google 검색결과 등에 나타나 여러 사이트를 구별하게 해 줍니다. 작은 크기에서도 알아보기 쉽도록 로고의 핵심 기호나 단순한 형태를 사용합니다.

Google 검색은 호스트마다 파비콘 하나를 표시합니다

Google은 검색결과의 사이트 이름과 URL 주변에 파비콘을 표시합니다. 개별 페이지마다 따로 선택하는 방식이 아니라 호스트 하나에 아이콘 하나를 적용합니다.

example.com과 news.example.com은 서로 다른 호스트이므로 각각 설정할 수 있습니다. 같은 호스트의 example.com/blog 같은 하위 디렉터리는 Google 검색용 파비콘을 따로 지정할 수 없습니다.

홈페이지의 link 요소 설정

홈페이지 HTML의 <head>에 아이콘 파일을 가리키는 link 요소를 넣습니다.

<link rel="icon" href="/favicon.ico">

href에는 상대 주소나 절대 주소를 사용할 수 있으며 파일을 CDN에 둘 수도 있습니다. 아이콘 URL은 자주 바꾸지 않고 안정적으로 유지합니다.

WordPress에서는 사이트 아이콘 기능이나 테마 설정에서 등록하는 경우가 많습니다. 저장한 뒤 공개 홈페이지의 HTML을 열어 rel="icon"이 가리키는 파일이 새 아이콘인지 확인합니다. 관리자 화면에 저장한 이미지와 실제 홈페이지에 출력된 설정이 같아야 합니다.

이미지와 크롤링 요건

• 가로와 세로가 같은 1:1 비율을 사용합니다.
• 최소 8×8픽셀을 충족하고, 선명한 표시를 위해 48×48픽셀보다 큰 크기를 준비합니다.
• 유효한 파비콘 이미지 형식을 사용합니다.
• 작은 화면에서도 브랜드를 알아볼 수 있는 모양으로 만듭니다.
• Googlebot이 홈페이지에, Googlebot-Image가 아이콘 파일에 접근할 수 있도록 허용합니다.

이 조건을 충족해도 Google 검색결과의 표시가 보장되지는 않습니다.

아이콘이 표시되지 않을 때의 점검

1. 홈페이지 HTML에서 rel="icon"의 href가 원하는 아이콘 파일을 가리키는지 확인합니다.
2. 그 URL을 직접 열어 오류 페이지가 아닌 아이콘 이미지가 나타나는지 봅니다.
3. 이미지가 정사각형인지, 최소 크기와 권장 크기를 충족하는지 검사합니다.
4. robots.txt와 방화벽에서 Googlebot의 홈페이지 접근과 Googlebot-Image의 이미지 접근을 각각 확인합니다.
5. 잘못된 설정을 고친 뒤 URL 검사로 홈페이지의 재크롤링을 요청합니다.

Google이 홈페이지를 다시 수집하고 처리해야 수정한 아이콘이 반영됩니다. 며칠에서 몇 주가 걸릴 수 있으므로 변경 직후 표시만으로 설정 실패를 판단하지 않습니다.

로고와 파비콘의 용도

로고는 회사 이름과 브랜드를 넓은 공간에서 표현할 수 있습니다. 파비콘은 작은 정사각형 안에서도 구분돼야 합니다. 긴 회사명을 그대로 줄이기보다 로고의 핵심 기호나 이니셜을 단순화하면 작은 크기에서 식별하기 쉽습니다.

함께 알아두면 좋은 용어

• 사이트 이름: 검색결과에서 출처 사이트를 나타내는 이름
• robots.txt: 크롤러의 경로 접근 범위를 정하는 파일
• 이미지 SEO: 이미지 발견과 이해, 검색 노출을 개선하는 작업
• URL 검사: Google이 페이지를 처리한 상태를 확인하는 기능

참고 문서

• Google 검색 센터, 검색결과에 표시할 파비콘 정의하기
• MDN, HTML link 요소