파비콘 생성기
이미지 한 장을 올리면 favicon.ico, 기본 PNG 여섯 종과 마스커블 512 아이콘, head 태그, 매니페스트가 하나의 ZIP으로 준비됩니다.
- 브라우저에서 처리
- 가입 없음
- 무료
도구 작업 공간
예제
원본 이미지
정사각형 맞춤
HTML 태그와 매니페스트에 쓰입니다. 예: / 또는 /assets/icons/
설치 코드
<link rel="icon" href="/favicon.ico" sizes="32x32">
<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#1746d1">모든 크기는 브라우저 안에서 줄입니다. ICO에는 16, 32, 48px PNG 이미지가 들어갑니다.
실제 모습
내 앱밝은 브라우저 탭
내 앱어두운 브라우저 탭
파일
파비콘 생성기는 원본 이미지 한 장으로 요즘 사이트에 필요한 세트를 한 번에 만듭니다. 16·32·48px 이미지가 담긴 favicon.ico, 정사각형 PNG 여섯 개(16, 32, 48, 180, 192, 512px), 별도의 마스커블 512 PNG, 페이지 head에 붙일 <link> 태그, site.webmanifest 코드입니다. SVG 원본이면 원본 그대로인 favicon.svg와 전용 태그도 추가됩니다.
로고를 PNG, JPEG, WebP, GIF, SVG로 가진 사이트 운영자와 개발자가 아무것도 설치하지 않고 표준 아이콘 파일을 만들 때 쓰는 도구입니다. 정사각형이 아닌 이미지를 어떻게 맞출지, 앱 이름, 테마 색과 배경 색, 파일을 올릴 폴더를 정하면 코드가 바로 갱신됩니다. 미리보기에서는 밝은 탭과 어두운 탭에서 실제 16px 크기로 아이콘이 어떻게 보이는지 확인할 수 있습니다.
크기 조절은 모두 브라우저 캔버스에서 절반씩 단계적으로 줄이며 이루어져 작은 크기도 또렷하고, 이미지는 업로드되지 않습니다. ICO도 도구가 직접 만듭니다. 작은 헤더 뒤에 PNG 이미지를 붙인 구조이며 현재의 모든 브라우저가 읽을 수 있습니다.
사용 방법
원본 이미지 선택
PNG, JPEG, WebP, GIF, SVG 파일을 끌어다 놓거나 선택하고, 또는 세 가지 예제로 시작하세요. 선명한 결과를 얻으려면 512×512px 이상의 정사각형 이미지를 쓰세요. 작은 원본을 키우면 흐려집니다.
정사각형에 맞추는 방식 고르기
꽉 채워 자르기는 이미지 가운데에서 정사각형을 잘라 냅니다. 여백 두고 전체 넣기는 그림 전체를 유지하고 남는 곳을 투명으로 채우므로 가장자리를 잃기 싫은 가로로 긴 로고에 알맞습니다.
이름, 색, 경로 정하기
앱 이름, 테마 색, 배경 색, 파일을 올릴 폴더(사이트 루트는
/)를 입력합니다. HTML 태그와 매니페스트가 그 값으로 다시 쓰입니다.작은 크기 확인
브라우저 탭 미리보기와 16px, 32px 썸네일을 살펴보세요. 가는 선, 작은 글자, 세밀한 무늬는 이 크기에서 사라집니다. 알아보기 어렵다면 굵은 심볼 하나로 단순화하세요.
내려받아 설치
ZIP 또는
favicon.ico같은 개별 파일을 내려받습니다. ZIP에는android-chrome-maskable-512x512.png가 들어가고 SVG 원본이면favicon.svg도 추가됩니다. 입력한 폴더에 파일을 올리고 HTML 태그를 모든 페이지 head에 붙여 넣은 뒤 매니페스트를 배포하세요.
작동 원리
파일별 용도
파비콘 크기가 하나로 정해져 있지는 않습니다. 화면마다 요구하는 크기가 다르기 때문입니다. 브라우저 탭은 16px와 32px를 쓰고 고해상도 화면에서는 더 큰 파일을 고릅니다. 구글 검색은 48px의 배수 크기 파비콘을 요구합니다. iOS Safari는 페이지를 홈 화면에 추가할 때 180px Apple touch icon을, 안드로이드와 Chrome은 사이트를 설치할 때 매니페스트에 적힌 192px와 512px 아이콘을 씁니다. HTML을 읽지 않고 /favicon.ico를 바로 요청하는 클라이언트와 크롤러가 많아서 favicon.ico도 여전히 필요합니다.
| 파일 | 크기 | 용도 |
|---|---|---|
favicon.ico | 16, 32, 48 | /favicon.ico를 직접 요청하는 구형 클라이언트와 크롤러 |
favicon-16x16.png | 16 x 16 | 브라우저 탭, 북마크 (기본 해상도) |
favicon-32x32.png | 32 x 32 | 고해상도 화면의 브라우저 탭 |
favicon-48x48.png | 48 x 48 | 검색 결과 파비콘(48px의 배수) |
apple-touch-icon.png | 180 x 180 | iOS 홈 화면 아이콘 |
android-chrome-192x192.png | 192 x 192 | 안드로이드 홈 화면, 매니페스트 아이콘 |
android-chrome-512x512.png | 512 x 512 | PWA 설치와 스플래시, 매니페스트 아이콘 |
android-chrome-maskable-512x512.png | 512 x 512 | 안드로이드 적응형 아이콘, 그림은 아이콘 한 변의 40%가 반지름인 중앙 원(지름 80%) 안에 배치 |
도구가 써 주는 태그와 매니페스트
생성되는 head 태그는 ICO와 작은 PNG 둘, Apple touch icon, 매니페스트를 연결하고 모바일 브라우저 상단의 테마 색을 지정합니다. SVG 원본이면 image/svg+xml 링크도 추가됩니다. 매니페스트의 id는 /이고, purpose가 any인 192·512 PNG와 purpose가 maskable인 마스커블 512 PNG까지 아이콘 세 개가 들어갑니다.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#1746d1">ICO 파일의 구조
ICO 파일은 6바이트 헤더(예약 0, 종류 1, 이미지 수) 뒤에 이미지마다 16바이트 디렉터리 항목(너비, 높이, 색 깊이, 데이터 크기, 위치)이 이어지고 그다음에 이미지 데이터가 옵니다. Windows Vista부터 이미지 데이터로 완전한 PNG를 쓸 수 있어서 이 도구는 16·32·48px PNG를 비트맵으로 바꾸지 않고 그대로 담습니다. 이미지가 세 개면 헤더는 6 + 3 x 16 = 54바이트이고 그 뒤에 PNG 세 개가 붙습니다.
맞춤 방식은 각 정사각형에 무엇이 들어갈지 정합니다. 꽉 채워 자르기는 짧은 변을 정사각형 크기로 삼으므로 1200 x 800 이미지는 왼쪽에서 200px 안쪽부터 800 x 800으로 잘립니다. 여백 두고 전체 넣기는 긴 변을 아이콘 크기에 맞춰 줄인 그림을 투명한 정사각형 가운데에 놓습니다.
실제 예시
입력
원본: logo.png, 경로 /출력
favicon.ico
favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
android-chrome-maskable-512x512.png
site.webmanifest이름이 고정이라 생성된 태그를 고치지 않고 그대로 쓸 수 있습니다.
입력
원본 1200 x 800px출력
정사각형 크롭: 800 x 800
오프셋: x = 200, y = 0왼쪽과 오른쪽 바깥 200px는 사라집니다. 보존하려면 여백 두고 전체 넣기로 바꾸세요.
입력
원본 1200 x 800px, 512px 아이콘출력
512 x 341로 줄여 512 x 512 투명 정사각형 가운데에 배치
위아래 여백: 각각 약 85px잘리는 부분은 없지만 정사각형 안에서 로고가 작아집니다.
입력
경로: assets/icons출력
<link rel="icon" href="/assets/icons/favicon.ico" sizes="32x32">
<link rel="manifest" href="/assets/icons/site.webmanifest">앞이나 뒤의 슬래시가 빠져 있으면 자동으로 붙여 줍니다.
자주 하는 실수
16px에서는 디테일이 사라집니다
글자, 가는 선, 그라데이션은 16×16에서 뭉개집니다. 배경과 대비가 큰 굵은 도형이나 모노그램을 쓰고, 배포 전에 16px 썸네일을 확인하세요.
가로로 긴 로고는 끝이 잘립니다
가로로 긴 워드마크는 꽉 채워 자르기에서 양끝이 잘립니다. 여백 두고 전체 넣기를 쓰거나 정사각형 캔버스에 여백을 두고 배치한 뒤 생성하세요.
투명 배경은 플랫폼마다 다르게 보입니다
PNG, WebP, SVG 원본의 투명도는 일반 브라우저 아이콘에서 유지됩니다. iOS는 Apple touch icon의 투명 영역을 검정으로 그리므로, 이 도구는 180px 파일을 입력한 배경 색으로 채웁니다. 별도의 마스커블 512 파일은 배경색을 가장자리까지 채우고 정사각형 그림을 약 290 x 290px로 줄여 중앙의 안전 영역 원 안에 맞춥니다. 원의 반지름은 아이콘 한 변의 40%(지름 80%)입니다. 중요한 부분은 더 가운데에 두고 실제 마스크 모양으로 확인하세요.
브라우저는 파비콘을 끈질기게 캐시합니다
파일을 바꿔도 탭 아이콘이 며칠씩 그대로일 수 있습니다. 파일 이름을 바꾸거나
href에?v=2같은 버전 쿼리를 붙이고 강력 새로고침으로 확인하세요.태그는 파일을 올린 위치와 맞아야 합니다
경로를
/assets/icons/로 입력해 놓고 파일은 사이트 루트에 올리면 모든 아이콘이 404가 됩니다. 코드를 복사하기 전에 경로를 먼저 고치고, 아이콘 주소를 브라우저에서 열어 로드되는지 확인하세요.
자주 묻는 질문
파비콘은 어떤 크기가 필요한가요?
실용적인 세트는 16·32·48px가 들어 있는 favicon.ico, 브라우저와 검색용 16·32·48px PNG, iOS용 180px, 설치형 웹 앱용 192·512px, 안드로이드 적응형 모양용 마스커블 512 아이콘입니다. 이 도구는 이미지 한 장으로 이 세트를 만듭니다.
favicon.ico 파일도 만들어 주나요?
네. ICO에 16·32·48px 이미지가 PNG 데이터로 들어가며 현재의 모든 브라우저가 읽습니다. 단독으로 또는 ZIP 안에서 내려받을 수 있습니다.
어떤 이미지 형식을 올릴 수 있나요?
PNG, JPEG, WebP, GIF, SVG입니다. 움직이는 GIF는 첫 프레임을 씁니다. SVG는 큰 벡터 작업 이미지에서 각 래스터 크기로 그리며, 원본 그대로 favicon.svg에 복사해 SVG 링크 태그도 만듭니다.
파비콘이 왜 흐릿한가요?
원본이 512px보다 작아서 키워지고 있거나, 16px 렌더에서 버티지 못하는 세밀한 디테일이 있기 때문입니다. 단순하고 굵은 디자인의 고해상도 정사각형 이미지로 시작하세요.
Apple touch icon은 무엇을 하나요?
누군가 사이트를 iPhone이나 iPad 홈 화면에 추가하면 iOS는 180×180px apple-touch-icon 링크를 앱 아이콘으로 씁니다. 없으면 iOS가 페이지 스크린샷을 대신 사용합니다.
이미지가 서버로 업로드되나요?
아니요. 이미지는 브라우저 캔버스에서 줄어들고 ICO와 ZIP도 브라우저 안에서 만들어지며 어떤 것도 기기 밖으로 나가지 않습니다.
더 깊이 읽기
마지막 업데이트: