파비콘 생성기

이미지, 텍스트, 이모지로 favicon을 만듭니다. 16×16부터 512×512까지 PNG와 SVG로 다운로드하고, HTML 임베드 코드도 한 번에 생성합니다.

클릭하거나 이미지를 끌어다 놓으세요
PNGㆍJPGㆍSVGㆍWebP 지원(정사각형 권장)

생성 결과

위에서 옵션을 선택하고 파비콘 생성을 눌러주세요.

파비콘이란?

파비콘(favicon)은 브라우저 탭, 즐겨찾기, 검색 결과, 모바일 홈 화면 등에 표시되는 작은 아이콘입니다. 사이트의 정체성을 한눈에 알리는 가장 작은 브랜딩 요소이며, SEO 측면에서도 검색 결과 클릭률(CTR)에 영향을 줍니다.

2026년 권장 favicon 세트

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 / EdgeSafari (macOS)FirefoxiOS SafariAndroid Chrome
favicon.svg✅ 기본✅ 기본✅ 기본14+✅ 기본
favicon-32x32.png폴백폴백폴백폴백폴백
apple-touch-icon-180x180.png❌북마크❌✅ 홈 화면폴백
android-chrome-192x192.pngPWA❌❌❌✅ 홈 화면
android-chrome-512x512.pngPWA❌❌❌✅ 스플래시
site.webmanifest✅ PWA일부일부일부✅ PWA

SVG를 기본으로 두고 PNG를 폴백으로 깔아두면 전 플랫폼 커버가 끝납니다. iOS 홈 화면에 추가되는 경우만 apple-touch-icon이 별도로 필요합니다.

실제로 잘 보이는 파비콘 디자인 원칙

가장 까다로운 제약은 16×16픽셀입니다. 모든 디자인 결정은 가장 작은 크기에서 먼저 판단한 뒤 위로 확대해야 합니다. 512×512에서 아름다운 디테일이 16×16에서는 뭉개진 덩어리로 변하는 경우가 많습니다.

피해야 할 흔한 실수

파비콘과 함께 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ㆍ브라우저 설정이 다크모드일 때 자동으로 색상이 교체됩니다.

연관 유틸리티

JSON 포매터ㆍ변환기

JSON 정렬ㆍ압축, YAMLㆍCSVㆍXML 변환을 한 페이지에서. 형식 자동 인식.

바로가기 →

Base64 인코더ㆍ디코더

텍스트와 파일을 Base64로 인코딩ㆍ디코딩합니다. 자동 판별 지원.

바로가기 →

UUID 생성기

UUID v4ㆍv7ㆍNIL을 한 번에 1~10,000개까지 생성합니다. 다양한 포맷ㆍ복사ㆍ다운로드 지원.

바로가기 →