파비콘 에셋 생성기

ICO, PNG, Apple touch icon, PWA 아이콘, 웹 매니페스트, HTML 스니펫을 포함한 완전한 파비콘 번들을 브라우저에서 로컬로 생성합니다.

원본 이미지
PNG, JPEG, WebP, SVG 파일을 끌어다 놓거나 선택하세요. 아래에서 재정의하지 않는 한 모든 플랫폼에서 이 이미지가 사용됩니다.
사이트 정보
매니페스트, apple-touch-icon, HTML 스니펫에서 사용됩니다.

표시 영역에 앱 이름이 너무 길 때 사용됩니다.

선택 사항입니다. 비워두면 매니페스트에서 생략됩니다.

설치된 PWA가 열리는 위치입니다.

HTML 스니펫의 모든 href와 매니페스트 아이콘 배열의 모든 src에 적용되는 접두사입니다.

매니페스트의 theme_color와 HTML <meta name="theme-color"> 태그에 적용됩니다.

매니페스트의 background_color입니다. 브라우저가 PWA의 스플래시 화면을 칠하는 데 사용됩니다.

데스크톱 브라우저 파비콘
favicon.ico, favicon-16x16.png, favicon-32x32.png 그리고 (원본이 SVG일 때) favicon.svg를 제어합니다.

아이콘 내부의 원본 주변 시각적 여유 공간입니다.

데스크톱 브라우저 탭
데스크톱 브라우저 탭 (dark)
검색 엔진 결과
iOS 웹 클립
iOS 홈 화면에 사용되는 180×180 apple-touch-icon.png를 제어합니다.

Apple 아이콘은 반드시 불투명해야 하므로 이 채우기가 항상 적용됩니다.

아이콘 내부의 원본 주변 시각적 여유 공간입니다.

iOS 홈 화면
PWA 아이콘
pwa-192x192.png, pwa-512x512.png 및 마스커블 변형을 제어합니다.

아이콘 내부의 원본 주변 시각적 여유 공간입니다.

W3C 권장 안전 영역은 40%입니다. 원본 콘텐츠는 어떤 플랫폼 마스크 안에서도 보이도록 유지됩니다.

Windows 작업 표시줄
Android 런처
생성된 번들
생성을 클릭하면 모든 에셋이 렌더링되고 zip이 빌드되며 HTML 스니펫이 복사됩니다.
아직 번들이 없습니다
이미지를 선택하고 생성을 클릭하여 파비콘 번들을 조립하세요.

이 도구가 생성하는 것

이 생성기는 단일 이미지를 완전한 최신 파비콘 번들로 변환합니다 — 레거시 브라우저용 다중 크기 .ico, 16 / 32 / 180 / 192 / 512 PNG 변형, 선택적 원본 .svg, PWA용 site.webmanifest, 그리고 <head>에 붙여 넣을 HTML 스니펫까지. 모든 바이트는 여러분의 브라우저에서 생성됩니다. 업로드도, 서버도, 분석 추적도 없습니다.

번들에 포함된 것

  • favicon.ico — 브라우저 탭, 북마크, 그리고 오래된 Windows 바로 가기를 위한 다중 이미지(16 / 32 / 48).
  • favicon-16x16.png 와 favicon-32x32.png — 최신 브라우저가 사용하는 모던 PNG 변형.
  • favicon.svg — 원본 이미지가 SVG이고 “원본 SVG 사용” 토글이 켜져 있을 때에만 포함됩니다.
  • apple-touch-icon.png — 180×180, 불투명, iOS 홈 화면에서 사용.
  • pwa-192x192.png 와 pwa-512x512.png — 표준 PWA 아이콘.
  • pwa-maskable-192x192.png 와 pwa-maskable-512x512.png — W3C 권장 안전 영역이 적용된 마스커블 변형.
  • site.webmanifest — 위 아이콘들과 연결된 PWA 매니페스트.

패딩, 배경, 마스커블 안전 영역의 작동 방식

각 플랫폼마다 자체 패딩(“여백”)이 있어 아이콘 캔버스 안에서 여유 공간을 둘 수 있습니다. “배경 추가” 스위치는 원본 뒤에 불투명한 정사각형을 칠합니다 — 원본이 투명하고 대상에서 불투명도가 필요하거나 (Apple의 홈 화면) 단순히 브라우저 탭에서 시각적 대비가 필요할 때 유용합니다. 마스커블 PWA 아이콘은 플랫폼 여백 위에 추가 안전 영역을 사용합니다. 중앙 약 80% 바깥에 있는 모든 것은 Android, Windows, 또는 ChromeOS가 원형, 둥근, 또는 스쿼클(squircle) 마스크를 적용할 때 잘릴 수 있습니다.

번들을 사이트에 연결하기

  1. 다운로드한 압축 파일을 웹 루트에 풀어 파일들이 /favicon.ico, /site.webmanifest 등의 경로에 위치하도록 합니다.
  2. HTML 스니펫을 사이트의 <head>에 붙여 넣습니다.
  3. 하위 경로(예: /static/icons/)에서 에셋을 제공하는 경우, 스니펫과 매니페스트가 올바른 URL을 사용하도록 생성 전에 “에셋 경로”를 설정하세요.
  4. 이 도구에서 노출하는 범위를 넘어 매니페스트를 사용자 지정한 경우(예: categories 또는 screenshots 추가), 텍스트 편집기로 site.webmanifest를 열어 직접 편집하세요 — 일반 JSON 파일입니다.