CodeKitHub이 도구는 무엇인가요?
favicon.ico는 그냥 작은 그림 파일이 아닙니다. 여러 크기의 아이콘을 한 파일 안에 담을 수 있는 컨테이너 포맷이라서, 브라우저나 작업표시줄, 북마크바가 표시되는 위치에 맞는 가장 선명한 해상도를 알아서 골라 쓸 수 있습니다. PNG 파일 이름만 favicon.ico로 바꾼다고 이런 효과가 나지는 않습니다 — 확장자만 다른 단일 이미지일 뿐이고, 일부 브라우저는 눈감아주지만 원시 바이트를 그대로 읽는 도구, 크롤러, 오래된 브라우저는 진짜 ICO 컨테이너 구조를 기대하기 때문에 오류가 나거나 빈 아이콘으로 대체됩니다.
이 도구는 실제 ICO 컨테이너를 만듭니다. SVG를 16×16, 32×32, 48×48로 각각 렌더링하고 내부적으로 PNG로 인코딩한 뒤, Windows Vista 이후 모든 브라우저와 OS가 지원해온 PNG-in-ICO 방식으로 세 크기를 하나의 유효한 favicon.ico에 담습니다. 이와 함께 180×180 PNG(누군가 사이트를 홈 화면에 추가할 때 iOS가 쓰는 크기)와 192×192 / 512×512 PNG(안드로이드와 PWA 설치 프롬프트가 웹 앱 매니페스트에서 가져오는 크기)도 별도 파일로 받게 됩니다.
왜 사용해야 할까요?
- 이름만 바꾼 PNG가 아니라 진짜 유효한 멀티 해상도 favicon.ico를 생성합니다.
- 실제 배포에 필요한 모든 아이콘 크기를 한 번에 커버합니다 — 16, 32, 180, 192, 512px.
- rel/sizes/type 속성을 고민할 필요 없이 <head>에 바로 붙여넣을 HTML을 제공합니다.
- 정사각형이 아닌 SVG는 늘리지 않고 투명한 정사각형 안에 가운데 정렬됩니다.
- 모든 처리가 브라우저에서 로컬로 이뤄지며 SVG는 업로드되지 않습니다.
사용 방법
- 박스를 클릭하거나 SVG 로고 파일을 끌어다 놓습니다.
- 설정할 것 없이 도구가 자동으로 모든 파비콘 크기로 렌더링합니다.
- 사이트 루트에 넣을 favicon.ico와 개별 PNG 아이콘들을 다운로드합니다.
- HTML 스니펫을 복사해서 페이지의 <head>에 붙여넣습니다.
예시
입력
logo.svg — 회사 로고, 3KB 벡터 파일결과
favicon.ico(16/32/48px 통합), favicon-16.png, favicon-32.png, apple-touch-icon.png(180px), icon-192.png, icon-512.pngSVG 하나를 넣으면 실제 배포에 필요한 아이콘 파일이 전부 나옵니다.
아이콘 크기별 용도
| 파일 | 크기 | 쓰이는 곳 |
|---|---|---|
| favicon.ico | 16/32/48px(통합) | 브라우저 탭, 북마크바, 작업표시줄 |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | PNG 파비콘을 선호하는 브라우저의 대체용 |
| apple-touch-icon.png | 180×180 | 사이트를 홈 화면에 추가할 때 쓰이는 iOS 홈 화면 아이콘 |
| icon-192.png | 192×192 | 안드로이드 홈 화면 아이콘, 웹 앱 매니페스트 |
| icon-512.png | 512×512 | PWA 설치 프롬프트, 안드로이드 스플래시 화면 아이콘 |
SVG 원본이 중요한 이유
SVG는 픽셀이 아니라 수식으로 도형을 저장하기 때문에, 16px로 렌더링하든 512px로 렌더링하든 똑같은 경로 데이터에서 새로 그려집니다. 그래서 큰 쪽에서는 확대로 인한 깨짐이 없고, 작은 쪽에서도 억지로 픽셀에 맞추느라 타협할 필요가 없습니다. 만약 PNG 로고밖에 없다면 이 도구로는 처리할 수 없습니다. 먼저 로고를 SVG로 다시 만들거나 변환해야 하는데, 작은 PNG를 512px로 늘리면 결국 흐릿한 결과만 나오기 때문입니다.
→ SVG 변환기
자주 묻는 질문
그냥 PNG 이름만 favicon.ico로 바꾸면 안 되나요?
.ico 파일은 자체 바이너리 컨테이너 포맷을 가지고 있습니다(몇 개의 이미지를 담고 있는지 설명하는 ICONDIR 헤더와, 이미지마다 하나씩 붙는 디렉터리 항목으로 구성됩니다). 확장자만 .ico로 바꾼 PNG는 여전히 확장자가 틀린 PNG일 뿐입니다. 요즘 브라우저 대부분은 너그럽게 받아주지만, 이 도구는 실제로 세 가지 해상도를 담은 진짜 ICO 컨테이너를 만듭니다. 이게 원래 이 포맷이 설계된 목적이고, 더 엄격한 리더가 기대하는 방식입니다.
favicon.ico가 있는데 PNG 아이콘도 왜 필요한가요?
favicon.ico는 전통적인 브라우저 탭·북마크 용도만 커버합니다. 180×180 PNG는 사용자가 사이트를 홈 화면에 추가할 때 iOS가 쓰는 아이콘(apple-touch-icon)이고, 192×192 / 512×512 PNG는 안드로이드와 PWA 설치 프롬프트가 웹 앱 매니페스트에서 가져오는 크기입니다. 이게 없으면 폰 홈 화면의 아이콘이 일반 스크린샷이나 빈 사각형으로 대체됩니다.
제 로고가 정사각형이 아닌데 어떻게 처리되나요?
각 목표 크기에서 늘려서 채우는 게 아니라 투명한 정사각형 안에 가운데 정렬됩니다. 가로로 길거나 세로로 긴 로고도 원래 비율 그대로 유지되고 억지로 눌리거나 늘어나지 않습니다.
다운로드한 파일들은 어디에 두면 되나요?
favicon.ico, apple-touch-icon.png, icon-192.png, icon-512.png를 사이트 루트 폴더(index.html과 같은 위치)에 두고, 생성된 <link> 태그를 페이지의 <head>에 붙여넣으면 됩니다.
SVG가 어딘가로 업로드되나요?
아니요. SVG는 로컬 <canvas> 요소 위에 그려지고 ICO/PNG 파일도 브라우저 안에서 조합됩니다. 서버로 전송되는 건 없습니다.