01
가장 크고 정사각형에 가까운 원본으로 시작하기
SVG나 512px 이상의 정사각형 PNG가 가장 선명합니다. 정사각형이 아닌 이미지는 자르지 않고 가운데에 두며, 512px보다 작은 래스터 이미지는 실제 크기와 함께 경고합니다. 512px Android 아이콘이 확대본이 되기 때문입니다.
- 스크린샷이나 복사한 이미지는 Ctrl/Cmd+V로 바로 붙여 넣을 수 있습니다.
- .ico를 넣으면 그 안에서 가장 큰 이미지가 원본이 됩니다.
이미지 · SVG · 아이콘
파비콘 생성기이미지 한 장으로 모든 크기
로고나 기존 .ico를 넣고 16px 탭 미리보기를 확인한 뒤 패키지를 통째로 내려받으세요.
파비콘 생성기
원본 이미지
PNG, JPG, WebP, GIF, SVG, ICO 파일을 여기에 끌어다 놓거나 클립보드 이미지를 붙여 넣으세요.
이미지는 이 브라우저 탭 안에서만 읽고 크기를 조정하며, 업로드하지 않습니다.
패키지 미리보기
이미지를 선택하거나 끌어다 놓거나 붙여 넣으면 시작합니다.
이미지를 선택하거나 끌어다 놓거나 붙여 넣으면 시작합니다.
새 사이트 오픈, 로고 교체, Lighthouse 경고는 결국 같은 작업으로 이어집니다. 로고는 한 장인데 크기가 다른 아이콘 여섯 개와 그 파일을 가리키는 link 태그가 필요하죠. 이 파비콘 생성기는 원본 한 장에서 지금 필요한 파일 세트를 한꺼번에 만들어 주므로, 이미지 편집기에서 같은 그림을 여러 번 줄일 필요가 없습니다.
반대 방향으로도 쓸 수 있습니다. 넘겨받은 사이트의 favicon.ico를 끌어다 놓으면 안에 저장된 크기를 모두 보여 주고, 하나씩 PNG로 저장하게 해 주며, 가장 큰 이미지로 빠져 있는 Apple·Android 아이콘까지 채워 줍니다.
이 파비콘 생성기를 쓰는 이유
지금 브라우저와 휴대폰이 실제로 요청하는 파일만 만들고, 더는 쓰지 않는 크기는 넣지 않습니다.
원본 한 장으로 현재 필요한 세트 전체
여러 크기가 든 favicon.ico, 16px·32px PNG, 180px apple-touch-icon, 192px·512px Android 아이콘, site.webmanifest가 모두 같은 이미지에서 나옵니다. HTML 태그는 입력한 실제 경로로 만들어지므로 /static/ 아래에 둔 사이트도 여섯 군데를 손으로 고칠 필요가 없습니다.
ICO를 열어 실제 내용 확인
기존 favicon.ico를 끌어다 놓으면 안에 든 이미지마다 실제 크기, 비트 깊이, PNG인지 BMP인지, 바이트 수를 보여 줍니다. 하나씩 PNG로 저장하거나 한꺼번에 ZIP으로 받을 수 있어, ICO 변환을 위해 다른 사이트를 찾을 필요가 없습니다.
iPhone 홈 화면에 검은 배경이 생기지 않음
iOS는 투명한 터치 아이콘을 검은색 위에 그립니다. 그래서 apple-touch-icon은 항상 배경색으로 채우고, 모서리는 iOS가 직접 둥글게 자르도록 네모 그대로 둡니다. 브라우저용 아이콘은 투명도를 유지합니다.
아이콘 품질을 가르는 세 가지
02
큰 미리보기보다 16px 탭으로 판단하기
값을 바꿀 때마다 약 300ms 뒤 자동으로 다시 생성합니다. 밝은 탭·어두운 탭 두 가지 모형과 4배 확대 화면을 보세요. 가는 선과 작은 글자는 16px에서 거의 사라집니다. 가로로 긴 로고는 여백을 조금 주면 알아보기 쉽고, 둥글기는 브라우저용과 Android용에만 적용됩니다.
- '자동 생성'을 끄면 수동 모드가 되고 Ctrl/Cmd+Enter로 생성합니다.
- 256px 바탕 화면 바로가기 아이콘이 필요 없다면 ICO는 16·32·48이면 충분합니다.
03
HTML을 복사하기 전에 경로부터 정하기
사이트 경로는 모든 link 태그와 manifest 아이콘 src에 들어갑니다. 파일을 /assets/icons/에 둔다면 먼저 그 경로를 입력하고, ZIP을 내려받은 다음 HTML을 페이지의 head에 붙여 넣으세요.
- 앱 이름을 비워 두면 manifest에 빈 문자열을 쓰지 않고 항목 자체를 뺍니다.
- 지우기나 이미지 교체 후에는 '실행 취소'로 이전 상태를 한 번 되돌릴 수 있습니다.
패키지 구성과 확인 방법
현재 필요한 파일을 평평한 ZIP으로
favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest가 들어가고, 원본이 SVG면 favicon.svg가 추가됩니다. 모든 파일이 ZIP 최상위에 있어 첫 페이지 옆에 바로 복사하면 됩니다.
ICO 크기 직접 선택
16, 24, 32, 48, 64, 128, 256px를 자유롭게 조합할 수 있고, 안쪽은 현재 모든 브라우저와 Windows가 읽는 PNG 데이터로 저장합니다. 파비콘 만들기뿐 아니라 PNG ICO 변환 도구로도 쓸 수 있습니다.
파비콘 사이즈를 숫자로 확인
원본 형식은 확장자가 아니라 파일 내용으로 판별하고, 경고에는 실제 너비와 높이를 적어 줍니다. SVG는 손실 없이 확대되므로 '너무 작다'는 경고를 받지 않습니다.
HTML 태그와 manifest가 서로 맞음
link 태그, theme-color meta, manifest 아이콘 목록이 같은 경로와 색상으로 만들어지므로, HTML이 ZIP에 없는 파일을 가리키는 일이 없습니다.
만들지 않는 것과 그 이유
- URL 가져오기나 운영 중인 사이트 점검은 하지 않음
- 네트워크 요청을 전혀 보내지 않으므로 기존 사이트의 아이콘을 가져오거나 이미 배포된 사이트를 점검할 수 없습니다. 파일을 먼저 저장한 뒤 넣어 주세요.
- 지원이 끝난 플랫폼용 파일은 만들지 않음
- Windows 타일 이미지와 browserconfig.xml, Safari mask-icon, 57~152px 구형 Apple 크기는 만들지 않습니다. 현재의 Edge, Safari, iOS는 이 패키지의 파일을 사용합니다.
- 마스커블 Android 아이콘은 아직 없음
- manifest 아이콘에는 purpose를 적지 않습니다. Android는 가장자리 약 5분의 1을 잘라 내므로 마스커블 아이콘에는 안전 영역 미리보기가 필요하고, 잘못된 표시는 표시하지 않는 것보다 나쁩니다.
- 맞춰 넣을 뿐 자르지 않음
- 원본은 여백을 둔 정사각형 안에 들어가도록 축소해 가운데에 둡니다. 자르기 상자는 없으니 대상이 한쪽에 치우쳐 있다면 먼저 잘라 주세요.
- SVG는 복사만 하고 다시 그리지 않음
- favicon.svg는 원본 파일 그대로입니다. 여백, 둥글기, 배경은 PNG와 ICO에만 적용되며 다크 모드 버전을 자동으로 만들지도 않습니다.
- 만드는 ICO는 PNG 기반
- 구형 BMP나 256색 ICO 이미지는 읽고 추출할 수 있지만, 새로 만드는 ICO에는 항상 PNG 데이터가 들어갑니다. 움직이는 GIF는 첫 프레임만 사용합니다.
- 입력 한도
- 원본 파일은 20MB, 한 변 8192px까지, ICO 파일은 10MB, 내장 이미지 64개까지입니다. 앱 이름은 60자까지 입력할 수 있습니다.
파비콘 생성기 자주 묻는 질문
파비콘 사이즈는 몇 px로 만들어야 하나요?
지금 브라우저와 휴대폰 기준으로는 16·32·48px가 든 favicon.ico, 16px·32px PNG, 180px apple-touch-icon, site.webmanifest에 적는 192px·512px 아이콘이면 됩니다. 이 파비콘 생성기가 ZIP에 넣는 구성이 바로 이것입니다.
파비콘이 적용이 안 될 때는 어떻게 하나요?
브라우저가 파비콘을 오래 캐시하므로 먼저 강력 새로고침이나 시크릿 창으로 확인하세요. 그다음 각 link 태그의 href가 실제 파일 위치와 같은지 확인합니다. 도구에서 경로를 먼저 입력하고 HTML을 복사하면 어긋나지 않습니다.
ICO 파일 용량을 줄이려면 어떻게 하나요?
ICO에 넣는 크기 수를 줄이는 것이 가장 효과적입니다. 기본값 16·32·48은 보통 몇 KB 수준이고, 128이나 256을 추가하면 크게 늘어납니다. 기존 ICO를 넣으면 크기별 바이트 수를 확인할 수 있습니다.
SVG 파비콘은 어떤 브라우저에서 지원되나요?
최신 Chrome, Edge, Firefox는 SVG 파비콘을 지원하지만, 지원하지 않는 환경도 있어 ICO와 PNG를 함께 두는 편이 안전합니다. 원본이 SVG면 favicon.svg와 해당 link 태그를 ICO·PNG와 함께 넣어 줍니다.
apple touch icon 크기는 얼마인가요?
180×180px 하나면 됩니다. 구형 기기에서는 iOS가 알아서 줄여 씁니다. iOS가 직접 모서리를 둥글게 처리하므로 투명도와 둥근 모서리 없이 만듭니다.
무료로 파비콘을 만들 수 있나요?
네. 가입이나 워터마크 없이 무료로 쓸 수 있고, 이미지가 서버로 전송되지 않으므로 공개 전 로고도 안심하고 넣을 수 있습니다.
필요한 크기나 플랫폼이 빠졌나요?