파비콘 만들기 — 지금 실제로 필요한 파일만, ZIP 하나로
로고 이미지를 올리면 브라우저 탭용 favicon.ico와 PNG, 아이폰 홈 화면용 apple-touch-icon, 안드로이드용 아이콘과 site.webmanifest, head에 붙일 HTML 코드까지 한 번에 만들어 ZIP으로 내려받습니다.
예전 버전은 'Google TV', 'Chrome 웹 스토어', 'Opera 스피드 다이얼' 같은 이름을 붙인 PNG 10개를 만들고 한 파일씩 따로 내려받게 했습니다. 이 중 여러 개는 웹페이지의 파비콘을 읽지 않는 곳이었고, 파일이 10번 연달아 내려받아져 브라우저가 '여러 파일 다운로드'를 막기도 했습니다. 안드로이드 192·512px 아이콘은 만들면서도 안드로이드 크롬이 아이콘을 찾는 site.webmanifest가 없어 실제로는 쓰이지 않았습니다.
지금은 브라우저, 검색엔진, 휴대폰 홈 화면이 실제로 읽는 파일만 만들고 ZIP 하나로 묶습니다. 각 파일은 개별로도 내려받을 수 있습니다.
만들어지는 파일
| 파일 | 크기 | 쓰이는 곳 |
|---|---|---|
| favicon.ico | 16·32·48px | 모든 브라우저. 코드가 없어도 사이트 루트의 /favicon.ico를 찾습니다 |
| favicon-16x16.png, favicon-32x32.png | 16·32px | 브라우저 탭 (고해상도 화면은 32px) |
| favicon-96x96.png | 96px | 검색 결과 등 더 큰 표시. 구글은 48×48px보다 큰 정사각형을 권장 |
| apple-touch-icon.png | 180px | 아이폰·아이패드 홈 화면에 추가했을 때 |
| android-chrome-192x192.png, -512x512.png | 192·512px | 안드로이드 홈 화면과 설치형 웹앱 시작 화면 |
| site.webmanifest | — | 안드로이드 아이콘 두 개를 알려 주는 파일 |
투명 배경과 아이폰 아이콘
탭에 보이는 파비콘은 투명 배경이 자연스럽지만, 아이폰 홈 화면은 투명한 부분을 검은색으로 채웁니다. 그래서 투명 배경을 켜 두어도 apple-touch-icon.png만은 선택한 배경색(기본 흰색)으로 채워 저장합니다. 미리보기의 '아이폰' 칸은 홈 화면처럼 모서리를 둥글게 잘라 보여 줍니다.
크게 줄일 때는 고품질 축소를 씁니다. 로고를 16px로 줄이면 원래 크기의 수십 분의 일이 되는데, 브라우저 기본 설정으로 줄이면 가는 선이 끊기고 얼룩이 생깁니다. 16px·32px 미리보기는 실제 픽셀을 그대로 키워서 보여 주므로, 탭에서 알아볼 수 있는지 확인하기 좋습니다.
사이트에 적용하는 방법
- 1
ZIP 풀기
favicon.ico, PNG, site.webmanifest를 사이트 루트 폴더(도메인 바로 아래 주소로 열리는 곳)에 올립니다.
- 2
HTML 붙여넣기
화면의 HTML 코드를 모든 페이지의 head 안에 붙여넣습니다. ZIP의 head.html에도 같은 코드가 들어 있습니다.
- 3
Next.js라면
App Router에서는 app 폴더에 favicon.ico, icon.png, apple-icon.png 이름으로 넣으면 태그가 자동으로 만들어집니다. 이때는 HTML을 붙이지 않아도 됩니다.
- 4
확인
브라우저는 파비콘을 오래 캐시합니다. 바뀐 아이콘이 안 보이면 시크릿 창에서 열어 보세요. 검색 결과의 아이콘은 검색엔진이 다시 수집한 뒤에 바뀝니다.
작은 크기에서도 알아보는 파비콘
- •로고 전체보다 첫 글자나 심볼 하나만 쓰는 편이 16px에서 훨씬 잘 보입니다.
- •가는 선과 작은 글자는 16px에서 사라집니다. 굵은 도형과 대비가 큰 색을 쓰세요.
- •밝은 탭과 어두운 탭에서 모두 보이는지 확인하세요. 투명 배경에 검은 로고는 다크 모드에서 안 보일 수 있어 여백과 배경색을 넣는 것도 방법입니다.
- •원본은 짧은 변 512px 이상이 좋습니다. 더 작으면 512px 아이콘이 확대되어 흐려진다고 알려 드립니다.
자주 묻는 질문
.ico 파일이 아직도 필요한가요?
네. 모든 브라우저와 여러 서비스가 코드와 상관없이 /favicon.ico를 먼저 찾기 때문에, PNG가 있어도 함께 두는 것이 안전합니다.
직사각형 로고는 어떻게 하나요?
정사각형으로 잘라 쓰며, 미리보기 상자를 끌어 쓸 부분을 고를 수 있습니다. 로고가 잘리면 여백 슬라이더로 크기를 줄이세요.
이미지가 업로드되나요?
아니요. 모든 파일은 브라우저 안에서 만들어집니다.