텍스트 모노그램
1~3글자(예: **Co**, **C**, **JS**)를 입력하고, 브랜드 색상을 고르고, iOS와 어울리는 실루엣을 위해 **Rounded**를 선택하세요.
모노그램은 잃을 디테일이 없기 때문에 16px에서 가장 잘 읽힙니다. 굵은 대문자 한 글자나 두 글자 페어를 쓰고, 텍스트와 배경의 대비를 확실히 주세요.
파비콘 생성기
이미지, 텍스트 또는 이모지로 파비콘 생성 — 모든 크기와 붙여넣기용 HTML 제공.
마지막 업데이트
소스
#5B8DEF#FFFFFF미리보기브라우저 탭, 북마크, iOS, Android
16px
32px
48px
64px
180px
favicon.ico · 16/32/48px PNG · 180px Apple touch · 192/512 PWA · manifest · HTML
<head>에 붙여넣을 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="manifest" href="/site.webmanifest" /> <meta name="application-name" content="Coddy" />
파비콘 생성기란?
*파비콘*은 브라우저 탭, 북마크, 방문 기록, 그리고 누군가 사이트를 저장했을 때 iOS / Android 홈 화면에 나타나는 작은 아이콘입니다. 사소해 보이지만 프로젝트의 완성도에 의외로 큰 영향을 주죠: 진짜 파비콘이 있는 것과 없는 것의 차이는 자리표시용 사각형과 완성된 제품의 차이와 같습니다.
현대 브라우저는 파비콘을 여러 사이즈와 포맷으로 요구합니다. 탭과 북마크 아이콘에는 16×16 또는 32×32 PNG, iOS Safari에는 180×180 apple-touch-icon.png, Android의 홈 화면에 추가에는 웹 매니페스트 안의 192×192와 512×512가 필요합니다. 오래된 브라우저와 일부 연동에서는 여전히 다중 해상도 favicon.ico를 요구합니다. 이걸 하나하나 손으로 잘라내려면 일이 정말 많지만 — 파비콘 생성기는 클릭 한 번으로 해 줍니다.
이 생성기는 모든 처리를 브라우저 안에서 합니다. 업로드한 이미지는 로컬에서 <canvas>로 디코딩되고, 모든 출력 사이즈가 옆에서 렌더링되며, 묶음 전체(PNG들, ICO, 웹 매니페스트, README, HTML 스니펫)가 아무것도 업로드하지 않고 .zip으로 패키징됩니다.
사용하면서 자연스럽게 익히게 되는 것들
- 브라우저는 **여러** 파비콘 사이즈를 요구합니다 — 더는 "하나의 정답" 파비콘 이미지란 없습니다.
favicon.ico는 여러 사이즈(16, 32, 48)를 한 파일에 묶을 수 있는 컨테이너 포맷이라, 오래된 호출자도 필요한 크기를 항상 찾을 수 있습니다.- iOS Safari와 Android Chrome은 *서로 다른* 아이콘 URL(
apple-touch-icon.png과manifest.webmanifest안의 항목)을 사용합니다 — 둘 다 갖춰 두세요.
파비콘을 만드는 방법
소스 모드 고르기
1~3글자 모노그램에는 **Text**, 한 글자짜리 아이콘에는 **Emoji**, PNG/JPEG/SVG를 떨어뜨릴 때는 **Image**를 쓰세요. 로고가 이미 있다면 Image 모드가 가장 좋은 시작점입니다.
색상과 모양 설정하기
배경색(그리고 모노그램의 경우 글자색)을 선택하세요. **Square**, **Rounded**, **Circle** 중에서 고르면 됩니다 — 라운드 처리된 사각형은 iOS가 홈 화면 아이콘을 잘라내는 방식과 잘 맞아 자연스럽게 보입니다.
사이트 이름 추가하기
사이트 이름은
application-name메타 태그와 PWAmanifest.webmanifest의 short_name이 됩니다. 사용자가 브라우저 북마크에서 보게 될 브랜드 이름을 쓰세요.모든 사이즈 미리 보기
미리보기 행을 스크롤하면서 16px와 32px(탭이 표시되는 크기)에서도 아이콘이 읽히는지 확인하세요. 그 크기에서 가독성이 떨어진다면 소스를 단순화하세요 — 글자 수를 줄이거나 더 타이트하게 잘라 보세요.
묶음 내려받고 HTML 붙여넣기
**Download favicon bundle (.zip)**을 클릭해 모든 출력 파일을 한 번에 받으세요. 파일들을 사이트 루트에 두고 HTML 스니펫을
<head>에 붙여넣으면 끝납니다.
묶음에 포함된 파일
내려받는 묶음에는 아래 파일들이 모두 들어 있습니다. HTML 스니펫이 이들을 서로 연결해 줍니다 — 일부만 필요하다면 사용 중인 플랫폼에 맞는 것만 남겨 두세요.
| 파일 | 사이즈 | 사용처 | 메모 |
|---|---|---|---|
favicon.ico | 16, 32, 48 | 브라우저 탭 (레거시 폴백) | 다중 해상도 ICO 컨테이너 — 모든 브라우저가 여전히 이 URL을 요청합니다. |
favicon-16x16.png | 16×16 | 브라우저 탭 아이콘 | <link rel="icon" sizes="16x16">을 통해 고밀도 디스플레이에서 사용됩니다. |
favicon-32x32.png | 32×32 | 브라우저 탭 + 북마크 | 레티나 화면에서 메인으로 쓰이는 탭 아이콘입니다. |
favicon-48x48.png | 48×48 | Windows 사이트 타일, 작업 표시줄 | 레거시 호출자를 위해 favicon.ico 안에도 함께 묶여 들어갑니다. |
apple-touch-icon.png | 180×180 | iOS Safari 홈 화면에 추가 | 이 파일이 없으면 iOS는 페이지 스크린샷을 폴백으로 씁니다 — 꼭 함께 제공하세요. |
android-chrome-192x192.png | 192×192 | Android 홈 화면 | manifest.webmanifest에서 참조됩니다. |
android-chrome-512x512.png | 512×512 | PWA 설치 프롬프트 + 스플래시 | 설치 가능한 PWA에 필수입니다. |
site.webmanifest | — | PWA 설치 메타데이터 | 아이콘, 이름, 테마 색상을 나열합니다. <link rel="manifest">로 연결합니다. |
시도해 볼 만한 파비콘 아이디어
이모지 단축
프로젝트 분위기에 맞는 이모지를 고르세요 — 출시에는 🚀, 실험에는 🧪, 문서에는 📚처럼요. 배경은 중성적인 색으로 설정하세요.
이모지 파비콘은 개인 사이트, 해커톤, 사이드 프로젝트에 친근한 느낌을 줍니다. 같은 이모지라도 macOS(Apple)와 Windows(Segoe)에서 다르게 보인다는 점은 기억해 두세요 — 한 번 내보내고 나면, 미리보기에서 본 macOS / Linux / Chrome의 모습 그대로 묶음에 굳혀집니다.
로고 이미지
로고의 PNG나 SVG를 떨어뜨리고, 그림이 가장자리에 닿지 않도록 **Padding** 슬라이더를 늘리고, 로고의 가장자리가 투명하다면 **Fill the background color**를 켜세요.
SVG 입력은 모든 사이즈에서 선명하게 렌더링됩니다. PNG도 잘 동작하지만 원본 해상도를 넘어가면 흐려집니다 — 최소 512×512인 소스에서 시작하세요.
파비콘에서 자주 하는 실수
- 16×16 PNG 하나만 올리고 레티나 디스플레이에서도 선명하길 기대하는 것. 최신 기기는 탭 아이콘을 32px이나 48px로 렌더링하기 때문에 16px 소스를 흐릿한 덩어리로 확대해 버립니다.
apple-touch-icon.png을 빠뜨리는 것. Apple touch icon이 선언돼 있지 않으면 iOS는 페이지 스크린샷으로 폴백합니다 — 보통 보기 흉하게 나오죠.- 파비콘 파일을 하위 디렉터리에 두고
<link rel="icon" href="/images/favicon.ico">로 연결하는 것. 동작은 하지만, 브라우저는 여전히 사이트 루트의/favicon.ico도 함께 찾아봅니다. 루트에도 사본을 두거나, 액세스 로그에 404가 찍히는 것을 감수하세요.
파비콘 생성기 자주 묻는 질문
파비콘이 뭔가요?
파비콘은 브라우저가 페이지 제목 옆에 보여 주는 작은 아이콘입니다 — 탭, 북마크, 방문 기록, 홈 화면 단축에 표시되죠. 이름은 *favorite icon*의 줄임말이며, Internet Explorer 5의 첫 릴리스에서 북마크 용도로 처음 도입됐습니다.
2026년에 실제로 필요한 파비콘 사이즈는 무엇인가요?
최소한: 다중 해상도
favicon.ico(16/32/48), 32×32 PNG, iOS용 180×180 apple-touch-icon.png, 그리고 Android와 설치 가능한 PWA를 위해 site.webmanifest에 선언된 192×192와 512×512 PNG가 필요합니다. 이 도구가 내려주는 묶음에는 이 모두가 포함돼 있습니다.ICO, PNG, SVG 중 무엇을 써야 하나요?
모든 브라우저가
<link rel="icon" type="image/png">을 통한 PNG 파비콘을 지원합니다. 모두 레거시 /favicon.ico URL도 지원하죠. SVG 파비콘은 최신 브라우저에서 지원되며 하나의 파일로 모든 크기에서 선명한 결과를 얻을 수 있습니다 — 로고가 이미 벡터라면 훌륭한 선택이지만, iOS Safari는 여전히 PNG 폴백을 필요로 합니다.왜 파비콘이 갱신되지 않나요?
브라우저는 파비콘을 매우 강하게 캐시합니다. 새 파일을 업로드한 뒤에는 페이지를 강제 새로고침(
Cmd/Ctrl + Shift + R)하거나, 개발자 도구에서 사이트 데이터를 비우거나, 파비콘 URL에 쿼리 문자열을 붙여 보세요(/favicon.ico?v=2). 사이트 앞에 CDN이 있다면 보통 그쪽도 함께 퍼지해야 합니다.Apple touch icon이 꼭 필요한가요?
사이트를 홈 화면에 저장한 iOS 사용자에게 페이지 썸네일 대신 실제 아이콘이 보이길 원한다면 — 네, 필요합니다. Apple touch icon은 180×180이며
/apple-touch-icon.png 경로에 둡니다. 묶음에 포함되어 있습니다.제 이미지가 업로드되나요?
아니요. 이미지는 브라우저 안에서
<canvas>로 디코딩되고, 모든 출력(PNG들, ICO, ZIP, manifest)은 로컬에서 생성됩니다. 어떤 것도 사용자의 기기를 떠나지 않습니다.