파비콘 생성기

로고를 넣고 실제 크기마다 확인한 뒤 favicon.ico, PNG 세트, HTML까지 받아 가세요.

PNG / JPEG / WebP / GIF / SVG — 또는 이 카드에 끌어다 놓으세요

이미지를 추가하거나 글자로 전환하면 모든 크기가 여기에 나타납니다. “생성” 버튼은 없습니다.favicon.ico 16/32/48 · PNG 16 · 32 · 48 · 180 · 192 · 512 · site.webmanifest · HTML

사용 방법

  1. 이미지를 고르거나 카드에 끌어다 놓으면 모든 크기가 즉시 나타납니다. 생성 버튼은 없으며 보이는 그대로 내려받습니다.
  2. 아직 로고가 없으신가요? “글자 / 이모지”로 전환해 한두 글자를 입력하세요. 색상 선택기가 배경을 정하고 글자는 대비에 따라 검정 또는 흰색이 됩니다.
  3. 묶음을 내려받아 사이트 루트에 압축을 풀고, 복사한 <link> 태그를 <head>에 붙여 넣은 뒤 사이트를 새로 고치세요. 탭 아이콘이 나타날 것입니다.

예시

원본

logo.png · 512×512, 모양 “둥근 모서리”

묶음(파일 9개)

favicon.ico (16/32/48)
favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
apple-touch-icon.png (180)
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
snippet.html

같은 원본과 같은 옵션은 바이트 단위로 동일한 PNG와 ZIP을 만듭니다(아카이브 타임스탬프는 1980-01-01로 고정). 그래서 묶음을 커밋하고 diff할 수 있습니다. 모양을 바꾸면 모서리만 잘리며 그림을 다시 그리지는 않습니다.

범위, 한도 및 자주 묻는 질문

  • SVG 내보내기는 없습니다. 16 px에서도 살아남는 SVG는 손으로 단순화한 경로가 필요합니다. 비트맵을 SVG로 감싸거나 시스템 글꼴 텍스트를 그리면 벡터처럼 보일 뿐입니다. 원한다면 이 PNG 세트 옆에 직접 만든 .svg를 두세요.
  • 이미지는 맞춰 넣으며 자르지 않습니다. 정사각형이 아닌 로고는 투명 여백이 남으므로 먼저 자르거나 합성하세요(여기 있는 이미지 크기 조정/변환 도구가 도움이 됩니다).
  • 투명 아이콘에는 플랫폼이 배경을 칠합니다. iOS는 apple-touch-icon 뒤에 배경을 칠하고 일부 Android 런처도 그렇게 합니다. 직접 제어하는 배경이 필요하면 “글자 / 이모지”를 쓰거나 원본 이미지에 배경을 추가하세요.
  • site.webmanifest에는 아이콘만 나열되며 name이나 short_name은 없습니다. 그것은 이 도구가 알 수 없는 사이트 이름이므로 압축을 푼 뒤 두 키를 추가하세요(name은 선택 사항이며 브라우저는 페이지 제목으로 대체합니다).
  • favicon.ico에는 16, 32, 48 px가 들어 있으며 64나 128은 없습니다. 최신 브라우저와 Windows를 커버합니다. 필요하면 PNG로 크기를 더 추가하세요.
  • 애니메이션 GIF/WebP: 첫 프레임만 사용합니다. 파비콘은 어차피 움직이지 않습니다.
  • 글자 아이콘은 시스템 글꼴로 그리므로 macOS, Windows, Linux, 휴대폰에서 다르게 보입니다. PNG는 기기가 보여 주는 모습을 고정하며, 그래서 글꼴 선택기가 없습니다.
  • URL 가져오기와 실시간 확인은 없습니다. 이 도구는 웹사이트 주소를 받을 수 없고 배포된 파비콘을 검증할 수 없습니다. 배포 후 사이트를 열어 탭을 확인하세요.
  • 한도: 파일당 20 MB, 한 변 8000 px입니다. 180 px 미만 원본은 큰 아이콘용으로 확대되어 흐려 보일 수 있습니다.
  • 자르기, 배경 제거, 일괄 처리, 기록은 없습니다. 새로 고치면 빈 상태로 시작합니다(아무것도 저장되지 않고 URL에도 아무것도 들어가지 않습니다).

아이콘을 준비한 뒤 보통 다음으로 필요한 도구입니다.