대부분의 눈에 띄는 favicon은 단 두 글자입니다. 지금 브라우저 탭을 보세요 — HN, GH, MDN, AWS. 모노그램 favicon은 16x16 픽셀 그리드에서도 살아남습니다. 전체 로고가 노이즈로 뭉개질 때도 글자 형태는 읽을 수 있기 때문입니다.
이 가이드는 모든 탭, 모든 기기, 다크 모드에서도 선명하게 보이는 이니셜 favicon을 만드는 방법을 단계별로 안내합니다.
이니셜이 favicon으로 효과적인 이유
이니셜은 브랜드 정체성을 가능한 가장 작은 시각 단위로 압축합니다. 16x16에서 두 글자는 여전히 또렷하게 읽히지만, 세밀한 로고는 알아볼 수 없게 됩니다. 디자인 시스템이 없는 MVP, 사이드 프로젝트, 내부 도구라면 이니셜 기반 favicon이 전문적인 탭 존재감을 얻는 가장 빠른 길입니다.
또한 전체 로고를 favicon으로 업로드하는 흔한 실수를 피할 수 있습니다. 전체 로고는 축소 과정에서 거의 살아남지 못합니다.
준비물
- 프로젝트나 브랜드를 나타내는 1~3글자
- 고대비 색상 조합 (글자용 하나, 배경용 하나)
- 전체 아이콘 패키지를 생성할 Mzu favicondl
단계별: 이니셜 favicon 만들기
1. 글자 형태 고르기
한 글자가 가장 빠릅니다. 두 글자는 더 또렷하게 읽힙니다. 세 글자는 16x16 픽셀이 복잡해지기 전의 실질적인 한계입니다. 작은 크기에서 시각적으로 비슷한 모양(예: 'Il' 또는 'rn')은 피하세요. 서로 뭉쳐 노이즈가 됩니다.
2. 타이포그래피 접근 방식 선택하기
두 가지 길이 있습니다: 네이티브로 렌더링되는 시스템 폰트 스택을 쓰거나, 직접 디자인한 커스텀 글자 형태를 쓰는 것입니다. 대부분의 프로젝트에는 굵은 산세리프(Inter, SF Pro, Helvetica)가 잘 맞습니다. 두꺼운 획이 얇은 세리프보다 축소해도 더 잘 살아남기 때문입니다.
3. HTML과 CSS로 모노그램 프로토타이핑하기
모노그램을 가장 빠르게 프로토타이핑하는 방법은 HTML 요소에 CSS를 적용한 뒤 SVG로 스크린샷하는 것입니다:
<div style='width:64px;height:64px;background:#0a0a0a;color:#fff;display:grid;place-items:center;font:700 32px/1 system-ui;border-radius:12px;'>HN</div>브라우저에서 렌더링한 뒤 스크린샷을 찍고, Mzu favicondl에서 시작점으로 사용하세요.
4. 전체 favicon 패키지 생성하기
Mzu favicondl을 열고 모노그램을 업로드한 뒤 전체 스택을 내보내세요: 최신 브라우저용 SVG, PNG 대체본, 레거시 데스크톱용 ICO, iOS용 Apple Touch Icon. 이 도구는 필요한 모든 크기를 자동으로 처리합니다.
5. 다크 모드 변형 추가하기
사용자가 다크 브라우저 크롬을 활성화하면 어두운 배경 위의 밝은 글자가 사라질 수 있습니다. 반전된 색상 조합을 만들고, HTML living standard의 rel=icon 명세에 정의된 대로 prefers-color-scheme 미디어 쿼리를 사용해 두 버전을 연결하세요:
<link rel='icon' href='/favicon.svg' type='image/svg+xml' media='(prefers-color-scheme: light)'>
<link rel='icon' href='/favicon-dark.svg' type='image/svg+xml' media='(prefers-color-scheme: dark)'>6. HTML을 <head>에 넣기
브라우저가 페이지의 나머지 부분을 파싱하기 전에 감지할 수 있도록, link 태그를 문서 <head> 안의 첫 번째 요소로 배치하세요.
흔한 함정
- 얇은 폰트: 2px 미만의 획은 16x16에서 사라집니다. 항상 굵기 600 이상을 선택하세요.
- 낮은 대비: 흰색 위의 밝은 회색은 브라우저 탭에서 보이지 않습니다. 최소 4.5:1 대비를 목표로 하세요.
- 과도한 패딩: 모노그램은 타이트한 바운딩 박스가 필요합니다. 30%가 아니라 10~15%의 패딩을 남기세요.
- 다크 모드 잊기: 라이트 모드 favicon은 어두운 브라우저 크롬에서 보이지 않을 수 있습니다. 처음부터 다크 모드 아이콘을 설정하세요.
마무리
이니셜로 만든 favicon은 어떤 웹 프로젝트에도 할 수 있는 가장 저렴한 전문가적 선택입니다. 두 글자, 하나의 색상 조합, 그리고 Mzu favicondl로 5분이면 16x16 픽셀, 다크 모드, 모든 브라우저에서 살아남는 탭 아이콘을 얻을 수 있습니다.