파비콘 생성기
이미지나 글자로 파비콘 만들기 — favicon.ico, favicon.svg, PNG 대체본, 윈도우 타일, webmanifest, 그리고 붙여넣을 태그까지. 무료, 업로드 없음, 브라우저 처리.
로고나 사진을 여기에 놓거나 클릭해서 고르세요
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="msapplication-config" content="/browserconfig.xml"> <meta name="theme-color" content="#ffffff">
🔒 브라우저에서 만들어지며 업로드되지 않습니다. favicon.ico(16/32/48), favicon.svg, 16·32 PNG 대체본, apple-touch 및 PWA PNG, browserconfig.xml이 딸린 윈도우 타일, site.webmanifest, 그리고 <head>에 붙여넣을 HTML 스니펫을 받습니다.
파비콘 세트 한 번에 생성
이미지로 시작해도 되고, 글자로 시작해도 됩니다. 정사각형이 아닌 사진도 괜찮습니다 — 사진 위에서 정사각형 영역을 끌어 옮기고 확대·축소해 원하는 부분만 잘라 내면 됩니다. 아니면 글자로 만들기로 바꿔 한두 글자를 입력하고 글꼴, 글자색과 바탕색, 정사각형·둥근 사각형·원 중 하나의 모양을 고르세요. 어느 쪽이든 여백과 배경색을 더할 수 있고, 밝은 탭과 어두운 탭에서 16·32·48·180픽셀 실제 크기로 어떻게 보이는지 확인할 수 있습니다. 이 탭에서 바로 보기를 누르면 만든 아이콘을 이 페이지의 파비콘으로 잠깐 걸어 두므로, 내려받기 전에 실제 탭에서 확인하고 같은 버튼으로 원래대로 되돌릴 수 있습니다.
내려받는 것
바로 쓸 수 있는 패키지입니다: 멀티사이즈 favicon.ico(16·32·48px), favicon.svg,
대체본 favicon-16x16.png·favicon-32x32.png, apple-touch-icon.png(180px),
PWA 아이콘(192·512px), 윈도우 타일 mstile-150x150.png과 그것을 가리키는
browserconfig.xml, PWA 아이콘을 선언해 브라우저가 홈 화면 추가에 쓸 수 있게 하는
site.webmanifest, 그리고 HTML 스니펫. 이 스니펫은 ZIP을 열지 않고도 복사할 수 있도록 페이지에도
그대로 나와 있으며, 일반 HTML·React용 JSX·Next.js 앱 라우터가 태그 대신 요구하는 metadata 내보내기
중에서 고를 수 있습니다. 모든 처리는 브라우저에서 이뤄져 이미지가 업로드되지 않습니다.
자주 묻는 질문
다운로드에 뭐가 들어있나요?
favicon.ico(16/32/48), favicon.svg, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, icon-192.png, icon-512.png, mstile-150x150.png, browserconfig.xml, site.webmanifest, 그리고 <head>에 넣을 태그가 담긴 snippet.html이 ZIP으로 들어있습니다.
어떤 이미지를 쓰면 좋나요?
어떤 이미지든 됩니다. 처음에는 사진 전체가 정사각형 안에 들어간 상태로 시작하므로 이미 정사각형인 로고는 손댈 필요가 없고, 가로로 긴 사진이라면 원하는 부분으로 정사각형을 끌어다 놓고 확대해 잘라 내면 됩니다. 무엇을 고르든 16픽셀 미리보기를 꼭 확인하세요 — 그렇게 작아지면 가는 선과 작은 글자는 보이지 않습니다.
이미지 없이 파비콘을 만들 수 있나요?
네. "글자로 만들기"로 바꾸고 네 글자까지 입력하면 됩니다 — 이니셜, 모노그램, 한글 한 글자 모두 좋습니다. 고딕·명조·고정폭 중 글꼴을 고르고 글자색과 바탕색, 그리고 바탕을 정사각형·둥근 사각형·원 중 무엇으로 할지 정하세요. 그다음은 사진과 똑같습니다 — 자르기, 여백, 미리보기, 그리고 같은 ZIP.
favicon.svg는 진짜 벡터인가요?
글자로 만들면 진짜 벡터입니다. 도형과 <text> 요소로 이뤄져 있어 어떤 크기에서도 또렷합니다. 사진으로 시작하면 벡터가 될 수 없습니다 — 브라우저에는 사진을 곡선으로 따는 기능이 없기 때문입니다 — 그래서 이 경우 SVG 안에 512px PNG를 담습니다. <link rel="icon" type="image/svg+xml">가 요구하는 정당한 파일이기는 하지만, 해상도에 자유롭지는 않습니다.
ZIP을 풀지 않고 HTML 태그만 복사할 수 있나요?
네. 태그는 내려받기 버튼 아래 페이지에 그대로 인쇄되어 있고 전용 복사 버튼이 붙어 있습니다. 프레임워크 메뉴로 일반 HTML, React용 JSX(자체 닫는 태그), Next.js 앱 라우터의 metadata 내보내기 사이를 오갈 수 있으며, 고른 테마 색상은 셋 모두에 반영됩니다.