파비콘 생성기

신규

이미지나 문자에서 전체 파비콘 세트를 만들고 ZIP으로 다운로드.

Drop an image, click to browse, or paste PNG, JPG, SVG or WebP — a square 512×512+ logo works best. Processed on your device.

Background Transparent

Shape

Padding 0% App name (for manifest)

Drop an image above to generate your favicon set — or switch to Text or Emoji to build one from a letter or emoji.

Live preview

Browser tab

My App

Bookmarks bar

My App

iOS home screen

My App

Android home screen

My App

Generated sizes

Apple touch (180) and Android (192/512) icons use a solid background; the 192 and 512 are maskable with a built-in safe zone.

HTML for your <head>

site.webmanifest

Runs entirely in your browser. Nothing is uploaded.

브라우저에서 완전한 favicon 세트 생성하기

이 favicon 생성기는 현대적인 웹사이트나 웹앱에 필요한 모든 아이콘을 만들어 줍니다. 브라우저 favicon, 멀티 사이즈 favicon.ico, Apple touch icon, PWA 매니페스트용 마스커블 아이콘 — 모두 하나의 소스에서 생성됩니다. 이미지, 텍스트 레터마크, 이모지 중 하나를 선택하고, 배경·모양·패딩을 조정한 다음, 모든 파일과 <head>에 바로 붙여넣을 수 있는 HTML 스니펫이 포함된 ZIP 파일을 다운로드하세요.

이미지를 서버로 전송하는 도구와 달리, 여기서는 모든 처리가 HTML canvas에서 로컬로 이루어집니다. 빠르고 무료이며 회원가입이 필요 없고, 로고는 완전히 비공개로 유지됩니다. 계정도, 서버 처리 대기도, 광고도 없습니다.

이미지, SVG, 문자, 이모지 지원

세 가지 입력 모드로 모든 상황에 대응합니다. 이미지는 PNG, JPG, SVG, WebP를 지원하며, 정사각형 로고를 각 크기에 맞게 중앙 정렬합니다. SVG를 업로드하면 선명하고 확장 가능한 favicon.svg로도 그대로 출력됩니다. 텍스트는 1~3자를 원하는 폰트와 색상의 깔끔한 레터마크로 변환합니다 — 아직 로고가 없을 때 유용합니다. 이모지는 클릭 한 번으로 어떤 이모지든 favicon으로 만들어 주어, 사이드 프로젝트에 가장 빠르게 브랜딩할 수 있는 방법입니다.

어떤 것을 선택하든, 완전한 출력 세트를 받게 됩니다. 모든 PNG 크기, 진짜 favicon.ico, 선택적 favicon.svg, 웹앱 매니페스트, HTML 코드가 포함됩니다. Chromebook 탭부터 Android 홈 화면까지 모든 브라우저, 모든 OS, 모든 디바이스 크기를 커버합니다.

모든 크기 + 진짜 favicon.ico

브라우저 탭과 Windows용 16×16, 32×32, 48×48 PNG, Apple touch icon용 180×180, Android 및 PWA 홈 화면용 192×192와 512×512 아이콘을 생성합니다. 그런 다음 16, 32, 48 비트맵을 진짜 멀티 해상도 favicon.ico로 인코딩합니다. 이것이 브라우저가 기본으로 요청하는 컨테이너 파일이며, 서버 왕복 없이 완전히 브라우저 안에서 처리됩니다.

ICO 형식은 중요합니다. 많은 도구가 32×32 PNG를 favicon.ico로 이름만 바꾸는데, 이는 동작하긴 하지만 브라우저가 항상 하나의 소스에서 스케일링한다는 의미입니다. 진짜 멀티 해상도 ICO는 브라우저가 각 상황에 가장 선명한 크기를 선택할 수 있게 해줍니다.

Apple touch icon과 마스커블 PWA 아이콘을 올바르게

모바일 아이콘을 제대로 만드는 것은 대부분의 favicon이 실패하는 부분입니다. apple-touch-icon은 180×180 크기로 단색 배경으로 렌더링됩니다 (iOS는 투명 배경을 지원하지 않으며 모서리를 자동으로 둥글게 처리합니다). 192와 512 매니페스트 아이콘은 마스커블 아이콘으로 생성됩니다 — 콘텐츠가 약 80%의 안전 영역 안에 유지되어 Android가 원형, 스쿼클, 둥근 사각형으로 잘라도 로고가 잘리지 않습니다.

라이브 미리보기 목업으로 브라우저 탭, 북마크 바, iOS 및 Android 홈 화면에서 아이콘이 어떻게 보이는지 확인할 수 있어, 배포 전에 정확한 모습을 파악할 수 있습니다.

UtiloKit vs favicon.io vs RealFaviconGenerator.net

favicon.io는 가장 인기 있는 favicon 도구이고 실제로 훌륭하지만, 이미지를 서버에 업로드합니다. 즉, 공개되지 않은 로고나 클라이언트 자산이 기기를 떠납니다. RealFaviconGenerator.net은 가장 기능이 풍부한 옵션이지만, 다단계 마법사가 빠른 프로젝트에는 부담스럽고, 서버 사이드에서 이미지를 처리합니다. favicon-generator.org는 구식으로, 마스커블 매니페스트 아이콘이나 SVG 없이 기본 PNG 크기만 생성합니다.

UtiloKit은 모든 것을 로컬에서 처리합니다. 이미지가 브라우저 밖으로 절대 나가지 않습니다. 출력에는 진짜 멀티 해상도 ICO, 안전 영역 패딩이 적용된 올바른 마스커블 매니페스트 아이콘, 확장 가능한 SVG, 바로 붙여넣을 수 있는 <head> 스니펫이 포함됩니다. iPhone과 Android에서도 동작합니다.

매니페스트와 HTML 스니펫, 바로 붙여넣기

아이콘과 함께 완전한 site.webmanifest — 앱 이름, 테마 색상, 마스커블 아이콘 항목 포함 — 와 .ico, .svg, Apple touch icon, 매니페스트를 연결하는 복사 가능한 <head> 스니펫, 그리고 일치하는 theme-color 메타 태그를 받게 됩니다. HTML에 붙여넣고 파일을 사이트 루트에 업로드하면 끝입니다.

스니펫은 어떤 스택에서도 사용 가능합니다: 순수 HTML, Next.js, Astro, Nuxt, SvelteKit, Remix. 프레임워크에 전용 favicon 설정이 있는 경우(Next.js의 app/icon.png, Astro의 head 설정)에도 PNG 파일을 그대로 사용할 수 있습니다.

Frequently asked questions

Favicon이란 무엇인가요?

Favicon(파비콘, '즐겨찾기 아이콘'의 약자)은 브라우저가 페이지 제목 옆에 표시하는 작은 정사각형 아이콘입니다. 브라우저 탭, 북마크 바, 방문 기록, 경우에 따라 검색 결과에도 표시됩니다. 보통 16×16 또는 32×32 픽셀로 표시되며, 사이트 루트에 favicon.ico로 위치합니다. 최신 사이트는 favicon.svg, Apple touch icon, 홈 화면용 PWA 아이콘도 추가합니다. 인식하기 쉬운 favicon은 북마크와 검색 결과에서의 클릭률을 높여줍니다.

Favicon은 어떤 크기가 필요한가요?

16×16과 32×32부터 시작하세요 — 브라우저가 탭과 북마크에 표시하는 두 가지 크기를 하나의 favicon.ico에 묶어서 사용합니다. 완전한 지원을 위해 48×48(Windows 사용), iOS용 180×180 apple-touch-icon, Android와 PWA 홈 화면용 192×192 및 512×512 PNG도 추가하세요. 이 생성기는 하나의 소스에서 모든 크기를 한 번에 생성하므로 수동으로 크기를 조정하거나 여러 도구를 사용할 필요가 없습니다.

Favicon을 어떻게 만드나요?

소스를 선택하세요 — 이미지 업로드(PNG, JPG, SVG 또는 WebP), 1~3자 입력, 또는 이모지 붙여넣기 — 그런 다음 배경색, 모양(정사각형, 둥근 모서리, 원형), 패딩을 선택합니다. 도구가 canvas에서 모든 favicon 크기를 렌더링하고, 16/32/48을 favicon.ico에 패킹하여, 모든 파일과 <code><head></code>에 붙여넣을 HTML 스니펫이 담긴 ZIP을 제공합니다. 전체 과정이 1분 이내에 완료되며 디자인 소프트웨어가 필요하지 않습니다.

로고를 업로드해도 안전한가요?

네 — 실제로는 아무것도 업로드되지 않기 때문입니다. 모든 단계가 HTML <code><canvas></code>와 JavaScript를 사용해 브라우저에서 실행됩니다. 이미지가 로컬에서 읽히고, 크기가 조정되고, PNG와 ICO로 인코딩되며, 기기에서 ZIP으로 압축됩니다. favicon.io나 RealFaviconGenerator.net과 달리 파일이 서버로 전혀 전송되지 않습니다. 클라이언트 프로젝트나 미공개 제품 작업 시에도 안심하고 사용할 수 있습니다.

Favicon이 표시되지 않는 이유가 무엇인가요?

거의 항상 브라우저 캐싱 때문입니다. 브라우저는 favicon을 적극적으로 캐시하므로 강제 새로고침(Ctrl+F5)을 하거나, 아이콘 URL을 직접 열어(yoursite.com/favicon.ico) 로드 여부를 확인하거나, 시크릿 창에서 시도해 보세요. 파일이 사이트 루트에 있는지, <code><link></code> 태그의 경로가 올바른지(앞의 슬래시가 중요), 모든 크기를 업로드했는지도 확인하세요.

Favicon 생성기가 iPhone과 Android에서도 작동하나요?

네 — Canvas API와 파일 다운로드가 iOS Safari, Android Chrome, Samsung Internet에서 모두 작동합니다. 카메라 롤에서 사진을 업로드하거나, 문자를 입력하거나, 이모지를 붙여넣은 다음 완전한 ZIP 파일을 스마트폰으로 직접 다운로드할 수 있습니다. 책상을 떠나 있을 때 빠르게 favicon을 프로토타이핑하는 데 유용합니다. 레이아웃이 작은 화면에 맞게 조정되어 375px에서도 편리하게 사용할 수 있습니다.

마스커블 아이콘이란 무엇인가요?

매니페스트 아이콘(site.webmanifest에 나열된 192×192 및 512×512 PNG)은 Android와 설치된 PWA가 사용하는 아이콘입니다. '마스커블' 아이콘은 중요한 콘텐츠를 중앙 안전 영역(아이콘의 약 80%) 안에 유지하여, 시스템이 원형, 스쿼클, 둥근 사각형으로 잘라도 올바르게 보입니다. 이 생성기는 192와 512 아이콘에 자동으로 안전 영역 패딩을 추가하고 <code>purpose: maskable</code>로 표시합니다. 안전 영역을 직접 계산할 필요가 없습니다.