본문으로 바로가기
Bileo Tools
디자인최종 수정 2026-06-05

Favicon 생성기

이 페이지는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

설정

텍스트 / 이모지

최대 2글자 권장

배경색

#3B82F6

텍스트 색

#FFFFFF

배경 모양

글자 크기55%

미리보기

128px
64px
32px
16px

개별 다운로드

HTML 코드

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

텍스트·이모지 입력 또는 이미지 업로드로 favicon.ico와 PNG 7종을 즉시 생성합니다. ZIP 일괄 다운로드·HTML 코드 스니펫 제공.

활용하기

브라우저 탭·홈 화면 아이콘 만들기

파비콘은 브라우저 탭·즐겨찾기·검색 결과에 표시되는 작은 사이트 아이콘으로, 사용자가 여러 탭 중 내 사이트를 빠르게 찾게 해 주는 브랜드 식별 요소입니다. 본 도구는 텍스트나 이모지를 입력하면 16·32·180·192px 등 여러 크기의 PNG를 한 번에 만들어 줘, 별도 디자인 도구 없이도 일관된 아이콘 세트를 갖출 수 있습니다.

여러 크기가 필요한 이유는 사용 위치가 다르기 때문입니다. 16·32px은 브라우저 탭, 180px은 아이폰 홈 화면 추가(apple-touch-icon), 192px 이상은 안드로이드 홈 화면과 PWA용입니다. 작은 크기에서도 알아볼 수 있도록 단순한 형태와 높은 대비로 디자인하는 것이 중요하며, 복잡한 로고는 16px에서 뭉개지므로 핵심 모티프만 남기는 편이 좋습니다. 생성한 파일을 사이트 루트에 넣고 HTML <link>로 연결하면 적용됩니다.

자주 묻는 질문

Favicon이란 무엇인가요?
Favicon(파비콘)은 브라우저 탭, 즐겨찾기, 홈 화면에 표시되는 작은 아이콘입니다. 전통적으로 ICO 형식이 사용되었지만 현재는 PNG도 모든 주요 브라우저에서 지원됩니다. HTML <head>에 <link rel="icon" href="/favicon.ico"> 태그로 연결합니다.
어떤 크기를 사용해야 하나요?
16×16px: 브라우저 탭 기본. 32×32px: 고해상도 탭·Windows 바탕화면. 48×48px: Windows 작업 표시줄. 96×96px: Google TV 등 TV 브라우저. 180×180px: iOS 홈 화면(apple-touch-icon). 192×192px: Android PWA 홈 화면. 512×512px: PWA 스플래시 화면. 이 도구는 7가지 PNG와 ICO(16·32·48px 내장)를 모두 제공합니다.
다운로드한 파일을 어떻게 적용하나요?
ZIP을 풀어 파일을 public/ 폴더에 놓은 뒤, 도구 하단 'HTML 코드'를 복사해 <head> 안에 붙여넣으면 됩니다. Next.js App Router는 app/ 폴더에 favicon.ico 또는 icon.png를 두면 자동 적용됩니다. ZIP에는 install.html 파일도 포함되어 있어 코드 스니펫을 바로 확인할 수 있습니다.
이모지를 그대로 Favicon으로 사용할 수 있나요?
네, 텍스트/이모지 탭에서 이모지(예: 🚀 🎯 💡)를 붙여넣으면 캔버스에 렌더링되어 PNG·ICO로 다운로드됩니다. 단, 이모지 렌더링은 운영체제와 브라우저 폰트에 따라 외형이 다를 수 있습니다.
PNG·JPG·SVG 이미지를 업로드할 수 있나요?
네, '이미지 업로드' 탭에서 PNG·JPG·SVG·WEBP 파일을 드래그앤드롭하거나 클릭해서 업로드할 수 있습니다. 업로드된 이미지는 선택한 모양(사각형·둥근 사각형·원형)으로 클리핑되어 ICO·PNG에 적용됩니다. 이미지 처리는 브라우저 내에서만 이루어지며 서버로 전송되지 않습니다.
다음으로 읽으면 좋은 글

CSS box-shadow 완벽 가이드: 문법부터 실전 예시까지

CSS box-shadow 문법, offset·blur·spread·inset 옵션, 레이어드 쉐도우까지 실무 예시와 함께 정리했습니다. 박스 쉐도우 생성기로 코드를 즉시 추출하세요.

17분 읽기

관련

관련 도구

전체 보기

OG 이미지 생성기

제목·배경·로고를 입력하면 1200×630 오픈그래프(OG) 이미지를 즉시 만들어 PNG로 다운로드합니다. 카카오톡·페이스북·X 링크 카드 미리보기 제공.

CSS 박스 쉐도우 생성기

슬라이더로 그림자 위치·흐림·크기·색상을 조절하면 box-shadow CSS 코드를 즉시 생성합니다.

이미지 포맷 변환기

PNG·JPG·WebP 이미지를 브라우저에서 바로 변환하고 다운로드합니다.

AI 영상 모션 비주얼라이저

AI 영상 도구에 지시할 때 쓰는 카메라 무빙·이징·모션 타이포·전환·룩 용어를 움직이는 데모로 확인하고 프롬프트를 조합해 복사합니다.

읽을거리

관련 글

전체 글 보기

CSS box-shadow 완벽 가이드: 문법부터 실전 예시까지

CSS box-shadow 문법, offset·blur·spread·inset 옵션, 레이어드 쉐도우까지 실무 예시와 함께 정리했습니다. 박스 쉐도우 생성기로 코드를 즉시 추출하세요.

17분 읽기

PNG·JPEG·WebP 이미지 포맷 완전 비교: 언제 무엇을 써야 하나

PNG, JPEG, WebP 세 포맷의 차이를 실무 기준으로 정리했습니다. 용도별 선택 기준표와 브라우저 지원 현황, 무료 온라인 변환 방법까지 한 번에 확인하세요.

22분 읽기

파비콘 만들기 완전 가이드: 사이즈·HTML 적용·무료 생성기

파비콘 권장 사이즈(16×16·32×32·180×180·192×192)부터 HTML head 삽입 코드, PWA 아이콘, Next.js·WordPress 적용법까지 총정리합니다.

21분 읽기