파비콘 생성기 - 이미지에서 ICO 무료 제작

로고 이미지 한 장 올리면 브라우저 탭용·Apple 터치·PWA까지 필요한 크기 전부 만들어 드려요.

이미지를 드래그&드롭하거나 클릭하여 선택하세요

PNG, JPG, SVG, WebP 지원 — 정사각형 이미지 권장

원본 이미지

원본 이미지

브라우저 탭 미리보기

내 웹사이트
+ 새 탭
https://example.com

생성된 파비콘 미리보기 7개 + ICO

다운로드

HTML 코드


  

manifest.json (웹앱 매니페스트)


  
혹시 원하시는 툴이 아니신가요? 챗봇 질문하기로 원하시는 툴을 찾아보세요

파비콘 만드는 법

  1. 업로드 - 로고 이미지를 올리세요. 배경이 투명한 PNG가 제일 좋아요.
  2. 미리보기 - 각 크기별로 어떻게 보일지 한 번에 확인할 수 있습니다.
  3. 다운로드 - 필요한 크기만 골라서 PNG로 받으세요.
  4. 코드 복사 - 페이지 <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나 홈화면 설치형 웹앱 만드는 프로젝트에 쓰기 좋아요.

다른 파비콘 생성기랑 비교

기능FreeToolboxFavicon.ioRealFaviconGenerator
개인정보브라우저 전용서버 업로드서버 업로드
크기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> 안에 붙여넣으세요. 그러면 브라우저가 알아서 탭 아이콘으로 불러옵니다.

올린 이미지가 서버로 전송되나요?

아니요. 전부 브라우저 안에서 처리돼요. 로고 이미지가 기기 밖으로 나가지 않습니다.