Glyph WidgetsGlyph Widgets
도구소개연락처블로그개인정보약관광고 제거Ko-fi에서 후원하기

© 2026 Glyph Widgets LLC. 모든 권리 보유.

·

100% 클라이언트 측 처리

블로그로 돌아가기

Favicon Generator: ICO & PNG 생성

모든 이미지에서 9가지 표준 파비콘 크기 생성: 16×16~512×512, Apple Touch, Android Chrome. 미리보기와 다운로드.

Glyph Widgets
2026년 2월 27일
읽기 19분
파비콘 생성기파비콘 만들기웹사이트 아이콘ICO 생성기favicon maker

Favicon Generator란?

Favicon Generator는 모든 이미지를 현대 브라우저, 운영 체제, 모바일 플랫폼에 필요한 9가지 표준 파비콘 크기로 변환하는 무료 브라우저 기반 도구입니다. 새 웹사이트에 파비콘을 설정하려면 정확한 픽셀 치수의 특정 PNG 파일 세트를 생성해야 합니다 — 브라우저 탭용 16×16, Apple Touch 아이콘용 180×180, Android Chrome용 192×192와 512×512 — 그리고 여러 중간 크기도 필요합니다. 이를 수동으로 하려면 이미지 편집기에서 9번 크기를 조정해야 합니다. 이 도구는 한 번의 클릭으로 9가지 모두를 생성하고, 각 크기의 레이블이 붙은 미리보기를 표시하며, 개별적으로 또는 한꺼번에 다운로드할 수 있습니다. 모든 처리는 Canvas API를 사용하여 브라우저에서 실행됩니다 — 이미지가 기기 밖으로 나가지 않습니다.

주요 기능

  • 여러 파비콘 크기 생성 — FAVICON_SIZES 배열에 정의된 모든 9가지 크기를 생성합니다: 16, 32, 48, 64, 96, 128, 180, 192, 512픽셀 정방형. 각각 원본 이미지를 대상 치수의 canvas에 그려서 렌더링됩니다.
  • ICO, PNG, WebP 형식 생성 — 생성된 모든 파비콘은 PNG입니다(canvas.toDataURL('image/png') 경유). 개별 파일 이름은 웹 표준을 따릅니다: favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png 등.
  • Apple Touch Icon 지원 — 180×180px 출력은 apple-touch-icon.png으로 명명됩니다. 이는 사용자가 사이트를 홈 화면에 추가할 때 iOS Safari가 찾는 파일 이름입니다.
  • Android Chrome Icon 지원 — 192×192px 출력은 android-chrome-192x192.png, 512×512px 출력은 android-chrome-512x512.png로 명명됩니다. 표준 manifest.json Web App Manifest에 지정된 이름과 일치합니다.
  • 생성된 모든 크기 미리보기 — 생성 후 그리드에 투명도 그리드 배경 위의 레이블이 붙은 미리보기 이미지, 파일 이름, 정확한 픽셀 치수, 사용 사례 설명(예: "브라우저 탭 아이콘", "Apple Touch Icon", "Chrome Web Store 아이콘")과 함께 각 크기가 표시됩니다.
  • 개별 또는 ZIP 다운로드 — 각 크기마다 자체 다운로드 버튼이 있습니다. "모두 다운로드" 버튼은 생성된 모든 파일 — 9개 PNG 파비콘, favicon.ico(16, 32, 48px 크기 포함), site.webmanifest — 을 단일 favicons.zip 아카이브로 패키징합니다.
  • 자동 favicon.ico 생성 — PNG-in-ICO 기법을 사용하여 16, 32, 48px PNG를 내장한 올바른 ICO 컨테이너 파일을 빌드합니다. <link rel="icon" type="image/x-icon" href="/favicon.ico">로 배포 준비가 됩니다.
  • site.webmanifest 생성 — 192와 512px Android Chrome 아이콘을 참조하는 바로 사용 가능한 Web App Manifest 파일이 모두 다운로드 ZIP 아카이브에 포함됩니다.
  • 100% 클라이언트 사이드 처리 — canvas 크기 조정 작업은 완전히 브라우저에서 실행됩니다. 소스 이미지는 FileReader를 사용하여 읽히며 서버로 전송되지 않습니다.
  • 모든 이미지 형식과 호환 — 파일 입력이 image/*를 수락하고, <img> 요소가 파일을 디코딩합니다. JPEG, PNG, SVG, WebP, GIF, AVIF 모두 소스 이미지로 작동합니다.

Favicon Generator 사용 방법

1단계: 소스 이미지 업로드

업로드 드롭 존을 클릭하거나 이미지를 그 위로 드래그합니다. 최상의 결과를 위해 정방형 이미지를 사용하세요 — 도구는 ctx.drawImage(originalImage, 0, 0, size, size)를 사용하여 각 파비콘 canvas를 채우도록 이미지를 확대/축소하므로, 정방형이 아닌 입력은 늘어납니다. 투명한 배경의 512×512px 이상 정방형 PNG가 이상적인 소스입니다. 이미지가 로드되면 원본 치수를 보여주는 미리보기(예: 512 x 512px)가 나타납니다.

2단계: 모든 크기 생성

"파비콘 생성"을 클릭합니다. 도구는 9가지 크기를 순서대로 처리합니다: 각 크기에 대해 숨겨진 canvas를 해당 치수로 설정하고, 지우고, canvas를 채우도록 이미지를 스케일링하여 그리고, 결과 데이터 URL을 저장합니다. 루프가 완료되면 성공 토스트가 모든 크기가 생성되었음을 확인합니다.

3단계: 결과 미리보기

9개의 생성된 파비콘이 나란히 표시된 그리드가 나타납니다. 각 항목에는 다음이 표시됩니다:

  • 투명도 그리드 배경에 렌더링된 미리보기 이미지(512×512 같은 더 큰 출력에서도 미리보기는 64×64px로 제한됩니다)
  • 파일 이름(예: android-chrome-512x512.png)
  • 정확한 픽셀 치수(예: 512x512px)
  • 사용 위치 설명(예: Android Chrome 스플래시)

다운로드 전에 16×16과 같은 작은 크기에서 아이콘이 올바르게 보이는지 시각적으로 확인할 수 있습니다.

4단계: 개별 파일 또는 모두 ZIP으로 다운로드

특정 파일을 저장하려면 개별 파비콘 옆의 다운로드 버튼을 클릭합니다. favicon.ico를 별도로 다운로드할 수도 있습니다 — 단일 ICO 컨테이너에 16, 32, 48px 크기가 포함되어 있습니다. 모두 한꺼번에 다운로드하려면 생성된 파비콘 카드 헤더에서 "모두 다운로드"를 클릭합니다. 이렇게 하면 9개 PNG 파일, favicon.ico, site.webmanifest 파일이 포함된 favicons.zip 아카이브가 생성됩니다.

5단계: 웹사이트에 파비콘 추가

다운로드한 PNG 파일을 프로젝트의 public 루트 디렉토리에 배치합니다. HTML <head>에 다음 태그를 추가합니다:

<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" sizes="180x180" href="/apple-touch-icon.png">

Android Chrome PWA 지원을 위해 manifest.json에서 192×192와 512×512 파일을 참조합니다:

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

실용적인 예제

새 웹사이트 설정

시나리오: Next.js로 구축한 개인 포트폴리오 사이트를 출시하고 로고 SVG에서 모든 표준 파비콘 크기가 필요합니다.

입력: 로고의 512×512px 정방형 PNG 내보내기(투명한 배경).

도구가 생성하는 것: 9개 PNG 파일: favicon-16x16.png부터 android-chrome-512x512.png까지, 브라우저와 모바일 플랫폼이 기대하는 이름과 크기로 모두 명명 및 조정됩니다.

왜 유용한가: 파비콘을 수동으로 설정하려면 9번의 별도 내보내기 작업이 필요합니다. 여기서 한 번의 클릭으로 그 전체 단계를 대체합니다.

Chrome Web Store 아이콘

시나리오: Chrome 확장 프로그램을 제출하고 Chrome Web Store 등록 가이드라인에 따라 128×128px 아이콘이 필요합니다.

입력: 모든 크기의 확장 프로그램 아이콘 아트워크.

도구가 생성하는 것: "Chrome Web Store 아이콘"으로 레이블이 붙은 favicon-128x128.png — Chrome Web Store가 요구하는 정확한 파일입니다.

왜 유용한가: 128×128px 크기는 많은 파비콘 생성기가 건너뛰는 특정 요구 사항입니다. 이 도구는 올바른 표준 파일 이름과 함께 포함합니다.

웹 앱을 위한 PWA 설정

시나리오: React 앱에 Progressive Web App (PWA) 지원을 추가하고 manifest 아이콘이 필요합니다.

입력: 512×512px 앱 아이콘 PNG.

도구가 생성하는 것: android-chrome-192x192.png(192×192px)와 android-chrome-512x512.png(512×512px) — Android Chrome용 Web App Manifest 사양에 지정된 두 가지 크기.

왜 유용한가: Android Chrome은 홈 화면 아이콘 표시와 스플래시 화면에 두 가지 크기가 모두 필요합니다. 표준 파일 이름으로 미리 명명되어 있어 구성 오류를 방지합니다.

팁과 모범 사례

512×512px 이상의 정방형 이미지로 시작하세요. 도구는 ctx.drawImage를 사용하여 입력을 각 대상 크기로 축소합니다. 더 큰 정방형 이미지로 시작하면 각 스케일에서 더 많은 세부 정보를 사용할 수 있어 16×16 같은 작은 크기에서 아티팩트가 줄어듭니다.

형태가 있는 로고 아이콘에는 투명 PNG를 사용하세요. 로고가 비직사각형 형태(원, 방패, 사용자 지정 외곽선)인 경우 투명한 배경의 PNG를 제공합니다. 투명한 영역은 각 파비콘에 이어져 브라우저 탭과 iOS 홈 화면에서 올바르게 표시됩니다.

다운로드 전에 16×16에서 미리보기를 확인하세요. 그리드는 각 크기를 디스플레이 스케일로 표시합니다. 16×16 미리보기가 가장 중요한 경우가 많습니다 — 로고 텍스트가 16px에서 읽을 수 없다면 가장 작은 크기용으로 더 단순한 마크 전용 버전을 고려하세요.

"모두 다운로드" 기능은 ZIP 아카이브를 생성합니다. 생성된 모든 파일 — 9개 PNG 파비콘, favicon.ico, site.webmanifest — 이 단일 favicons.zip 파일로 패키징됩니다. 이렇게 하면 브라우저 다운로드 제한을 피하고 모든 파일을 하나의 아카이브에 정리할 수 있습니다.

JPEG 입력은 작동하지만 투명한 영역은 검게 됩니다. 소스 이미지가 투명도 없는 JPEG인 경우 출력 파비콘도 같은 배경을 갖습니다. 투명한 배경이 필요한 아이콘에는 PNG 소스를 제공하세요.

브라우저의 다운로드 동작을 확인하세요. 일부 브라우저는 "모두 다운로드"가 실행될 때 각 파일에 대해 개별적으로 확인을 요청합니다. 9개의 다운로드 프롬프트가 표시되면 각각을 수락하세요. 자동 다운로드가 활성화된 Chrome에서는 모든 9개 파일이 프롬프트 없이 다운로드 폴더에 저장됩니다.

일반적인 문제와 문제 해결

업로드 시 "로드 오류" 토스트. 브라우저가 업로드된 파일을 이미지로 디코딩할 수 없을 때 img.onerror 핸들러에서 발생합니다. 유효한 이미지 파일(JPEG, PNG, WebP, SVG 등)을 업로드하고 있는지 확인하세요. 손상된 파일이나 잘못된 확장자를 가진 파일은 이 오류를 유발합니다.

생성된 파비콘이 16×16에서 흐릿하게 보입니다. 도구는 쌍선형 보간(브라우저 기본값)을 사용하여 전체 소스 이미지를 16×16 픽셀로 축소하여 그립니다. 소스가 세부적인 일러스트레이션이거나 텍스트를 포함하는 경우 16×16 결과는 흐릿할 것입니다. 이는 복잡한 아트워크를 작은 크기로 스케일링하는 근본적인 한계입니다 — 16×16과 32×32 대상을 위한 단순화된 마크를 디자인하세요.

"모두 다운로드"가 시작되지 않습니다. 모두 다운로드 기능은 JavaScript를 사용하여 ZIP 아카이브를 생성합니다. 다운로드가 트리거되지 않으면 사이트에 팝업과 다운로드가 허용되어 있는지 확인하세요. 각각의 다운로드 버튼을 사용하여 개별 파일을 하나씩 다운로드할 수도 있습니다.

배포 후 브라우저에서 파비콘이 업데이트되지 않습니다. 브라우저 파비콘 캐싱은 적극적입니다. 새 파비콘을 배포한 후 탭을 강제 새로 고침하거나(Ctrl+Shift+R 또는 Mac에서 Cmd+Shift+R) 브라우저 캐시를 지우세요. 캐시 버스팅 쿼리 문자열로 파비콘 파일 이름을 변경하는 것도(예: href="/favicon-32x32.png?v=2") 강제 새로 고침을 유발합니다.

그리드의 512×512 미리보기 이미지는 64px로 제한됩니다. 그리드 미리보기는 그리드를 컴팩트하게 유지하기 위해 Math.min(size, 64) 픽셀로 표시를 제한합니다. 다운로드된 파일은 올바른 전체 512×512px PNG입니다 — 작은 표시 크기는 미리보기 전용입니다.

개인 정보 및 보안

Favicon Generator는 완전히 브라우저에서 실행됩니다. 소스 이미지는 FileReader.readAsDataURL을 사용하여 JavaScript Image 객체에 로드된 다음 숨겨진 canvas 요소에 그려집니다. 외부 서버로 이미지 데이터가 전송되지 않습니다. 9개의 출력 파비콘은 모두 canvas.toDataURL('image/png')에서 로컬로 생성됩니다. 독점 로고, 미공개 브랜딩, 기밀 시각 자산에 안전합니다. 페이지가 로드되면 도구는 완전히 오프라인으로 작동합니다.

자주 묻는 질문

Favicon Generator는 무료인가요?

네, 완전히 무료입니다. 계정이 필요 없고, 출력에 워터마크가 추가되지 않으며, 파비콘을 생성할 수 있는 횟수에 제한이 없습니다. 처리에 사용되는 Canvas API는 서버 사이드 비용이 없습니다.

Favicon Generator는 오프라인으로 작동하나요?

네. 페이지가 로드된 후 모든 처리는 브라우저 기본 Canvas API와 FileReader를 사용합니다. 이미지 로딩, 파비콘 생성 또는 다운로드 중에 네트워크 호출이 이루어지지 않습니다. 인터넷 연결 없이 작동합니다.

Favicon Generator에서 내 데이터는 안전한가요?

네. 이미지는 FileReader를 통해 브라우저 메모리에 읽혀지고 canvas 요소에 그려집니다. 이미지 데이터가 브라우저를 떠나지 않습니다. 미공개 로고, 기밀 브랜드 자산 및 독점 아이콘에 안전합니다.

도구는 어떤 크기를 생성하나요?

도구는 9가지 크기를 생성합니다: 16×16, 32×32, 48×48, 64×64, 96×96, 128×128, 180×180, 192×192, 512×512 픽셀. 각각 사용 사례에 대한 표준 파일 이름으로 PNG로 저장됩니다.

각 크기의 표준 파일 이름은 무엇인가요?

파일 이름은 웹 표준에 따릅니다: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-64x64.png, favicon-96x96.png, favicon-128x128.png, apple-touch-icon.png(180×180), android-chrome-192x192.png, android-chrome-512x512.png.

도구는 .ico 파일을 생성하나요?

네. 도구는 ICO 컨테이너 내에 PNG로 16, 32, 48px 크기를 내장한 favicon.ico 파일을 자동으로 생성합니다. <link rel="icon" type="image/x-icon" href="/favicon.ico">로 배포 준비가 됩니다. ICO 파일은 개별적으로 다운로드하거나 "모두 다운로드" ZIP 아카이브에 포함됩니다.

96×96 크기는 무엇에 사용되나요?

96×96 favicon-96x96.png는 도구의 설명 배열에서 "Google TV 아이콘"으로 레이블이 붙어 있습니다. 역사적으로 Google TV 앱 아이콘에 사용되었으며 완전한 파비콘 패키지에 포함됩니다.

SVG를 소스 이미지로 사용할 수 있나요?

네. 파일 입력이 image/*를 수락하고 현대 브라우저는 <img> 요소를 사용하여 SVG를 디코딩할 수 있습니다. SVG는 canvas에 그려질 때 브라우저에 의해 래스터화됩니다. 출력은 래스터화된 PNG가 됩니다 — 벡터 SVG 파비콘이 아닙니다 — 이는 대부분의 사용 사례에 적합합니다.

소스 이미지에 투명한 배경을 사용해야 하나요?

네, 아이콘에 형태가 있는 외곽선이 있는 경우. 투명한 배경은 PNG 출력에 이어집니다. iOS 홈 화면에 배치된 아이콘(apple-touch-icon.png)의 경우 iOS가 자동으로 둥근 모서리를 추가하므로 투명한 배경이 올바르게 보입니다. 브라우저 탭 파비콘의 경우 브라우저의 탭 배경이 투명한 영역을 통해 표시됩니다.

"모두 다운로드" 버튼은 정확히 무엇을 하나요?

생성된 모든 파일을 단일 favicons.zip 아카이브로 패키징합니다: 9개 PNG 파비콘, favicon.ico(16, 32, 48px 크기 포함), site.webmanifest 파일. ZIP은 브라우저에서 생성되고 하나의 파일로 다운로드됩니다.

관련 도구

  • 곧 출시 예정: SVG를 PNG로 — Favicon Generator에 입력하기 전에 SVG 로고를 고해상도 PNG로 변환합니다.
  • 곧 출시 예정: 이미지 리사이저 — 가장 깔끔한 출력을 위해 파비콘을 생성하기 전에 소스 아트워크를 512×512px 정방형으로 크기를 조정합니다.
  • 곧 출시 예정: 자리 표시자 생성기 — 최종 브랜드 자산이 납품될 때까지 기다리는 동안 자리 표시자 이미지를 생성합니다.
  • 곧 출시 예정: 이미지 변환기 — 배포에 필요한 경우 생성된 PNG 파비콘을 WebP 또는 다른 형식으로 변환합니다.

지금 Favicon Generator를 사용해 보세요: 곧 출시 예정: Glyph Widgets Favicon Generator

마지막 업데이트: 2026년 2월 27일

계속 읽기

더 많은 글Favicon Generator 사용해 보기