파비콘 모범 사례

글자 길이

한 글자가 가장 잘 보입니다. 파비콘은 16×16~32×32 픽셀로 작아서, 한두 글자가 가장 읽기 쉽습니다. 글자가 길면 뭉개지고 복잡해 보입니다.

글꼴 선택

작은 크기에서도 읽히는 글꼴을 고르세요.

• 굵은 글꼴: 가늘거나 얇은 글꼴보다 잘 보입니다
• 산세리프: 작은 크기에서 대체로 더 읽기 쉽습니다
• 장식체나 필기체는 줄이면 읽기 어려우니 피하세요
• 실제 크기로 확인: 확정하기 전에 16×16 픽셀로 미리 보세요

색 대비

글자와 배경의 대비를 높게 유지하세요. 파비콘은 밝은 배경, 어두운 배경, 색 배경 등 여러 브라우저 배경 위에 올라갑니다. 비슷한 색은 작은 크기에서 섞여 보입니다.

단순함

장식을 줄이세요. 복잡한 디테일은 작은 크기에서 사라집니다. 브랜드나 사이트를 나타내는 분명한 요소 하나에 집중하세요.

형식 선택

필요한 크기

기기와 상황에 맞게 보이려면 여러 크기를 함께 제공하는 것이 좋습니다.

• 16×16 픽셀: 표준 브라우저 탭 크기
• 32×32 픽셀: 고해상도 화면과 일부 브라우저 환경
• 180×180 픽셀: iOS 홈 화면용 Apple Touch Icon
• 192×192 및 512×512 픽셀: Android 홈 화면 아이콘과 PWA

참고: 가장 큰 크기(512×512)에서 디자인한 뒤 줄이세요. 작은 그림을 키우면 품질이 떨어집니다.

브라우저 호환

Chrome, Firefox, Safari, Edge와 데스크톱, 모바일, 태블릿에서 테스트하세요. 브라우저마다 처리가 조금 달라, 두루 확인해야 모습이 일정합니다.

로고 전체를 그대로 쓰기

아주 단순한 경우가 아니면 회사 로고 전체를 넣지 마세요. 대부분 16×16에서 디테일이 너무 많아 알아볼 수 없습니다. 단순화한 버전, 이니셜, 브랜드의 핵심 상징을 쓰세요.

대비가 약한 디자인

요소 사이 대비가 낮으면 작은 크기에서 보이지 않습니다. 브라우저 테마와 배경이 달라도 보이도록 대비를 확보하세요.

파일 위치가 틀림

파일은 보통 public 또는 static에 두고, HTML link 태그가 그 경로를 가리키는지 확인하세요.

크기가 부족함

한 크기만 있으면 호환이 좁아집니다. 16×16, 32×32, 180×180, 192×192, 512×512를 함께 두는 것이 좋습니다.

테스트하지 않음

배포 전에 여러 브라우저와 기기에서 확인하세요. 한곳에서는 괜찮아도 다른 곳에서는 깨질 수 있습니다. 개발자 도구로 파비콘이 로드되는지도 확인하세요.