파비콘 생성기.

글자 한두 개나 내 로고로 웹사이트와 웹 앱에 필요한 모든 아이콘을 만듭니다. favicon.ico, Apple 터치 아이콘, Android와 마스커블 아이콘, 웹 매니페스트, 그리고 HTML이나 Next.js에 넣을 태그까지요. 로고가 SVG라면 SVG 파비콘도 만듭니다. 브라우저 탭과 iPhone, Android 홈 화면에서 어떻게 보이는지 미리 본 뒤, ZIP 하나로 한꺼번에 내려받으세요. 브라우저 안에서 동작하므로 이미지가 업로드되지 않습니다.

만드는 방법

글자이미지

글자글꼴

모양

사각형둥근 모서리원

배경글자 색

우리 디자인 시스템의 색상

앱 이름

favicon.ico, apple-touch-icon.png, Android용 192와 512, 마스커블 아이콘, site.webmanifest, head.html.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#2F6FEB">

브라우저 안에서 실행됩니다. 여기에 넣은 파일은 업로드되거나 저장되지 않습니다.

파비콘 만드는 방법

무엇으로 만들지 고르세요.
- 글자: 글자 한두 개를 입력하고, 글꼴과 모양(사각형, 둥근 모서리, 원)을 고른 뒤 배경색과 글자 색을 정하세요. 잘 어울리는 색에서 시작하고 싶다면 우리 디자인 시스템의 색을 클릭하면 됩니다.
- 이미지: 로고를 PNG, JPG, WebP, SVG로 추가하고 주변 여백을 조절하세요. 파비콘 배경은 투명하게 할 수 있습니다.
미리보기를 확인하세요. 라이트·다크 모드의 브라우저 탭, iPhone 홈 화면, 원형으로 잘리는 Android 홈 화면입니다.
모든 아이콘을 ZIP 하나로 내려받으세요.
파일을 사이트의 루트 폴더에 넣으세요(대부분의 프로젝트에서는 public/). 페이지에서 HTML 태그나 Next.js metadata를 복사해 프로젝트에 넣으면 됩니다.

ZIP에 들어 있는 것

파일	쓰이는 곳
`favicon.ico`(16, 32, 48픽셀)	브라우저 탭, 북마크, 오래된 브라우저
`favicon.svg`	최신 브라우저의 선명한 탭 아이콘. SVG 로고를 올렸을 때만 생성
`apple-touch-icon.png`(180픽셀)	iPhone이나 iPad 홈 화면에 사이트를 추가했을 때의 아이콘
`android-chrome-192x192.png`와 `512x512.png`	Android 홈 화면과 웹 앱 설치 안내
`maskable-icon-512x512.png`	원이나 다른 모양으로 잘리는 Android 아이콘
`site.webmanifest`와 `head.html`	앱의 이름, 색상, 아이콘과 이를 연결하는 태그

마스커블 아이콘은 글자나 로고를 이미지 가운데 80% 안에 둡니다. Android가 절대 잘라 내지 않는 안전 영역입니다. Apple과 Android 아이콘에는 항상 단색 배경이 들어갑니다. 홈 화면에서는 투명한 부분이 잘 보이지 않기 때문입니다.

Codex로 아이콘 넣기

내려받은 파일을 프로젝트에 넣은 뒤, Codex에게 연결해 달라고 하세요.

파비콘 파일 추가하기

[public/]에 새 파비콘 파일을 넣었습니다: favicon.ico, favicon.svg(있는 경우), apple-touch-icon.png, Android와 마스커블 아이콘, site.webmanifest입니다. 오래된 파비콘과 아이콘 파일을 지우고, head.html의 태그를 [루트 레이아웃]에 추가하고, site.webmanifest의 앱 이름을 [내 앱 이름]으로 바꿔 주세요. 다른 아이콘 참조가 남아 있지 않은지도 확인해 주세요.

Next.js App Router를 쓴다면 HTML 태그 대신 도구에서 metadata와 viewport 코드를 복사하세요.

자주 묻는 질문