파비콘 생성기

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

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

생성 결과

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

파비콘이란?

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

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✅ 기본26+✅ 기본26+✅ 기본
favicon-32x32.png폴백폴백폴백폴백폴백
favicon.ico폴백폴백폴백폴백폴백
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)로 강제 새로고침하거나, 시크릿 창으로 다시 접속해 확인하세요.

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도 만들어 주나요?
네. 16ㆍ32ㆍ48 PNG를 한 파일에 임베드한 favicon.ico가 생성 결과 카드와 ZIP에 함께 들어갑니다. 최신 브라우저는 PNG와 SVG만으로 충분하지만, 구형 브라우저나 사내 인트라넷, 일부 메일 클라이언트는 아직 ICO만 읽는 경우가 있어 기본으로 넣어 뒀습니다.
텍스트 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개까지 생성합니다. 다양한 포맷ㆍ복사ㆍ다운로드 지원.

바로가기 →