⭐ 파비콘 생성기

PNG / SVG 드래그 → 모든 사이즈 일괄 생성 → ZIP 다운로드 + HTML 스니펫 복사.

완전 무료 가입 불필요 브라우저 완결 5 개 언어 다크 모드

🔒 개인정보 보호

・모든 처리는 브라우저 내에서 완료됩니다
・이미지 데이터는 서버로 전송되지 않습니다
・저장 로그 · 업로드 기록 · 데이터베이스 없음
・가입 · 로그인 · 결제 불필요

📂

정사각형 PNG / SVG 드래그 (512x512 이상 권장)

📖 자주 걸리는 지점

정사각형 PNG 또는 SVG 에서 필요한 크기를 일괄로 내보내 ZIP 으로 묶고 <head> 에 붙일 HTML 스니펫도 생성합니다. 처리는 브라우저 안에서 끝납니다. 파일을 갖추는 것과 의도대로 표시되는 것은 별개의 문제입니다 — 파비콘은 브라우저 · OS · 검색 엔진이 각각 다른 규칙으로 가지러 오는 데다 캐시가 극단적으로 강하므로 확인 방법까지 포함해 절차로 만들어 두지 않으면 반드시 빠집니다.

사례	무슨 일이 일어나는가	어떻게 하면 되는가
교체했는데 옛 아이콘이 계속 나온다	파비콘은 페이지의 HTML 과는 다른 캐시에 들어가며 일반적인 새로고침으로는 다시 가져오지 않습니다. Chrome 은 전용 파비콘 데이터베이스를 가지고 있어 강력 새로고침(Ctrl+Shift+R)으로도 지워지지 않는 경우가 있습니다. 북마크 바나 탭, 방문 기록, OS 의 바로가기가 각각 다른 시점에 갱신되므로 탭은 새것인데 북마크는 옛것 이라는 상태가 흔히 일어납니다. CDN 을 끼고 있다면 그쪽에도 오래된 파일이 남습니다.	파일 이름이나 쿼리를 바꾸는 것이 가장 확실합니다 — `<link rel="icon" href="/favicon-v2.png">` 처럼 경로째 바꾸거나 최소한 `?v=2` 를 붙입니다. 검증은 시크릿 창에서 하세요 — 일반 창에서 몇 번을 새로고침해도 오래된 캐시를 계속 볼 뿐 시간을 낭비합니다. 그래도 옛것 그대로라면 캐시 문제가 아니라 `<link>` 의 경로가 틀렸을 가능성이 높으므로 DevTools 의 Network 탭에서 실제로 가져와지고 있는지 보세요(404 가 나오면 한눈에 알 수 있습니다).
16px 에서 뭉개져 무슨 로고인지 모르겠다	브라우저 탭에 나오는 것은 실질적으로 16×16 입니다(고 DPI 라도 32×32). 로고를 그대로 축소하면 1px 미만의 선은 사라지고 가는 글자는 회색 덩어리가 됩니다. 글자 수가 많은 회사명 로고는 전멸이며 멀리서는 회색 사각형 으로밖에 인식되지 않습니다. 이는 내보내기 품질의 문제가 아니라 정보량이 다 들어가지 않는다는 물리적 제약입니다 — 16×16 은 256 픽셀뿐이며 이는 한 글자를 그리기에도 빠듯한 면적입니다.	16px 와 32px 는 별도 디자인을 준비하세요. 머리글자 한 글자만 크게 두거나 심벌 부분만 잘라내거나 선 굵기를 2px 이상으로 살찌우거나 — 대형 서비스의 파비콘이 하나같이 극단적으로 단순한 것은 이 때문입니다. SVG 파비콘(`<link rel="icon" type="image/svg+xml">`)을 함께 쓰면 큰 크기에서는 원래 디자인을 보여 주면서 작은 크기만 바꿔치기할 수 있습니다(SVG 안에서 `@media (max-width: 16px)` 는 쓸 수 없으므로 실제로는 PNG 를 따로 준비해 `sizes` 속성으로 나눕니다). 확인은 반드시 실제 크기로 — 확대한 미리보기로 판단하면 우선 실패합니다.
iOS 홈 화면에 추가하면 배경이 검게 된다	`apple-touch-icon` 에 투명 PNG 를 주면 iOS 는 투명 부분을 검정(환경에 따라서는 흰색)으로 칠합니다. 디자인상 배경 없이 두고 싶다 는 생각이어도 OS 쪽이 반드시 불투명한 정사각형으로 만들기 때문입니다. 같은 이치로 직접 둥글린 이미지를 주면 OS 의 둥근 모서리와 이중이 되어 네 모서리가 잘립니다. 홈 화면 아이콘만 유난히 지저분하다는 증상의 대부분은 이 두 가지입니다.	이 도구의 배경색 추가를 켜서 정사각형의 구석까지 칠한 불투명한 이미지를 내보내세요. 둥근 모서리는 넣지 말고 여백(세이프 에어리어)은 전체의 10% 전후를 기준으로 잡습니다 — OS 가 모서리를 둥글릴 때 끝까지 밀어붙인 디자인은 잘립니다. 크기는 180×180 을 준비하면 현행 iPhone / iPad 를 커버할 수 있습니다. `<link rel="apple-touch-icon">` 을 쓰지 않으면 iOS 는 페이지의 스크린샷을 아이콘으로 씁니다 — 왜인지 페이지 축소 이미지가 늘어서 있다 는 증상이 이것입니다.

<link rel="icon"> 과 site.webmanifest 의 icons 는 별개이며 둘 다 필요합니다. 전자는 브라우저 탭용, 후자는 Android 홈 화면과 PWA 용이며 한쪽만 갱신해 Android 만 옛것 그대로 라는 사고가 자주 일어납니다. 검색 결과에 나오는 파비콘에도 독자적인 규칙이 있어 Google 은 기본적으로 사이트 루트를 보러 가므로 /favicon.ico 를 반드시 두세요 — 나아가 48×48 의 배수(48/96/144…)가 권장되며 16×16 밖에 없으면 검색 결과에서는 확대되어 흐려집니다. 잊기 쉬운 것이 robots.txt 로 아이콘 디렉터리를 차단하지 않는 것입니다. Disallow: /assets/ 같은 넓은 지정을 해 두면 파비콘만 가져올 수 없어 검색 결과에 기본 지구본 아이콘이 나옵니다. 반영에는 며칠에서 몇 주가 걸리므로 릴리스 직후에 판단하지 마세요.

📖 사용법

1

이미지 불러오기

512x512 이상 정사각형 권장.
2

모든 사이즈 자동 생성

16 ~ 512 px 미리보기.
3

ZIP과 스니펫 받기

ZIP 다운로드 후 스니펫을 <head>에 붙여넣기.

❓ 자주 묻는 질문

이미지가 업로드됩니까?

아니요. 브라우저 내에서만 처리.

SVG 흐려짐?

SVG는 벡터로 모든 사이즈에서 선명.

.ico 생성?

최신 브라우저는 PNG 지원. 필요시 32x32 PNG를 .ico로 rename.

🔗 관련 도구

🐛 이 도구에서 문제가 발생했나요?

무료 · 가입 불필요. 재현 절차만이라도 도움이 됩니다. 보고는 운영자에게 직접 전달되어 개선에 사용됩니다.