파비콘은 더 이상 이미지 하나가 아닙니다. 브라우저, 폰, 운영체제가 저마다 다른 슬롯 — 브라우저 탭, 북마크, iOS 홈 화면, Android 앱 전환기 — 에 다른 크기를 가져갑니다. 32×32 PNG 하나만 내보내면 탭에서는 작동하지만 누군가 사이트를 폰에 저장할 때 흐릿해 보입니다. 전체 세트를 내보내면 모든 표면이 선명한 아이콘을 얻습니다.
정확히 어떤 크기가 필요한지, 각각이 무엇을 하는지, 그리고 왜 목록이 이런 모습인지 소개합니다.
중요한 크기들
대부분의 사이트는 여섯 개의 PNG 크기와 레거시 .ico 하나로 커버됩니다. 참조표입니다.
| 크기 | 형식 | 쓰이는 곳 |
|---|---|---|
| 16×16 | PNG (.ico 안) | 브라우저 탭, 주소창, 북마크 |
| 32×32 | PNG (.ico 안) | 레티나 탭, Windows 작업 표시줄 바로가기 |
| 48×48 | PNG | Windows 사이트 아이콘, 일부 Android 표면 |
| 180×180 | PNG | iOS 홈 화면 (apple-touch-icon) |
| 192×192 | PNG | Android 홈 화면, PWA 설치 |
| 512×512 | PNG | PWA 스플래시 화면, 앱 스토어, 고DPI |
favicon.ico 파일은 작은 크기(보통 16과 32, 때로 48)를 묶는 컨테이너입니다. 오래된 브라우저와 Windows는 사이트 루트에서 이름으로 그것을 찾으므로, 현대 브라우저가 기꺼이 PNG를 쓰더라도 여전히 내보낼 가치가 있습니다.
왜 이렇게 많나? 빠른 둘러보기
목록이 긴 이유는 아이콘이 극도로 다른 물리적 크기로 나타나기 때문입니다.
16과 32 는 일상적인 탭 아이콘입니다. 16이 고전적인 크기고, 32는 16이 흐릿해 보일 고DPI("레티나") 화면을 커버합니다. 브라우저가 픽셀 밀도에 맞는 것을 고릅니다.
48 은 Windows 것입니다 — 사이트 바로가기에 쓰이고 32가 잘 커버하지 못하는 몇 곳에서 더 선명하게 나타납니다.
180 은 Apple의 apple-touch-icon입니다. iPhone이나 iPad에서 "홈 화면에 추가"를 누르면 iOS가 이것을 씁니다. 잘못하면 iOS가 축소된 스크린샷을 잡거나 밋밋한 글자 타일을 보여줍니다 — 어느 것도 여러분 브랜드처럼 보이지 않죠.
192와 512 는 Progressive Web App 크기로, manifest.webmanifest 파일에 선언됩니다. 192는 Android 홈 화면 아이콘이고, 512는 스플래시 화면에 쓰이며 OS가 필요로 하는 다른 것을 위해 축소됩니다. 사이트가 설치 가능하다면 이 둘은 타협 불가입니다.
512보다 큰 게 필요한가?
아니요. 512×512가 웹 파비콘의 현실적 상한입니다 — webmanifest 사양과 모든 주요 플랫폼이 그 근처에서 최대치입니다. 소스 아트가 1024 이상이면 시작 이미지로는 괜찮지만(축소할 디테일이 더 많음), 1024 파비콘을 내보내지는 않습니다. 512 위의 것은 아무도 안 쓰는 바이트만 더합니다.
올라가는 방향에서 중요한 규칙 하나: 크고 정사각형인 소스에서 시작하세요. 512×512나 1024×1024 원본은 그 아래 모든 크기로 깔끔하게 축소됩니다. 작은 이미지에서 시작하면 유지할 디테일이 애초에 부족해 작은 크기가 탁해 보입니다.
16×16에서 살아남도록 디자인하기
가장 어려운 크기는 가장 작은 것입니다. 16×16에서 세밀한 로고는 읽을 수 없는 얼룩이 됩니다. 사이트를 가로질러 통하는 팁 몇 가지입니다.
- 단순화하세요. 완전한 워드마크는 16px에서 안 읽힙니다. 글자 하나, 모노그램, 또는 마크에서 가장 알아보기 쉬운 부분을 쓰세요.
- 대비를 높게 유지하세요 — 밝은 탭과 어두운 탭 배경 모두에서 모양이 읽히도록.
- 약간의 여백을 두세요 — 네 가장자리에 모두 닿는 아이콘은 탭에서 답답해 보입니다.
- 작게 테스트하세요. 브라우저를 축소하거나 실제 탭을 보세요. 한눈에 뭔지 알 수 없으면 더 단순화하세요.
전체 세트 생성하기
이것들을 손으로 만들지 않습니다. 정사각형 이미지 하나를 파비콘 생성기에 넣으면 전체 세트를 한 번에 만듭니다 — favicon.ico, 16/32/48/180/192/512 PNG, 바로 쓸 수 있는 webmanifest, 그리고 붙여넣을 정확한 HTML <head> 스니펫까지요. 모든 것이 여러분 브라우저에서 실행됩니다. 이미지는 절대 업로드되지 않고, 첫 방문 이후 도구가 오프라인에서 작동합니다.
결국 얻게 될 HTML
참고로, 완전한 파비콘 설정은 여러분의 <head>에서 대략 이렇게 생겼습니다.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
생성기가 이것을 대신 써 주므로 바로 붙여넣을 수 있습니다. 여섯 크기에 .ico와 매니페스트까지 커버하면, 모든 브라우저·폰·OS가 요청하는 선명한 아이콘을 얻습니다.