파비콘 생성기
이미지, 텍스트, 이모지로 favicon을 만듭니다. 16×16부터 512×512까지 PNG와 SVG로 다운로드하고, HTML 임베드 코드도 한 번에 생성합니다.
PNGㆍJPGㆍSVGㆍWebP 지원(정사각형 권장)
생성 결과
파비콘이란?
파비콘(favicon)은 브라우저 탭, 즐겨찾기, 검색 결과, 모바일 홈 화면 등에 표시되는 작은 아이콘입니다. 사이트의 정체성을 한눈에 알리는 가장 작은 브랜딩 요소이며, SEO 측면에서도 검색 결과 클릭률(CTR)에 영향을 줍니다.
2026년 권장 favicon 세트
- favicon.svg - 최신 브라우저(Chrome 80+, Safari 12+, Firefox 41+)에서 사용. 확대해도 깨지지 않으며 다크모드 variant까지 한 파일에 담을 수 있습니다.
- favicon-32x32.png / 16x16.png - 일반 브라우저 탭. SVG 미지원 환경 폴백.
- apple-touch-icon-180x180.png - iOSㆍmacOS Safari에서 홈 화면 추가 시 사용. 모서리는 시스템이 자동으로 둥글게 처리합니다.
- android-chrome-192x192.png / 512x512.png - PWA 매니페스트(site.webmanifest)에서 사용. 안드로이드 홈 화면, 스플래시 스크린에 노출.
- site.webmanifest - 설치형 웹 앱(PWA) 메타데이터. 본 생성기가 자동으로 만들어 ZIP에 포함합니다.
HTML 임베드 예시
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon-32x32.png" sizes="32x32"> <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png"> <link rel="manifest" href="/site.webmanifest">
브라우저ㆍ플랫폼별 파비콘 지원
어떤 파일을 어디에서 사용하는지 한눈에 확인하세요. ✅ 기본 사용 / 폴백 / ❌ 무시.
| 파일 | Chrome / Edge | Safari (macOS) | Firefox | iOS Safari | Android Chrome |
|---|---|---|---|---|---|
favicon.svg | ✅ 기본 | ✅ 기본 | ✅ 기본 | 14+ | ✅ 기본 |
favicon-32x32.png | 폴백 | 폴백 | 폴백 | 폴백 | 폴백 |
apple-touch-icon-180x180.png | ❌ | 북마크 | ❌ | ✅ 홈 화면 | 폴백 |
android-chrome-192x192.png | PWA | ❌ | ❌ | ❌ | ✅ 홈 화면 |
android-chrome-512x512.png | PWA | ❌ | ❌ | ❌ | ✅ 스플래시 |
site.webmanifest | ✅ PWA | 일부 | 일부 | 일부 | ✅ PWA |
SVG를 기본으로 두고 PNG를 폴백으로 깔아두면 전 플랫폼 커버가 끝납니다. iOS 홈 화면에 추가되는 경우만 apple-touch-icon이 별도로 필요합니다.
실제로 잘 보이는 파비콘 디자인 원칙
가장 까다로운 제약은 16×16픽셀입니다. 모든 디자인 결정은 가장 작은 크기에서 먼저 판단한 뒤 위로 확대해야 합니다. 512×512에서 아름다운 디테일이 16×16에서는 뭉개진 덩어리로 변하는 경우가 많습니다.
- 아이디어는 하나만 - 워드마크 + 심볼 + 그레이디언트가 결합된 풀 로고마크는 축소해도 살아남는 경우가 드뭅니다. 가장 인상적인 요소 하나만 남기세요. 글자, 심볼, 또는 실루엣.
- 시각적 무게감이 실제 크기보다 중요합니다 - 얇은 선(32×32 기준 1px)은 사라집니다. 16×16으로 설계할 때 획 너비는 최소 2픽셀 이상으로 잡거나, 아웃라인 대신 꽉 찬 둥근 형태를 사용하세요.
- 밝은 탭과 어두운 탭 모두에서 대비 확보 - Chrome 활성 탭은 밝은 회색, Safari 탭 바는 거의 흰색, 다크모드 브라우저에서는 반전됩니다. 흰색 배경 파비콘은 다크모드에서 보이지 않습니다. 이 도구가 생성하는 다크모드 SVG variant를 사용하거나, 배경 상관없이 대비가 선명한 형태를 선택하세요.
- 얇은 텍스트는 피하세요 - 16×16에서 읽을 수 있는 한계는 보통 두 글자입니다. 세 글자는 HㆍMㆍW처럼 폭이 넓은 글자이고 단색 배경 위에 있을 때만 가능합니다.
- 탭이 여러 개 열린 상태에서 테스트하세요 - 탭 15개를 열어 두고 자신의 파비콘을 한눈에 찾을 수 있는지 확인하세요. 사용자가 실제로 경험하는 상황이 이것입니다.
피해야 할 흔한 실수
- 저해상도 PNG만 배포 - 레티나 디스플레이에서 흐릿하게 보입니다. SVG 또는 2배 해상도 래스터(예: 16×16 표시 목적으로 32×32 PNG)를 항상 제공하세요.
- apple-touch-icon 누락 - iOS에서 "홈 화면에 추가"를 할 때 해당 파일이 없으면 사이트 스크린샷이 아이콘으로 사용됩니다. 180×180 PNG를 반드시 제공하세요.
favicon.ico만 의존 - 최신 브라우저는 ICO 형식을 지원하지만, SVG의 확대 품질ㆍ다크모드 지원ㆍ레티나 선명도는 포기하게 됩니다.- MIME 타입 미선언 - 일부 CDN은
.svg를text/plain으로 서빙해 Safari가 거부합니다.<link>태그에type="image/svg+xml"을 항상 명시하고, 서버가 올바른Content-Type을 응답하는지 확인하세요. - 매니페스트 검증 없이 배포 -
site.webmanifest에 오류가 있으면 Android Chrome에서 홈 화면 추가가 조용히 비활성화됩니다. Chrome DevTools → Application → Manifest에서 확인하세요.
접근성과 다크모드 대응
브라우저가 점점 더 많이 다크모드로 탭을 렌더링합니다. 밝은 배경에서만 보이는 파비콘은 사용자의 약 3분의 1에게는 보이지 않습니다. 두 가지 전략이 효과적입니다.
prefers-color-scheme미디어 쿼리가 포함된 SVG - 단일 파일로 라이트ㆍ다크 모드 색상을 자동으로 전환합니다. Chrome, Edge, Firefox, Safari 12.1+에서 지원됩니다. 이 도구의 "다크모드 SVG variant" 옵션을 켜면 해당 SVG가 생성됩니다.- 중립 대비 디자인 - 밝고 어두운 배경 모두에서 보이는 형태를 사용합니다. 투명하거나 어두운 내부를 가진 색상 원, 두꺼운 아웃라인, 또는 반전된 글자가 있는 단색 블록. 별도 파일 없이도 해결됩니다.
파비콘과 함께 SEO를 완성하려면 JSON-LD 생성기로 구조화 데이터를 추가하고, robots.txt 생성기로 크롤러 접근 설정도 정리해 두세요.
파비콘이 안 보일 때 체크리스트
1. 브라우저 캐시 문제
파비콘은 매우 공격적으로 캐시됩니다. Ctrl+F5(Windows) 또는 Cmd+Shift+R(Mac)로 강제 새로고침하거나, 시크릿 창으로 다시 접속해 확인하세요. Chrome의 경우 chrome://favicon/사이트URL을 주소창에 입력해 직접 확인할 수도 있습니다.
2. 파일 경로와 404 확인
개발자도구 Network 탭을 열고 페이지를 새로고침한 뒤, favicon.svgㆍfavicon-32x32.png 요청이 200 OK로 떨어지는지 확인하세요. 404면 파일이 업로드되지 않았거나 경로가 틀린 것입니다. 파일은 반드시 사이트 루트(https://도메인/favicon.svg)에 위치해야 합니다.
3. <head> 안에 올바르게 선언되었는지
<link rel="icon" href="/favicon.svg" type="image/svg+xml">가 <head> 안에 있어야 하며, type 속성과 href 경로가 실제 파일 타입ㆍ경로와 일치해야 합니다. 루트 기준 절대 경로(/favicon.svg)를 권장합니다.
4. 배포 지연
GitHub PagesㆍVercelㆍCloudflare Pages 등은 배포 후 CDN 캐시가 업데이트될 때까지 몇 분 걸릴 수 있습니다. 5~10분 기다리거나 CDN 캐시를 수동으로 퍼지하세요.
5. iOS 홈 화면 아이콘이 이상할 때
iOS는 apple-touch-icon이 없으면 사이트 스크린샷을 아이콘으로 사용합니다. 반드시 180×180 PNG를 루트에 두고 <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">를 선언하세요. 모서리 둥글기는 iOS가 자동으로 처리하니 정사각형 이미지만 넣으면 됩니다.
6. Google 검색 결과에 반영되지 않음
구글이 새 파비콘을 크롤링ㆍ인덱싱하는 데는 수 일에서 수 주가 걸릴 수 있습니다. Search Console에서 사이트맵을 재제출하면 조금 빨라질 수 있지만, 본질적으로 기다림이 필요합니다.
자주 묻는 질문
여기서 업로드한 이미지가 서버로 전송되나요?
아니요. 이 페이지(spemer-utils 파비콘 생성기)는 업로드한 이미지를 서버로 보내지 않습니다. 모든 처리는 사용자 브라우저 안의 Canvas API에서만 이루어지며, 이미지ㆍ생성된 PNGㆍSVGㆍZIP 등 어떤 파일도 외부 서버로 전송되지 않습니다.
어떤 사이즈를 다운로드해야 하나요?
최소한 favicon-32x32.png(브라우저 탭), apple-touch-icon-180x180.png(iOS 홈 화면), 그리고 SVG favicon이 있으면 충분합니다. PWA를 만든다면 192ㆍ512 사이즈도 함께 사용하세요.
ICO 파일은 왜 없나요?
최신 브라우저(Chrome, Safari, Firefox, Edge)는 모두 PNG와 SVG favicon을 지원합니다. ICO는 구형 IE 호환을 위한 포맷이며, 2020년 이후에는 PNG/SVG만으로 충분합니다.
텍스트 favicon은 한글도 가능한가요?
네. 한글 1~2글자, 영문 1~3글자, 이모지 모두 사용 가능합니다. 글자 수가 많아질수록 작은 사이즈(16×16)에서 가독성이 떨어지니 1~2자를 권장합니다.
SVG 파일을 업로드하면 어떻게 처리되나요?
업로드한 SVG는 favicon.svg로 원본 그대로 유지되어 해상도 손실이 없습니다. 동시에 Canvas에서 래스터화해 PNG 폴백 6종(16/32/48/180/192/512)도 함께 생성합니다.
다크모드 대응 SVG는 어떻게 동작하나요?
텍스트ㆍ이모지 모드에서 "다크모드 SVG variant"를 체크하면, SVG 내부에 @media (prefers-color-scheme: dark) CSS가 포함된 단일 파일이 생성됩니다. 사용자의 OSㆍ브라우저 설정이 다크모드일 때 자동으로 색상이 교체됩니다.