파비콘은 이미지 하나가 아닙니다. 브라우저 탭의 작은 아이콘이면서, 사이트를 홈 화면에 추가할 때 폰이 쓰는 더 큰 아이콘이고, PWA 매니페스트와 앱 전환기가 기대하는 더욱 큰 아이콘입니다. 각 맥락이 원하는 크기가 다르고, 하나라도 어긋나면 티가 납니다. 16픽셀 아이콘을 홈 화면 타일에 늘려 놓으면 방문자가 알아챌 만큼 망가져 보입니다.
이 생성기는 이미지 하나로 전체 세트를 만듭니다. 원본을 정사각형으로 중앙 크롭하고, 브라우저 기본 필터가 아니라 pica 리샘플러로 각 크기로 축소한 뒤(16픽셀에서는 이 차이가 결정적입니다. 단순 축소는 로고를 얼룩으로 만들죠), 진짜 다중 해상도 .ico 파일과 함께 ZIP으로 묶습니다.
아이콘은 브라우저에서 생성됩니다. 공개 전 로고와 브랜드 자산이 아이콘 서비스로 업로드되지 않습니다.
<head>에 복사해 넣으세요.| 파일 | 크기 | 사용처 |
|---|---|---|
| favicon.ico | 16, 32, 48 통합 | 브라우저 탭, 즐겨찾기, 구형 지원 |
| favicon-16x16.png | 16 × 16 | 일반 밀도 화면의 탭 아이콘 |
| favicon-32x32.png | 32 × 32 | 고밀도 화면의 탭 아이콘 |
| favicon-48x48.png | 48 × 48 | 윈도우 사이트 바로가기 |
| apple-touch-icon.png | 180 × 180 | iOS 홈 화면 |
| icon-512.png | 512 × 512 | 안드로이드 홈 화면, PWA 매니페스트, 앱 전환기 |
.ico는 이름만 바꾼 PNG가 아니라 16·32·48픽셀 버전을 담은 진짜 다중 해상도 컨테이너입니다. 윈도우와 구형 브라우저가 그리는 맥락에 맞는 크기를 알아서 고릅니다.
ZIP을 사이트 루트에 풀고 모든 페이지의 <head>에 다음을 추가하세요.
| 용도 | 태그 |
|---|---|
| 기본 파비콘 | <link rel='icon' href='/favicon.ico' sizes='any'> |
| 일반 밀도 | <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'> |
| 고밀도 | <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> |
| iOS 홈 화면 | <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'> |
512픽셀 아이콘은 link 태그가 아니라 웹 앱 매니페스트에서 참조합니다.
파비콘은 대개 16픽셀 정사각형으로 표시되는데, 본문 글자 한 자 정도 크기입니다. 워드마크 전체는 그 크기에서 판독 불가능하고, 디테일이 많은 일러스트는 노이즈가 됩니다.
통하는 것은 글자 하나, 단순한 모노그램, 또는 밝고 어두운 탭 배경 양쪽에서 대비가 강한 굵은 도형 하나입니다. 로고를 16픽셀로 줄여 팔 길이만큼 떨어져서 보세요. 무엇인지 알 수 없다면 다른 사람도 알 수 없습니다.
최소 512 × 512이고 가능하면 정사각형이 좋습니다. 원본이 정사각형으로 중앙 크롭되므로 가로로 긴 로고는 양끝이 잘립니다. 그게 문제라면 정사각형 만들기 도구로 먼저 여백을 채우세요.
네. 16, 32, 48픽셀 이미지를 담은 진짜 다중 해상도 ICO 컨테이너이며 확장자만 바꾼 PNG가 아닙니다. 윈도우와 구형 브라우저가 정상적으로 읽습니다.
웹사이트 루트 디렉터리에 두어 /favicon.ico 같은 경로로 접근되게 하세요. 그런 다음 위의 link 태그를 페이지에 추가합니다.
브라우저가 파비콘을 매우 적극적으로 캐시하기 때문입니다. 강력 새로고침을 하거나, 아이콘 파일 URL을 직접 열어 제대로 서빙되는지 확인한 뒤 페이지를 새로고침하세요.
PNG 파일은 알파 채널을 유지합니다. 다만 투명한 아이콘은 밝은 탭 배경과 어두운 탭 배경 양쪽에서 통해야 한다는 점을 염두에 두세요.
아니요. 크롭, 축소, ICO 조립이 모두 브라우저 안에서 이뤄집니다.