SaaS 랜딩 페이지에 복잡한 파비콘 묶음이 필요한 것은 아닙니다. 탭 크기에서도 알아볼 수 있는 모양, 안정적인 URL, 브라우저와 크롤러가 이해할 수 있는 선언이 필요합니다.

파비콘은 제품 완성도와 브랜드 시스템의 작은 요소이지만, 그 자체가 전환율을 높인다고 단정할 근거는 없습니다. 실제 기기에서 확인하고 검증되지 않은 매출 효과를 덧붙이지 않는 편이 정확합니다.

실용적인 파비콘 구성

HTML 표준은 페이지 아이콘에 rel='icon'을 사용하며 SVG 같은 확장 가능한 리소스에는 sizes='any'를 허용합니다. ICO는 호환성 폴백으로 사용할 수 있고, Apple 기기 홈 화면에 사이트를 추가할 사용자를 위해 Apple touch icon을 선택적으로 제공할 수 있습니다.

<link rel='icon' href='/favicon.svg' type='image/svg+xml' sizes='any'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

파일명과 속성은 실제 배포 파일과 일치해야 합니다. HTML 표준은 icon 관계와 sizes의 의미를 설명하고, Apple의 Web Clip 문서는 touch icon 설정을 설명합니다.

가장 작은 화면을 기준으로 디자인하기

워드마크보다 심볼을 사용하기

전체 제품명은 브라우저 탭에서 읽기 어렵습니다. 로고에서 가장 단순하고 구별되는 형태를 선택한 뒤 16×16과 32×32 픽셀로 확인하세요. 윤곽이 무너지면 해상도를 높이기 전에 디테일부터 줄여야 합니다.

밝은 UI와 어두운 UI 모두 확인하기

투명 배경의 어두운 그림은 어두운 탭 바에서 사라질 수 있고, 너무 밝은 그림은 밝은 UI에서 보이지 않을 수 있습니다. 두 환경을 모두 테스트하세요. 한 파일로 대비를 유지하기 어렵다면 검증된 SVG 색상 처리를 고려할 수 있습니다. 자세한 내용은 다크 모드 파비콘 가이드를 참고하세요.

URL을 안정적으로 유지하기

같은 URL에서 이미지만 교체하면 브라우저나 크롤러 캐시에 이전 이미지가 남을 수 있습니다. 디자인이 실제로 바뀌었을 때는 명확한 버전 URL을 사용하고 링크 선언을 한 번 업데이트하는 방법이 관리하기 쉽습니다.

Google 검색에는 별도의 표시 조건이 있습니다

브라우저 탭에서 정상적으로 보인다고 검색 결과에서 같은 아이콘이 사용되는 것은 아닙니다. Google의 현재 안내는 정사각형이며 최소 8×8 픽셀이어야 하고, 48×48 픽셀보다 큰 이미지를 권장하며, 홈페이지와 아이콘 파일을 모두 크롤링할 수 있어야 한다고 설명합니다. 조건을 만족해도 표시가 보장되지는 않습니다.

Google 검색 파비콘 공식 문서를 기준으로 삼고 URL을 안정적으로 유지하세요. “48×48보다 큰 이미지 권장”을 “모든 브라우저가 정확히 48×48을 요구한다”로 바꾸면 안 됩니다.

확인 체크리스트

기존 사이트의 파일을 먼저 확인하려면 파비콘 다운로드 가이드에서 시작할 수 있습니다. 선언과 실제 파일이 일치하는 작은 세트가 서로 맞지 않는 대형 패키지보다 낫습니다.