이미지 및 사진

파비콘 생성기

하나의 이미지를 드롭하여 현대 사이트에 필요한 모든 파비콘 크기를 얻으세요 — favicon.ico, 브라우저, Apple 및 Android용 PNG 크기, 붙여넣기 준비가 된 HTML 및 매니페스트 스니펫 포함.

Drop your logo or icon

or click to browse — PNG, JPG, WebP, or SVG up to 10 MB. A square 512×512+ source gives the cleanest result.

Private by design. Your source image is decoded and resized entirely in your browser using the Canvas API. The .ico is assembled in memory. Nothing is uploaded.

파비콘 생성기란 무엇인가요?

파비콘 생성기는 하나의 소스 이미지를 현대 웹사이트에 필요한 아이콘 파일 모음으로 변환합니다 — 브라우저가 자동으로 가져오는 레거시 .ico 파일, 탭과 북마크에 표시되는 작은 PNG 크기, iPhone 사용자가 홈 화면에 사이트를 추가할 때 사용하는 180픽셀 apple-touch-icon, 그리고 Android가 웹 매니페스트에서 가져오는 192/512픽셀 이미지입니다. 수동으로 수행하려면 이미지 편집기를 열고, 일곱 개의 개별 파일을 내보내고, HTML에 긴 <link> 태그 블록을 작성해야 합니다. 이 생성기는 브라우저 내에서 전체 파이프라인을 실행합니다: 이미지를 드롭하면 모든 크기를 얻고, 일치하는 HTML 및 매니페스트 스니펫을 복사합니다. 당신의 이미지는 페이지를 떠나지 않습니다.

파비콘 세트를 생성하는 방법

1
정사각형 소스에서 시작하기
정사각형이고 최소 512×512 픽셀인 PNG, JPG, WebP 또는 SVG를 업로드하세요. 비정사각형 소스는 정사각형 캔버스에 레터박스되어 로고가 잘리지 않지만, 소스가 이미 정사각형일 때 작은 세부 사항이 가장 선명하게 보입니다.
2
배경 선택하기
로고가 밝은 브라우저 크롬과 어두운 브라우저 크롬 모두에서 잘 보인다면 투명하게 두세요. 아이콘의 전경이 흰색 탭에 대해 사라질 수 있는 밝은 색이라면 단색으로 전환하세요 — 대부분의 기업 탭은 여전히 매우 밝습니다.
3
모든 크기 검토하기
16픽셀 및 32픽셀 미리보기를 주의 깊게 살펴보세요. 대부분의 로고는 그 크기에서 세부 사항을 잃습니다. 결과가 얼룩이라면 소스를 단순화하세요 — 색상을 줄이고, 두꺼운 선을 사용하고, 작은 글씨를 줄이세요 — 그리고 다시 업로드하세요.
4
번들 다운로드하기
모두 다운로드를 사용하여 favicon.ico와 여섯 개의 PNG 크기를 가져오세요. 이를 사이트의 루트에 배치하세요. .ico는 내부에 16, 32, 48 px PNG를 포함하고 있으며, 이는 현재 Chrome, Firefox 및 Edge가 기대하는 것입니다.
5
HTML 및 매니페스트 붙여넣기
HTML 스니펫을 모든 페이지의 <head>에 복사하세요. site.webmanifest 스니펫을 아이콘과 함께 저장하여 Android가 누군가 사이트를 추가할 때 올바른 홈 화면 이미지를 표시하도록 하세요.

파비콘 세트가 구축되는 방법

1. 브라우저의 기본 이미지 로더를 사용하여 업로드된 이미지를 디코딩합니다.
2. 각 대상 크기(16, 32, 48, 180, 192, 512)에 대해 정사각형 캔버스에 그립니다.
3. 소스를 레터박스하여 긴 쪽이 캔버스에 맞도록 합니다 — 절대 잘라내지 말고, 절대 늘리지 마세요.
4. canvas.toBlob('image/png')를 통해 캔버스를 PNG로 다시 인코딩합니다.
5. favicon.ico의 경우, 16/32/48 PNG를 ICONDIR + ICONDIRENTRY 구조로 조립합니다.
6. 16바이트 디렉토리 항목 뒤에 PNG 바이트를 연결합니다 — 이는 유효한 다중 해상도 .ico입니다.

현대 브라우저와 Apple 기기는 .ico 컨테이너 내에 포함된 PNG 바이트를 수용합니다 — 원래 Windows 95와 함께 제공된 구식 BMP-with-AND-mask 형식을 인코딩할 필요가 없습니다. 컨테이너는 단지 여섯 바이트 헤더(예약 + 유형 + 수), 포함된 각 이미지에 대한 16바이트 디렉토리 항목(크기 + 비트 깊이 + 오프셋 + 길이), 그리고 연결된 PNG 페이로드로 구성됩니다. 이것이 이 도구가 생성하는 것이며, Chrome, Firefox, Safari 및 Edge가 서버에서 /favicon.ico를 요청할 때 가져오는 것입니다.

참조: 위키백과 — ICO 파일 형식

작동하는 것과 작동하지 않는 것

소스 이미지	기대할 수 있는 것
굵은 정사각형 로고, 1024×1024 PNG, 투명 배경	모든 크기에서 선명합니다. 16픽셀 및 32픽셀 미리보기에서도 여전히 명확하게 읽힙니다. 프로덕션 사이트에 바로 드롭하세요. 이상적인 입력입니다.
넓은 수평 워드마크, 2000×400	정사각형 캔버스에 레터박스되어 상단과 하단에 빈 밴드가 있습니다. 워드마크는 192픽셀 및 512픽셀에서 여전히 읽을 수 있지만 16픽셀 및 32픽셀에서는 읽을 수 없습니다 — 텍스트가 너무 작습니다. 업로드하기 전에 정사각형 마크로 자르세요.
얇은 그라디언트 윤곽선이 있는 사진 로고	그라디언트와 윤곽선이 16픽셀 및 32픽셀에서 사라집니다. 아이콘 크기 자산을 위해 동일한 로고의 단순화된 고대비 버전을 사용하세요. 세부 손실은 소스 문제이며, 내보내기 문제는 아닙니다.
명시적인 너비 또는 높이가 없는 SVG	뷰박스에서 파생된 크기가 없는 SVG에 대해 브라우저가 할당하는 기본 300×150에서 렌더링됩니다. 업로드하기 전에 소스 SVG에 너비/높이 속성 또는 뷰박스를 추가하세요. SVG 엣지 케이스 — 소스를 수정하세요.

파비콘 생성기를 사용할 때

새 사이트나 제품 페이지를 시작하고 모든 파비콘 크기가 한 번에 필요할 때.
브랜드를 새롭게 하고 기존 사이트의 아이콘을 Photoshop을 열지 않고 교체할 때.
인식 가능한 탭 아이콘이 필요한 내부 도구, 대시보드 또는 관리 패널을 만들 때.
프레임워크가 특정 경로에서 파비콘을 기대하는 정적 문서 사이트(Docusaurus, Astro, Next.js)를 구축할 때.
사이트를 휴대폰의 홈 화면에 설치할 수 있도록 PWA 준비가 완료된 아이콘 세트를 생성합니다.
귀하가 제어하는 SaaS 서브도메인에서 공급자의 기본 파비콘을 교체합니다.
후보 로고가 16 px에서 어떻게 보이는지 빠르게 테스트한 후 결정합니다.

자주 묻는 질문

왜 이렇게 많은 크기가 있나요?

다양한 플랫폼에서 서로 다른 크기를 요청합니다. 브라우저는 /favicon.ico를 가져오며(여기에는 16, 32, 48 px가 포함됨) iOS는 사용자가 사이트를 홈 화면에 저장할 때 180 px의 apple-touch-icon을 사용합니다. Android는 홈 화면 및 스플래시 화면 아이콘을 위해 웹 매니페스트에서 192 및 512 px를 가져옵니다. 모든 크기를 제공하면 클라이언트가 흐릿한 업스케일된 작은 아이콘으로 돌아가는 것을 방지할 수 있습니다.

내 이미지가 어디에 업로드되나요?

아니요. 디코딩, 크기 조정 및 .ico 조립은 모두 Canvas API와 작은 인페이지 이진 작성기를 사용하여 브라우저에서 발생합니다. 서버로 전송되는 것은 없으며, 페이지 로드 후 업로드가 없음을 브라우저의 네트워크 탭에서 확인할 수 있습니다.

.ico가 2026년에도 여전히 존재하는 이유는 무엇인가요?

브라우저는 다른 아이콘이 선언되지 않았을 때 자동으로 /favicon.ico를 가져오므로 기본 대체 아이콘으로 남아 있습니다. 현대의 .ico 파일은 PNG 바이트를 포함하고 있으며(구식 BMP 형식이 아님), 하나의 요청으로 세 가지 크기를 커버하면서 대략 하나의 PNG와 같은 크기입니다.

투명한 배경과 단색 배경 중 어떤 것을 사용해야 하나요?

투명한 배경이 가장 좋습니다. 로고의 실루엣이 흰색 및 어두운 탭 모두에서 명확하게 읽힐 수 있습니다. 로고의 전경이 흰색 브라우저 탭에서 사라질 수 있는 경우 단색을 사용하세요. 대부분의 대형 브랜드는 이러한 이유로 단색(종종 브랜드 색상)을 사용합니다.

내 로고는 512 px에서 괜찮은데 16 px에서는 흐릿해요 — 왜 그런가요?

그것은 소스 디자인 문제이지 내보내기 문제는 아닙니다. 16 px에서는 전체 로고를 표현하기 위해 총 256픽셀이 필요합니다. 얇은 선, 그라디언트, 세밀한 글자 및 내부 세부 사항이 모두 축소됩니다. 많은 브랜드는 아이콘 사용을 위해 별도의 단순화된 마크를 제공하며, 보통 하나의 굵은 글자나 형태입니다.

이 파일들은 어디에 두어야 하나요?

favicon.ico와 모든 여섯 개의 PNG를 사이트의 루트에 배치하세요(그래야 /favicon.ico, /favicon-16x16.png 등에서 제공됩니다). 매니페스트는 같은 루트에 site.webmanifest로 저장하세요. 그런 다음 HTML 스니펫을 모든 페이지의 <head> 또는 공유 레이아웃/템플릿에 붙여넣으세요.

2026년에 모든 크기가 필요하나요?

엄밀히 말하면, 단일 고해상도 PNG로도 충분하지만 브라우저가 스케일링할 경우 16 px에서 결과가 눈에 띄게 부드럽습니다. 전체 세트는 총 7개의 작은 파일(일반적인 로고의 경우 30 KB 미만)로 구성되어 있으며 모든 장치에서 가장 선명한 결과를 제공합니다.

마지막 업데이트 2026-04-28

파비콘 생성기란 무엇인가요?

파비콘 세트를 생성하는 방법

정사각형 소스에서 시작하기

정사각형이고 최소 512×512 픽셀인 PNG, JPG, WebP 또는 SVG를 업로드하세요. 비정사각형 소스는 정사각형 캔버스에 레터박스되어 로고가 잘리지 않지만, 소스가 이미 정사각형일 때 작은 세부 사항이 가장 선명하게 보입니다.

배경 선택하기

로고가 밝은 브라우저 크롬과 어두운 브라우저 크롬 모두에서 잘 보인다면 투명하게 두세요. 아이콘의 전경이 흰색 탭에 대해 사라질 수 있는 밝은 색이라면 단색으로 전환하세요 — 대부분의 기업 탭은 여전히 매우 밝습니다.

모든 크기 검토하기

16픽셀 및 32픽셀 미리보기를 주의 깊게 살펴보세요. 대부분의 로고는 그 크기에서 세부 사항을 잃습니다. 결과가 얼룩이라면 소스를 단순화하세요 — 색상을 줄이고, 두꺼운 선을 사용하고, 작은 글씨를 줄이세요 — 그리고 다시 업로드하세요.

번들 다운로드하기

모두 다운로드를 사용하여 favicon.ico와 여섯 개의 PNG 크기를 가져오세요. 이를 사이트의 루트에 배치하세요. .ico는 내부에 16, 32, 48 px PNG를 포함하고 있으며, 이는 현재 Chrome, Firefox 및 Edge가 기대하는 것입니다.

HTML 및 매니페스트 붙여넣기

HTML 스니펫을 모든 페이지의 <head>에 복사하세요. site.webmanifest 스니펫을 아이콘과 함께 저장하여 Android가 누군가 사이트를 추가할 때 올바른 홈 화면 이미지를 표시하도록 하세요.

파비콘 세트가 구축되는 방법

1. 브라우저의 기본 이미지 로더를 사용하여 업로드된 이미지를 디코딩합니다.
2. 각 대상 크기(16, 32, 48, 180, 192, 512)에 대해 정사각형 캔버스에 그립니다.
3. 소스를 레터박스하여 긴 쪽이 캔버스에 맞도록 합니다 — 절대 잘라내지 말고, 절대 늘리지 마세요.
4. canvas.toBlob('image/png')를 통해 캔버스를 PNG로 다시 인코딩합니다.
5. favicon.ico의 경우, 16/32/48 PNG를 ICONDIR + ICONDIRENTRY 구조로 조립합니다.
6. 16바이트 디렉토리 항목 뒤에 PNG 바이트를 연결합니다 — 이는 유효한 다중 해상도 .ico입니다.

작동하는 것과 작동하지 않는 것

소스 이미지	기대할 수 있는 것
굵은 정사각형 로고, 1024×1024 PNG, 투명 배경	모든 크기에서 선명합니다. 16픽셀 및 32픽셀 미리보기에서도 여전히 명확하게 읽힙니다. 프로덕션 사이트에 바로 드롭하세요. 이상적인 입력입니다.
넓은 수평 워드마크, 2000×400	정사각형 캔버스에 레터박스되어 상단과 하단에 빈 밴드가 있습니다. 워드마크는 192픽셀 및 512픽셀에서 여전히 읽을 수 있지만 16픽셀 및 32픽셀에서는 읽을 수 없습니다 — 텍스트가 너무 작습니다. 업로드하기 전에 정사각형 마크로 자르세요.
얇은 그라디언트 윤곽선이 있는 사진 로고	그라디언트와 윤곽선이 16픽셀 및 32픽셀에서 사라집니다. 아이콘 크기 자산을 위해 동일한 로고의 단순화된 고대비 버전을 사용하세요. 세부 손실은 소스 문제이며, 내보내기 문제는 아닙니다.
명시적인 너비 또는 높이가 없는 SVG	뷰박스에서 파생된 크기가 없는 SVG에 대해 브라우저가 할당하는 기본 300×150에서 렌더링됩니다. 업로드하기 전에 소스 SVG에 너비/높이 속성 또는 뷰박스를 추가하세요. SVG 엣지 케이스 — 소스를 수정하세요.

파비콘 생성기를 사용할 때

새 사이트나 제품 페이지를 시작하고 모든 파비콘 크기가 한 번에 필요할 때.

브랜드를 새롭게 하고 기존 사이트의 아이콘을 Photoshop을 열지 않고 교체할 때.

인식 가능한 탭 아이콘이 필요한 내부 도구, 대시보드 또는 관리 패널을 만들 때.

프레임워크가 특정 경로에서 파비콘을 기대하는 정적 문서 사이트(Docusaurus, Astro, Next.js)를 구축할 때.

사이트를 휴대폰의 홈 화면에 설치할 수 있도록 PWA 준비가 완료된 아이콘 세트를 생성합니다.

귀하가 제어하는 SaaS 서브도메인에서 공급자의 기본 파비콘을 교체합니다.

후보 로고가 16 px에서 어떻게 보이는지 빠르게 테스트한 후 결정합니다.

자주 묻는 질문

왜 이렇게 많은 크기가 있나요?

내 이미지가 어디에 업로드되나요?

.ico가 2026년에도 여전히 존재하는 이유는 무엇인가요?

투명한 배경과 단색 배경 중 어떤 것을 사용해야 하나요?

내 로고는 512 px에서 괜찮은데 16 px에서는 흐릿해요 — 왜 그런가요?

이 파일들은 어디에 두어야 하나요?

2026년에 모든 크기가 필요하나요?

파비콘 생성기

파비콘 생성기란 무엇인가요?

파비콘 세트를 생성하는 방법

파비콘 세트가 구축되는 방법

작동하는 것과 작동하지 않는 것

파비콘 생성기를 사용할 때

관련 도구

자주 묻는 질문

파비콘 생성기

파비콘 생성기란 무엇인가요?

파비콘 세트를 생성하는 방법

파비콘 세트가 구축되는 방법

작동하는 것과 작동하지 않는 것

파비콘 생성기를 사용할 때

관련 도구

자주 묻는 질문