1. 간판이 아니라 16×16에서 읽히게
탭 크기에서는 가는 선·작은 글자·복잡한 그라데이션이 뭉개집니다. 색은 한두 가지, 실루엣은 굵을수록 긴 워드마크 축소판보다 잘 보입니다.
먼저 정사각형으로 만드세요. 가로로 긴 로고는 가운데를 정사각으로 자르기부터. 그렇지 않으면 생성기가 전체를 줄여 마크가 점처럼 보입니다.
원본은 벡터 SVG, 또는 최소 256×256(가능하면 512×512) PNG를 남겨 두세요. 흐린 썸네일을 키우지 말고 이 원본에서 줄이세요.
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의 밝은 탭 배경에서 형태가 잘 안 보일 수 있습니다. 마크 뒤에 브랜드색 사각형을 두면 읽기 쉽습니다.
지금 ICO 만들기
정사각 로고를 올리고 [[favicon-generator|파비콘 생성기]]에서 여러 크기 파비콘을 받은 뒤, 위의 HTML 태그를 붙여 넣으세요.
파비콘 생성기 열기