이미지를 드래그&드롭하거나 클릭하여 선택하세요
PNG, JPG, SVG, WebP 지원 — 정사각형 이미지 권장
파비콘 만들기 (favicon 생성)
로고 이미지 한 장 올리면 브라우저 탭용·Apple 터치·PWA까지 필요한 크기 전부 만들어 드려요.
파비콘 만드는 법
- 업로드 - 로고 이미지를 올리세요. 배경이 투명한 PNG가 제일 좋아요.
- 미리보기 - 각 크기별로 어떻게 보일지 한 번에 확인할 수 있습니다.
- 다운로드 - 필요한 크기만 골라서 PNG로 받으세요.
- 코드 복사 - 페이지 <head>에 바로 붙여 넣을 HTML 링크 태그를 같이 드려요.
실제로 이런 식이에요
원본: logo.png (512×512)
→ 16×16 (브라우저 탭)
→ 32×32 (북마크·Retina 탭)
→ 180×180 (아이폰 홈화면)
→ 192×192, 512×512 (PWA/안드로이드)
+ HTML 코드: <link rel="icon" href="..."> 복사파비콘 생성기 특징
- 필요한 크기 전부 - 16, 32, 48, 64, 128, 180, 192, 512 픽셀까지 한 번에.
- HTML 코드 포함 - <head>에 바로 넣을 수 있는 링크 태그 자동 생성.
- 선명한 축소 - 바이큐빅 다운샘플링으로 작게 만들어도 흐릿하지 않아요.
- 브라우저 처리 - 서버 업로드 없이 전부 이 페이지 안에서 돌아갑니다.
- 한계점 - SVG 파비콘이나 .ico 멀티사이즈 번들은 아직 지원 안 해요. 투명 배경이 필요하면 PNG 원본으로 올려 주세요.
사이트 로고 파비콘 만들기
파비콘이라는 건 브라우저 탭 왼쪽에 뜨는 그 조그만 아이콘이에요. 북마크 목록, 구글 검색결과 옆에도 같이 나오고, 홈화면에 저장했을 때 앱 아이콘처럼 보이기도 하죠. 사이트 정체성을 한눈에 알려주는 아주 작은 얼굴 같은 존재입니다.
문제는 파비콘 크기가 한두 개가 아니라는 거예요. 브라우저 탭은 16×16이면 되지만 Retina 디스플레이는 32×32, 아이폰 홈화면은 180×180, 안드로이드 PWA는 192×192, 512×512까지 필요하거든요. 로고 한 장 올리면 이 크기들을 한 번에 뽑아주고, <head>에 붙여 넣을 HTML 코드까지 같이 만들어 드려요.
이런 분들한테 맞아요
새 사이트 런칭 준비 중인 개발자, 브랜드 아이콘을 아이폰·안드로이드·웹 전부에 동일하게 맞춰야 하는 디자이너, PWA나 홈화면 설치형 웹앱 만드는 프로젝트에 쓰기 좋아요.
다른 파비콘 생성기랑 비교
| 기능 | 사장나라 | Favicon.io | RealFaviconGenerator |
|---|---|---|---|
| 개인정보 | 브라우저 전용 | 서버 업로드 | 서버 업로드 |
| 크기 | 8종 | 5종 | 다수 |
| HTML 코드 | 예 | 예 | 예 |
| Apple Touch | 예 (180px) | 예 | 예 |
참고 자료
- MDN: Favicon - 파비콘 표준이랑 적용 방법 설명
자주 묻는 질문
어떤 이미지로 올려야 제일 깔끔하게 나오나요?
배경이 투명한 PNG가 가장 좋아요. JPG도 되긴 하지만 투명도가 없어서 흰 배경으로 나옵니다. 정사각형으로, 최소 512×512 크기면 작은 사이즈로 줄여도 선명하게 보여요.
원본 이미지는 얼마나 커야 하나요?
모든 크기에서 선명하게 나오려면 최소 512×512 픽셀을 추천해요. 정사각형 비율이 제일 안전합니다. 가로세로 비율이 다르면 잘리거나 여백이 생길 수 있어요.
크기 다 만들 필요 있나요?
최소한 32×32 하나만 있어도 일반 브라우저엔 충분해요. 근데 아이폰 홈화면(180)이랑 PWA(192, 512)까지 챙기려면 16, 32, 180, 192, 512 이렇게 다섯 개는 넣는 게 좋습니다.
사이트에 어떻게 적용하나요?
다운받은 파일들을 웹서버 루트(또는 /static/)에 올린 다음, 생성된 HTML 코드를 페이지 <head> 안에 붙여넣으세요. 그러면 브라우저가 알아서 탭 아이콘으로 불러옵니다.
올린 이미지가 서버로 전송되나요?
아니요. 전부 브라우저 안에서 처리돼요. 로고 이미지가 기기 밖으로 나가지 않습니다.