16px에서도 알아보이는 파비콘 디자인 요령

공들여 만든 로고를 파비콘으로 줄였더니 탭에서는 회색 얼룩처럼 보이는 경험, 흔합니다. 파비콘은 세상에서 가장 작은 간판이라, 큰 화면의 디자인 감각과는 다른 규칙이 적용됩니다. 핵심은 하나입니다. 덜어낼수록 잘 보인다.

최종 업데이트: 2026년 7월

1. 파비콘은 로고 축소판이 아니다

로고에는 보통 심볼, 회사명, 슬로건까지 들어 있습니다. 이걸 16px로 줄이면 글자는 점이 되고 선은 서로 붙어 버립니다. 잘 만든 사이트들은 파비콘에 로고 전체가 아니라 심볼 한 조각만 씁니다.

16px는 가로세로 16칸의 모눈입니다. 그 안에서 살아남는 것은 굵고 단순한 형태뿐입니다.

빠른 판별법: 지금 로고를 눈을 가늘게 뜨고 봤을 때 무엇인지 말할 수 있나요? 말할 수 없다면 16px에서도 못 알아봅니다.

심볼이 없다면 이니셜이 가장 실용적인 답입니다. 네이버의 N, 카카오의 말풍선처럼 글자 하나가 곧 브랜드가 됩니다.

1글자가 기본, 많아야 2글자: 3글자부터는 각 글자가 너무 작아집니다.
굵은 획: 같은 글자라도 굵게(Bold 이상) 쓰는 쪽이 작은 크기에서 훨씬 잘 버팁니다.
한글도 좋습니다: "가", "북", "밥"처럼 받침 있는 글자도 굵은 고딕이면 잘 읽힙니다. 획이 많은 글자(예: "뷁")는 피하세요.
명조·손글씨체는 신중히: 가는 부분이 있는 글꼴은 커 보일 땐 우아하지만 16px에서는 획이 끊겨 보일 수 있습니다. 미리보기로 확인하고 결정하세요.

형태가 아무리 좋아도 색 대비가 약하면 탭에서 흐릿한 점이 됩니다.

배경색 + 흰 심볼 조합이 가장 안전합니다. 브랜드색을 배경에 깔고 심볼·글자를 흰색으로 올리면 어떤 탭에서도 또렷합니다.
색은 두 가지면 충분: 배경 하나, 전경 하나. 세 가지가 넘어가면 작은 크기에서 섞여 보입니다.
투명 배경은 양날의 검: 깔끔해 보이지만, 어두운 심볼은 다크 모드 탭에서, 밝은 심볼은 라이트 탭에서 사라집니다. 투명하게 갈 거라면 라이트·다크 양쪽 탭에서 꼭 확인하세요.
회색 계열 단독은 위험: 탭 바탕색과 섞여 존재감이 없어집니다.

가장자리 여백 6~10%: 내용이 가장자리에 딱 붙으면 답답하고, 원형·둥근 모양으로 잘릴 때 내용이 함께 잘립니다. 숨 쉴 틈을 조금 주세요.
둥근 사각이 무난: 요즘 앱 아이콘 문법과 같아서 익숙하게 보입니다. 원형은 개성 있지만 모서리 공간을 잃으니 내용을 더 단순하게.
여백을 너무 주면 역효과: 15%를 넘기면 그만큼 심볼이 작아져 가독성이 떨어집니다.

디자인 도구의 확대 화면에서 예쁜 것과 실제 탭에서 잘 보이는 것은 완전히 다른 문제입니다. 내보내기 전에 반드시 16px 실제 크기로 확인하세요. 점검 목록은 세 줄입니다.

파비콘 생성기의 미리보기가 정확히 이 세 가지를 보여 줍니다. 라이트·다크 브라우저 탭 목업과 16·32·48px 실제 크기를 한 화면에서 확인할 수 있습니다.

글자·이모지·이미지로 만들고 탭 목업에서 바로 검증까지. 배경색, 모양, 여백도 실시간으로 조절할 수 있습니다.

개인 블로그·사이드 프로젝트라면 좋은 선택입니다. 이미 단순하고 색 대비가 좋아서 작은 크기에 강합니다. 다만 기기마다 이모지 모양이 조금씩 다르고, 회사·브랜드 사이트에는 가벼워 보일 수 있습니다.

권하지 않습니다. 사진은 16px에서 무엇인지 알아볼 수 없는 색 뭉치가 됩니다. 꼭 써야 한다면 피사체가 화면을 꽉 채운 근접 사진을 고르고, 실제 크기 미리보기로 확인하세요.

SVG 파비콘에 CSS를 넣으면 가능하지만 지원 브라우저가 제한적입니다. 현실적인 답은 양쪽 모두에서 보이는 디자인 하나를 만드는 것입니다. 배경색을 깔면 이 고민이 사라집니다.