파비콘이란?

파비콘은 "favorite icon"의 줄임말로, 사이트나 페이지를 나타내는 작은 아이콘입니다. 브라우저와 기기 여러 곳에 나타나며, 가장 흔한 위치는 탭의 페이지 제목 옆입니다. 북마크, 방문 기록, 홈 화면에 바로가기로 저장했을 때의 아이콘으로도 쓰입니다.

보통 정사각형이며 16x16, 32x32, 48x48 픽셀이 흔합니다. 요즘은 고해상도 화면과 모바일을 위해 512x512까지 쓰는 경우도 많습니다.

파비콘은 여러 위치에 나타나 사이트를 알아보고 찾아가는 데 도움이 됩니다.

• 브라우저 탭: 가장 눈에 띄는 위치입니다. 브라우저 탭에서 페이지 제목 옆에 표시됩니다
• 북마크: 북마크 목록에서 이름 옆에 표시됩니다
• 방문 기록: 브라우저 방문 기록 메뉴에 나타납니다
• 주소 표시줄: 일부 브라우저는 주소 표시줄에도 파비콘을 보여 줍니다
• 모바일 홈 화면: 홈 화면에 사이트를 추가하면 앱 아이콘처럼 쓰입니다
• 검색 결과: 일부 검색 엔진은 검색 결과 옆에 파비콘을 표시합니다

예시: 브라우저 탭과 북마크에 표시된 파비콘

파비콘은 사이트 브랜드와 사용 경험에서 작지만 분명한 역할을 합니다.

최신 사이트는 브라우저와 기기를 두루 맞추려면 여러 형식과 크기를 함께 제공하는 편이 좋습니다.

파비콘 크기 예시

16×16

32×32

48×48

96×96

예시: 같은 파비콘을 여러 크기로 본 모습

파비콘을 만들 때 아래 원칙을 염두에 두세요.

• 단순함: 크기가 작아서 단순한 디자인이 잘 보입니다. 작은 크기에서 사라지는 세밀한 디테일은 피하세요
• 높은 대비: 브라우저 배경이 달라도 보이도록 대비가 충분한 색을 쓰세요
• 브랜드 일관성: 브랜드와 맞고, 전체 디자인과 한 세트로 알아볼 수 있어야 합니다
• 확장성: 16x16부터 512x512까지 여러 크기에서 무너지지 않게 만드세요
• 테스트: 여러 브라우저와 기기에서 제대로 보이는지 확인하세요

좋은 예: 단순하고 대비가 뚜렷한 파비콘

피할 것: 지나치게 복잡하거나 대비가 약한 디자인

요즘은 도구만 있으면 파비콘을 만들기 쉽습니다. 처음부터 그리든 기존 디자인을 쓰든, 아래처럼 할 수 있습니다.

파비콘은 작지만 사이트 정체성의 일부입니다. 사이트를 알아보게 하고, 브랜드를 강화하며, 탐색 경험도 나아집니다. 여러 형식과 크기를 함께 두면 브라우저와 기기에서 빠지거나 깨져 보이지 않습니다.

온라인 생성기를 쓰든, 기존 이미지에서 변환하든, 처음부터 그리든, 제대로 갖추는 일은 전문성과 사용 경험에 대한 투자입니다.