파비콘 만드는 기준 · 검색 결과에 뜨게 하려면

파비콘은 사이트를 대표하는 작은 정사각형 아이콘이다. 브라우저 탭과 북마크에 표시되고, 구글 검색 결과에서는 사이트 이름 옆에 함께 노출된다. 구글이 이 아이콘을 검색 결과에 쓰려면 조건이 붙는다. 파일이 정사각형이면서 한 변이 48픽셀의 배수여야 하고, 잘 바뀌지 않는 고정된 URL에 놓여 있어야 하고, 홈페이지의 head에서 link 태그로 참조되어야 하고, 파비콘 파일과 홈페이지가 둘 다 크롤링을 허용해야 한다. 사이트 하나에 파비콘도 하나이며, 구글은 호스트 이름 단위로 사이트를 구분한다. 파일을 만드는 일 자체는 금방 끝난다. 실제로 갈리는 부분은 만들기가 아니라 이 조건을 다 지켰는지다.

파비콘은 브라우저 탭에만 뜨는 아이콘이 아니다

파비콘을 탭 아이콘으로만 아는 경우가 많다. 그래서 우선순위가 맨 뒤로 밀린다.

실제로는 구글 검색 결과에서 사이트 이름과 URL 옆에 같이 나온다. 결과 목록이 한 화면에 쌓이면 아이콘이 없거나 기본 아이콘으로 나오는 결과가 눈에 띈다. 나쁜 쪽으로 눈에 띈다.

여기서 흔한 오해를 하나 정리하고 가야 한다. 구글의 파비콘 문서는 순위가 아니라 검색 결과에 아이콘이 표시되는 조건만 다룬다. 파비콘이 랭킹 신호라는 서술은 그 문서에 없다. 파비콘이 관여하는 지점은 순위가 아니라 이미 노출된 결과의 겉모습이다. 같은 자리에 있어도 아이콘이 있는 결과와 없는 결과는 첫인상이 다르다.

그래서 이 작업의 성격은 SEO 개선이라기보다 마감 처리에 가깝다. 순위를 올리는 일이 아니라, 이미 확보한 노출을 낭비하지 않는 일이다. 비용은 낮고 한 번 하면 끝난다. 그런데도 빠뜨린 채 굴러가는 사이트가 있다.

구글이 요구하는 파비콘 조건은 무엇인가

구글 공식 문서가 요구하는 항목은 다섯 가지로 정리된다.

첫째, 파비콘 파일과 홈페이지 둘 다 구글이 크롤링할 수 있어야 한다. robots.txt로 이미지 경로를 통째로 막아둔 사이트가 여기서 걸린다.

둘째, 파비콘은 홈페이지에서 참조되어야 한다. 개별 글 페이지에만 넣고 홈페이지에 안 넣으면 구글은 못 찾는다.

셋째, 파일 URL이 안정적이어야 한다. 빌드할 때마다 해시가 붙어 경로가 바뀌는 구조라면 문제가 될 수 있다.

넷째, 정사각형이고 한 변이 48픽셀의 배수여야 한다. SVG에는 이 픽셀 크기 요건이 따로 적용되지 않는다.

다섯째, 사이트를 시각적으로 대표하는 이미지여야 한다. 구글은 부적절하다고 판단한 이미지는 표시하지 않는다.

조건 자체는 어렵지 않다. 그런데 이 다섯 개 중 하나만 어긋나도 결과는 똑같다. 아이콘이 안 뜬다. 그리고 어느 조건에서 걸렸는지 알려주는 리포트는 없다.

크기: 48픽셀의 배수라는 규칙

한 변이 48의 배수인 정사각형이라는 조건은, 반대로 말하면 흔히 쓰던 16x16이나 32x32만 준비해두면 요건에 못 미친다는 뜻이다.

정답을 하나 고르라면 사이즈를 크게 잡는 쪽이다. 구글 문서가 48의 배수를 요구하는 이유 자체가 표시 크기에 맞게 깨끗하게 줄이기 위해서다. 원본이 크면 줄이는 일만 남지만, 처음부터 작게 만들어두면 다른 용도로 늘려 써야 할 때 손해를 본다. 축소는 깔끔하고 확대는 뭉개진다.

예외가 하나 있다. SVG를 쓴다면 픽셀 크기 조건은 신경 쓸 필요가 없다. 벡터라서 크기 개념이 다르다.

형식: 어떤 파일을 준비해야 하나

구글은 구글 이미지가 지원하는 형식이면 받는다. 실무에서 고민할 만한 선택지는 네 개다.

현실적인 조합은 이렇다. 48의 배수 PNG 하나를 기본으로 두고, 루트에 favicon.ico를 관행상 같이 둔다. SVG를 쓸 수 있는 디자인이면 SVG를 추가한다. 이 이상 파일을 늘리는 건 대부분 과잉이다.

JPEG는 피하는 게 낫다. 배경 투명 처리가 안 되고, 압축 특성상 작은 크기에서 글자 가장자리가 지저분해진다.

16픽셀에서 살아남는 디자인만 남는다

파비콘이 실제로 보이는 크기는 손톱보다 작다. 여기서 대부분의 디자인이 무너진다.

무너지는 방식은 거의 정해져 있다. 로고를 통째로 축소해서 넣으면 회사 이름 글자가 회색 얼룩이 된다. 그라데이션은 단색 덩어리가 된다. 가는 선은 사라지거나 계단처럼 깨진다. 요소가 셋을 넘어가면 서로 붙어 형체를 잃기 쉽다.

그래서 파비콘 디자인은 로고를 줄이는 작업이 아니라, 로고에서 한 조각을 떼어내는 작업이다.

떼어낼 수 있는 후보는 셋 중 하나다. 로고의 심볼 마크, 브랜드명의 첫 글자, 브랜드를 대표하는 아주 단순한 도형. 셋 다 없다면 첫 글자가 가장 안전하다.

몇 가지 실무 기준이 있다.

배경을 채우는 편이 대체로 낫다. 흰 배경에 검은 글자만 있으면 다크 모드 탭에서 사라진다. 색이 있는 정사각형 안에 흰 마크를 얹으면 어느 배경에서도 형태가 유지된다.

여백은 생각보다 적게 잡는다. 로고 가이드라인의 여백 규칙을 그대로 가져오면 실제 표시 크기에서 마크가 너무 작아진다.

글자는 한 글자까지다. 두 글자는 붙어 보이고 세 글자는 얼룩이 된다. 한글 한 글자는 획이 많아 단순한 형태로 다듬거나 영문 이니셜을 쓰는 편이 안전하다.

검증 방법은 단순하다. 만든 이미지를 16픽셀 정도로 축소해서 화면에서 팔 하나 거리를 두고 본다. 무엇인지 알아볼 수 있으면 통과다.

파일을 어디에 두고 어떻게 연결하나

파비콘은 홈페이지의 head 안에서 link 태그로 참조되어야 한다. 구글이 인식하는 rel 값은 정해져 있다.

브라우저는 태그가 없어도 루트의 /favicon.ico를 알아서 찾아본다. 그래서 태그 없이도 탭에는 아이콘이 뜨는 경우가 있고, 이게 착각의 원인이 된다. 탭에 보인다고 구글이 본 것은 아니다. 문서가 요구하는 건 홈페이지에서의 참조다. 태그를 명시해두는 편이 안전하다.

프레임워크를 쓴다면 확인할 지점이 하나 더 있다. 파일 기반으로 메타데이터를 처리하는 프레임워크는 정해진 위치에 파일을 두면 태그를 자동으로 넣어준다. 이때 배포된 HTML을 직접 열어 태그가 실제로 들어갔는지, 경로가 해시 없이 안정적인지 확인하는 게 좋다. 설정 파일에 적혀 있는 것과 배포된 페이지가 내보내는 것은 별개다.

사이트 하나에 파비콘 하나다

구글은 사이트당 파비콘 하나만 지원하고, 여기서 사이트는 호스트 이름 기준이다.

이게 실무에서 걸리는 지점은 여러 서비스를 한 도메인에 얹은 경우다. 블로그 섹션에만 다른 아이콘을 쓰고 싶어도 검색 결과에는 반영되지 않는다. 페이지마다 다른 link 태그를 넣어도 결과는 같다.

반대로 서브도메인은 별개 호스트다. blog.example.com과 example.com은 각각 파비콘을 가질 수 있다. 서브도메인마다 아이콘을 다르게 가져가는 게 나은지는 상황에 따라 다르다. 브랜드가 하나라면 통일하는 쪽이 낫고, 성격이 완전히 다른 서비스라면 나눌 이유가 있다.

한 가지는 확실하다. 파비콘을 자주 바꾸는 건 손해다. URL이 안정적이어야 한다는 조건과도 충돌하고, 반영에 시간이 걸리므로 바꾸는 동안 옛 아이콘과 새 아이콘이 엇갈려 보이는 기간이 생긴다.

구글이 실제로 무엇을 보는지 확인하는 법

서치 콘솔에는 파비콘 전용 리포트가 없다. 그래서 확인은 간접적으로 한다. 순서대로 하면 대부분 원인이 잡힌다.

첫째, 파일이 실제로 응답하는지 본다. 파비콘 URL을 브라우저 주소창에 직접 넣어본다. 이미지가 그대로 떠야 한다. 여기서 404가 나거나 HTML 페이지가 뜨면 그 지점에서 끝난다. 특히 모든 경로를 앱으로 넘기는 구조에서는 없는 파일에도 200과 HTML을 돌려주는 일이 있으므로, 상태 코드만 보지 말고 실제로 이미지가 보이는지 확인한다.

둘째, 홈페이지에서 태그가 나가는지 본다. 서치 콘솔의 URL 검사에서 홈페이지를 검사하고 렌더링된 HTML을 열어 link 태그를 찾는다. 개발 환경이 아니라 배포된 페이지 기준으로 봐야 한다.

셋째, 크롤링이 막혀 있지 않은지 본다. robots.txt에서 이미지 경로나 정적 파일 경로를 막고 있지 않은지 확인한다.

넷째, 실제 검색 결과를 본다. site: 연산자로 자기 도메인을 검색해 결과 옆 아이콘을 확인한다. 표시 형태는 기기와 화면에 따라 다르므로 모바일과 데스크톱을 모두 본다.

이 네 가지를 다 통과했는데도 안 보인다면, 남은 원인은 대체로 시간이다.

바꿨는데 검색 결과에 반영되지 않는 이유

파비콘 변경은 즉시 반영되지 않는다. 이유가 두 겹이다.

바깥 겹은 캐시다. 브라우저는 파비콘을 오래 캐시한다. 시크릿 창에서 열거나 다른 기기에서 확인해야 실제 상태가 보인다. 내 화면에 옛날 아이콘이 남아 있는 것과 구글이 무엇을 가지고 있는지는 무관하다. 링크 미리보기 카드에서도 같은 일이 벌어지는데, 그쪽은 플랫폼마다 캐시가 따로 있어 초기화 방법이 다르다(OG 이미지 설정 기준). 파비콘은 그런 재수집 도구가 없다는 점이 다르다.

안쪽 겹은 재크롤링이다. 구글은 홈페이지를 다시 크롤링할 때 파비콘 참조를 다시 읽는다. 그 주기는 사이트마다 다르고, 확실하게 앞당기는 방법은 없다. 홈페이지 색인 재요청을 넣어볼 수는 있지만 파비콘 갱신을 보장하지는 않는다.

마지막 줄이 제일 중요하다. 조건을 다 맞췄으면 그다음에 할 일은 없다. 확인하겠다고 며칠 간격으로 파일을 계속 바꾸면 오히려 URL 안정성 조건을 스스로 깨는 셈이 된다.

파비콘 만들기 실무 순서

정리하면 이 순서다.

1. 로고에서 심볼이나 첫 글자 하나를 고른다.
2. 정사각형 배경에 얹고 여백을 줄인다.
3. 16픽셀로 축소해 알아볼 수 있는지 본다. 안 보이면 1번으로 돌아간다.
4. 512x512 같은 큰 정사각형 PNG로 내보낸다.
5. 고정된 경로에 올린다. 빌드마다 해시가 붙지 않는 경로여야 한다.
6. 홈페이지 head에 rel="icon" link 태그를 넣는다.
7. 배포 후 파비콘 URL을 직접 열어 이미지가 뜨는지 확인한다.
8. URL 검사로 홈페이지 렌더링 HTML에 태그가 있는지 확인한다.
9. 손을 뗀다.

9번이 실제로 지키기 어려운 항목이다.

한 가지 덧붙이면, 파비콘은 사이트를 새로 만들 때 체크리스트에 넣어두는 게 가장 싸다. 나중에 하려면 배포 파이프라인을 다시 열어야 하는데, 그 시점에는 더 급한 일이 늘 있다.

파비콘으로 할 수 없는 일

기대치를 정리해두는 편이 낫다.

파비콘은 순위를 올리지 않는다. 검색 결과의 제목이나 설명을 바꾸지 않는다. 클릭률을 얼마나 올려주는지도 사이트마다 다르고, 그 숫자를 일반화해서 말하는 건 근거가 없다.

파비콘이 하는 일은 하나다. 검색 결과 목록에서 내 사이트가 이름 없는 결과로 보이지 않게 한다. 그 이상을 기대하면 실망하고, 그 이하로 취급하면 계속 미뤄진다.

브랜드 인지가 아직 없는 초기 사이트라면 효과를 체감하기 어려울 수 있다. 반대로 이름을 아는 사람이 검색으로 다시 찾아오는 사이트라면, 목록에서 아이콘 하나로 구분되는 값이 생각보다 크다. 어느 쪽인지는 자기 검색 유입 구성을 봐야 알 수 있고, 그건 남이 대신 판단해줄 수 없다.

이 작업을 언제 해야 하나

지금 사이트가 있고 파비콘이 없다면, 오늘 안에 끝낼 수 있는 일이다. 디자인 리소스가 없어도 첫 글자 하나로 시작할 수 있고, 나중에 마크가 생기면 교체하면 된다. 다만 교체는 자주 하지 않는다.

이미 있는데 검색 결과에 안 나온다면, 위의 증상 표를 위에서부터 하나씩 짚는다. 흔한 원인은 태그가 홈페이지에 없거나 파일 크기가 요건에 못 미치는 두 가지다.

콘텐츠를 꾸준히 발행하는 사이트라면 이런 항목은 한 번 하고 잊는 게 아니라 배포 점검 목록에 남겨두는 편이 낫다. Trina는 콘텐츠 발행 흐름을 운영하면서 이런 반복 점검 항목을 같이 관리하도록 만든 도구다. 파비콘 자체는 도구 없이도 끝나는 일이지만, 리뉴얼 한 번에 조용히 사라지는 종류의 설정이라는 점은 기억해둘 만하다.

자주 묻는 질문

파비콘이 없으면 검색 결과에 어떻게 표시됩니까?

파비콘이 없거나 구글이 요건에 맞지 않는다고 판단하면 기본 아이콘으로 표시됩니다. 결과가 사라지지는 않지만, 아이콘이 있는 다른 결과와 나란히 놓였을 때 시각적으로 구분되지 않습니다.

favicon.ico 파일만 루트에 두면 충분합니까?

브라우저 탭에는 대체로 표시됩니다. 다만 구글 문서는 홈페이지에서 참조할 것을 요구하므로, 검색 결과 표시를 목표로 한다면 link 태그를 명시하는 편이 안전합니다. 파일 크기도 48픽셀의 배수 정사각형 요건을 만족해야 합니다.

파비콘을 바꾸면 얼마나 걸려 반영됩니까?

정해진 기간은 없습니다. 구글이 홈페이지를 다시 크롤링할 때 반영되며, 그 주기는 사이트마다 다릅니다. 브라우저 캐시 때문에 본인 화면에서는 더 오래 옛 아이콘이 남아 있을 수 있으니 시크릿 창이나 다른 기기에서 확인하시기 바랍니다.

페이지마다 다른 파비콘을 쓸 수 있습니까?

검색 결과에서는 불가능합니다. 구글은 호스트 이름 단위로 사이트당 하나의 파비콘만 지원합니다. 다른 아이콘이 필요하다면 서브도메인을 분리해야 합니다.

어떤 크기 하나만 준비한다면 무엇이 좋습니까?

48픽셀의 배수를 만족하는 정사각형 중에서 큰 쪽을 권합니다. 축소는 깨끗하지만 확대는 뭉개지기 때문입니다. 512x512 PNG 하나를 만들어두면 홈 화면 아이콘 용도로도 함께 쓸 수 있습니다.

참고 자료

• Google 검색결과의 파비콘 정의하기 — 파비콘의 크기, 형식, 홈페이지 참조와 크롤링 요건에 대한 공식 문서
• 검색결과 스니펫 관리하기 — 검색 결과에 표시되는 요소와 그 제어 방법에 대한 공식 문서