웹사이트 파비콘 만드는 방법
파비콘은 브라우저 탭의 작은 아이콘 — 탭이 열릴 때 눈이 가는 시각적 북마크입니다. 만드는 방법은 간단합니다: 우표 크기에서도 읽히게 마크를 단순화하고, 표준 크기(보통 하나의 `.ico`에 묶음)를 내보내고, HTML 태그를 연결하고, iOS 홈 화면 바로가기를 신경 쓰면 더 큰 PNG도 추가합니다. 아래 단계 후 파비콘 생성기로 바이너리를 손으로 편집하지 않고 크기를 묶을 수 있습니다.
1. 간판이 아니라 16×16용으로 디자인
탭 크기에서는 가는 선, 작은 글자, 복잡한 그라데이션이 뭉개집니다. 굵은 실루엣과 한두 가지 색이 풀 워드마크 미니판보다 축소에 잘 견딥니다.
정사각형부터 시작. 가로로 긴 로고는 먼저 가운데 정사각형으로 자르기 — 아니면 생성기가 전체를 줄여 마크가 점처럼 보입니다.
벡터 SVG 또는 최소 256×256 PNG 마스터(512×512가 더 좋음)를 유지. 흐린 썸네일에서 키우지 말고 이 소스에서 다운샘플링합니다.
2. 다중 크기 ICO(또는 PNG 세트) 내보내기
고전 `favicon.ico`는 16×16, 32×32, 48×48 레이어를 한 파일에 담아 데스크톱 탭·북마크가 가장 가까운 크기를 고릅니다.
PNG, SVG, JPG를 파비콘 생성기에 업로드, 크기 묶음 선택 후 다운로드 — 수동 hex 편집 불필요.
많은 팀이 32×32, 180×180 단독 PNG도 배포합니다. PWA에는 web app manifest에 명시적 아이콘 항목도 필요합니다.
3. 파일 배치와 HTML 추가
`favicon.ico`를 사이트 루트에 두거나 프레임워크 관례를 따르세요 — Next.js, Astro 등은 `public/` 아래를 기대합니다.
최소 태그: `<link rel="icon" href="/favicon.ico" sizes="any">`. PNG 변형도 있으면 `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">` 등.
iOS 「홈 화면에 추가」용 180×180 PNG: `<link rel="apple-touch-icon" href="/apple-touch-icon.png">`.
4. 배포 후 확인
강력 새로고침 또는 시크릿 창 — 파비콘은 캐시가 강해 일반 새로고침은 어제 아이콘이 남을 수 있습니다.
휴대폰에서 홈 화면에 추가해 apple-touch-icon이 여백 없이 선명한지 확인.
리브랜딩? ICO, PNG, manifest 아이콘을 함께 교체. 구·신 자산 혼재는 같은 사이트에 두 마크가 남는 원인입니다.
오후를 낭비하는 함정
512px PNG를 작은 크기를 넣지 않고 `favicon.ico`로 이름만 바꾸기 — 일부 환경에서 확대가 나빠 탭 아이콘이 흐릿합니다.
SVG만 파비콘은 지원이 늘지만 일부 사내 인트라넷에서는 조용히 실패 — ICO+PNG가 여전히 안정적 기본.
완전 투명 아이콘은 Windows 밝은 탭 배경에서 깨져 보일 수 있음 — 마크 뒤 단색 브랜드 사각형이 더 읽기 쉽습니다.
파비콘 FAQ
- ICO 파일 하나면 충분한가요?
- 데스크톱·모바일 브라우저 탭에는 보통 충분합니다. PWA나 iOS 홈 화면 타일을 신경 쓰면 PNG 크기와 manifest 항목도 추가하세요.
- SVG만 파비콘으로 쓸 수 있나요?
- 최신 브라우저에서는 늘고 있지만 ICO·PNG 조합이 엣지 케이스를 커버 — SVG는 보조로 좋고 항상 유일 자산은 아닙니다.
- 파일을 바꿨는데 탭은 예전 아이콘
- 캐시. 시크릿, 파일 이름 변경, href에 버전 쿼리를 붙여 새 자산이 붙을 때까지.
- 파비콘이 헤더 로고와 같나요?
- 브랜드 색은 공유하는 경우가 많지만 파비콘은 단순화된 마크여야 합니다. 헤더 로고는 탭 아이콘에 담을 수 없는 슬로건·세부를 가질 수 있습니다.
- 실제로 필요한 크기는?
- ICO 안 16, 32, 48이 대부분 탭 커버; 180×180은 apple-touch-icon; PWA manifest가 요구하면 192, 512 추가.