utilbox
이미지

파비콘 만들기

이미지를 업로드하면 모든 사이즈의 파비콘을 자동으로 생성합니다. ICO 파일과 PNG를 한번에 다운로드하세요.

파일은 서버로 업로드되지 않습니다

모든 처리는 브라우저 안에서만 진행됩니다.

이미지를 드래그하거나 클릭해 업로드

PNG, JPG, SVG, WebP 지원 · 정사각형 권장

사용 방법

  1. 파비콘으로 사용할 이미지를 업로드합니다 (정사각형 PNG·SVG 권장).
  2. 배경색과 패딩을 조절해 원하는 모양을 만듭니다.
  3. 미리보기에서 각 사이즈별 결과를 확인합니다 (16×16 ~ 512×512).
  4. favicon.ico 다운로드로 ICO 파일을 받거나, 전체 다운로드로 모든 사이즈 PNG까지 한번에 받습니다.
  5. HTML 태그를 복사해 웹사이트 head에 붙여넣습니다.

파비콘 사이즈 가이드

favicon.ico16·32·48px를 포함하는 멀티 사이즈 파일. 대부분의 브라우저에서 사용됩니다.
180×180Apple Touch Icon. iOS 홈 화면에 추가할 때 표시되는 아이콘입니다.
192×192Android Chrome 아이콘. PWA 매니페스트에서도 사용됩니다.
512×512PWA 스플래시 화면 및 고해상도 아이콘에 사용됩니다.

관련 툴

파비콘 만들기 자세히 알아보기

로고나 아이콘 이미지를 업로드하면 웹사이트에 필요한 모든 사이즈의 파비콘을 한 번에 생성해주는 도구입니다. favicon.ico(16·32·48px 멀티 사이즈), 16·32·48·180·192·512px PNG까지 자동으로 만들어 ZIP 없이 개별 다운로드할 수 있고, HTML head에 붙여 넣을 link 태그까지 자동 생성합니다.

더 알아보기

배경색을 투명·흰색·검정·커스텀 컬러로 설정하고 패딩을 0~40%까지 조절해 다양한 컨테이너 안에서 잘 보이는 파비콘을 만들 수 있습니다. 모든 처리가 브라우저에서 이뤄져 디자인 원본이 서버로 전송되지 않으며, 정사각형 PNG·SVG·JPG·WebP 포맷을 지원합니다.

이럴 때 사용하세요

  • 신규 웹사이트·랜딩페이지를 만들 때 브라우저 탭 아이콘이 필요한 경우
  • iOS Safari에서 "홈 화면에 추가" 시 표시될 Apple Touch Icon(180×180)을 만들 때
  • PWA(Progressive Web App)용 192·512px 매니페스트 아이콘이 필요할 때
  • 기존 사이트의 저화질 favicon.ico를 고해상도로 교체하고 싶을 때

파비콘 만들기 자주 묻는 질문

왜 favicon.ico 한 파일이 아니라 여러 사이즈가 필요한가요?
브라우저 탭은 16·32px, Windows 작업 표시줄은 48px, iOS 홈 화면은 180px, Android Chrome은 192px, PWA 스플래시는 512px을 각각 사용합니다. 한 파일로는 모든 환경에서 선명하게 표시되지 않습니다.
배경을 투명으로 두면 어떻게 표시되나요?
다크모드 브라우저에서 배경에 자연스럽게 어우러집니다. 반대로 로고 색이 어두우면 다크 테마에서 보이지 않을 수 있으니, 배경색이 다양한 환경에서는 흰색·연한색 배경을 추가하는 게 안전합니다.
정사각형이 아닌 이미지를 올려도 되나요?
네, 가능합니다. 도구가 자동으로 정사각형 캔버스 중앙에 비율을 유지하며 배치합니다. 다만 처음부터 정사각형 PNG·SVG로 준비하면 결과가 가장 깔끔합니다.
SVG도 지원하나요?
SVG 업로드는 가능하지만 결과는 PNG·ICO 래스터 이미지로 변환됩니다. 일부 모던 브라우저는 SVG 파비콘을 직접 지원하므로 별도로 SVG 파일을 그대로 호스팅해 link rel="icon"으로 추가하는 것도 좋은 방법입니다.
생성한 HTML 태그는 어디에 붙여 넣나요?
HTML 문서의 <head>...</head> 안에 추가하세요. Next.js·Vue 등 프레임워크라면 layout 컴포넌트의 head 섹션이나 metadata 설정 영역에 넣으면 됩니다.