utilrepo
한국어
❤️ 후원
홈이미지

ICO / favicon 생성기

이미지에서 여러 크기의 .ico 파일을 생성합니다. 16/32/48/64/128/256px를 PNG로 임베드하며, Apple과 Android 아이콘, manifest 스니펫이 포함된 favicon 키트도 함께 만들 수 있습니다.

Loading…

모든 처리는 브라우저 내부에서 실행됩니다 — 파일·입력은 서버로 전송되지 않습니다.

사용법

정사각형 소스 이미지(PNG·JPEG·WebP·브라우저 디코딩을 통한 SVG)를 떨어뜨립니다. 이상적으로는 **512×512 이상**입니다. 본 도구는 각 ICO 크기(16·32·48·64·128·256 px)로 다운스케일하고 각 크기를 PNG로 인코딩한 뒤 Windows ICONDIR 형식의 단일 `.ico` 컨테이너로 패킹합니다. 개별 크기를 켜고 끌 수 있습니다. 대부분의 현대 브라우저는 16과 32만(16 px favicon과 32 px 고 DPI 변형) 렌더링하므로 16/32만 포함된 ICO는 보통 1~3 KB, 전체 6개 크기 팩은 15~40 KB입니다. 다운로드는 프로젝트의 `public/`이나 `static/` 디렉터리에 바로 넣을 수 있는 단일 `favicon.ico` 파일입니다.

완전한 favicon 설정에는 **favicon 키트** 옵션을 활성화하세요. `.ico` 외에 본 도구는 `apple-touch-icon`(180 × 180 px), Android Chrome(192 × 192 px와 고 DPI 홈 스크린 변형의 512 × 512 px)용 PNG 파일과 올바른 이름·크기·MIME 타입이 미리 채워진 `site.webmanifest` 스니펫을 생성합니다. 모두 사이트 루트에 두고 포함된 스니펫의 표준 `<link>` 태그를 HTML `<head>`에 추가하세요. 현대 브라우저, iOS Safari, Android Chrome 홈 스크린 설치 모두 올바른 아이콘을 가져옵니다. 모든 처리는 브라우저 안에서 끝나므로 소스 이미지가 네트워크 엔드포인트에 도달하지 않습니다. 미공개 브랜드 자산도 안전하게 사용할 수 있습니다.

예제

최소 현대 설정 — 16/32만

입력
source:       logo-512.png (512 × 512, solid background)
sizes:        16 ✓, 32 ✓, 48, 64, 128, 256
favicon kit:  off
출력
favicon.ico — 2.1 KB
  contains: 16×16 PNG + 32×32 PNG
  total ICO entries: 2

HTML to add to <head>:
  <link rel="icon" href="/favicon.ico" sizes="any">

That's it. Modern Chrome / Firefox / Safari will pick this up,
and it'll show in the browser tab and bookmark list.

사이드 프로젝트, 블로그, 사내 도구에는 **16/32만으로 충분**합니다. 현대 브라우저는 몇 년 전 ICO 컨테이너에서 더 큰 크기를 선택하는 것을 중단했습니다. 48 / 64 / 128 / 256 크기는 웹 앱이 자신을 네이티브 파일 핸들러로 등록하던 시절(오늘날 거의 사용되지 않는 기능)의 Windows 파일 탐색기 아이콘 미리보기에만 중요했습니다. 단일 `<link rel="icon" href="/favicon.ico" sizes="any">` 태그와 URL 루트(`/favicon.ico`, 하위 디렉터리가 *아닌*)의 `favicon.ico` 파일이 모든 브라우저가 여전히 자동 감지하는 것입니다. `sizes="any"` 속성은 브라우저에 "이 단일 파일은 필요한 어떤 크기든 갖고 있으니 그냥 가져가라"고 알리며 일부 브라우저가 내는 드문 "favicon 크기 불일치" 경고를 억제합니다.

풀 favicon 키트 — iOS + Android + manifest

입력
source:        brand-logo-1024.png (1024 × 1024, transparent bg)
sizes:         16, 32 (in .ico)
favicon kit:   on
site name:     "Utilrepo"
출력
Generated files:
  favicon.ico                 (1.8 KB)
  apple-touch-icon.png        (180 × 180, 11 KB)
  android-chrome-192x192.png  (192 × 192, 13 KB)
  android-chrome-512x512.png  (512 × 512, 64 KB)
  site.webmanifest            (250 B)

HTML snippet for <head>:
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">

본격적인 제품, 마케팅 사이트, PWA에는 favicon 키트가 적합합니다. `apple-touch-icon.png`은 iOS Safari가 사용자가 사이트를 홈 스크린에 추가할 때 사용하는 것으로, 이것이 없으면 iOS는 페이지의 일반 스크린샷으로 폴백하며 비전문적으로 보입니다. 192 / 512 Android Chrome 아이콘은 `site.webmanifest`에서 참조되며 사용자가 PWA를 설치할 때 Chrome이 읽습니다. 매니페스트는 앱 이름, 테마 색상, 표시 모드(`standalone`은 전체 화면, `browser`는 탭형)도 선언합니다. 다운로드 후 편집해 추가 메타데이터를 채울 수 있습니다. 더 깊은 PWA 지원에는 별도의 "maskable" 아이콘(Android의 원형 아이콘 마스크 안에서 깔끔하게 렌더링되도록 패딩을 추가)이 필요할 수 있지만 본 도구의 범위 밖입니다.

작은 로고만 있을 때 — 64×64 소스

입력
source:    legacy-logo.png (64 × 64, transparent bg, hand-drawn at this resolution)
sizes:     16 ✓, 32 ✓, 48, 64 ✓, 128, 256
warning:   "source is smaller than 256 — upscaling 128 / 256 not recommended"
출력
favicon.ico — 3.4 KB
  contains: 16×16, 32×32, 64×64 (skipped 128 / 256)

The 16 and 32 entries are downscaled — sharp.
The 64 entry is at native resolution — sharpest.
Larger sizes were not generated because upscaling produces blur.

다운스케일은 좋아 보이고 업스케일은 그렇지 않습니다. 64 px 소스 이미지는 128 / 256 항목을 생성하지 말아야 합니다. 업스케일된 출력은 또렷한 다운스케일 작은 크기 옆에서 부드럽고 픽셀화되어 보이며 — 브라우저가 어느 크기를 선택하느냐에 따라 아이콘이 "일관성 없이" 보입니다. 본 도구는 소스 해상도가 요청된 ICO 크기보다 낮을 때 경고하고 해당 항목을 기본으로 건너뜁니다. 수정은 로고를 더 높은 해상도로 다시 그리거나 벡터화하는 것입니다. Inkscape나 Adobe Illustrator 같은 추적 도구는 작은 래스터 로고를 아이콘 용도로 충분히 벡터화할 수 있습니다. 원본 아트워크가 정말 분실되었다면 제한을 받아들이고 16/32/64만 포함된 ICO를 출시하세요.

자주 묻는 질문

ICO 파일 형식이 무엇이고 왜 여전히 존재하나요?

**ICO**는 1985년 Windows 1.0과 함께 도입된 Microsoft 컨테이너 형식입니다. 원래 사양은 시스템 아이콘(폴더·드라이브·시작 메뉴)용 16·32·48 px 크기의 비압축 BMP 스타일 비트맵을 저장했습니다. Windows Vista(2007년)에서 Microsoft는 ≥ 256 px 크기에 **PNG 인코딩 페이로드**를 허용하도록 형식을 확장해 고해상도 아이콘의 파일 크기를 극적으로 줄였습니다. 이 형식은 웹 시대에도 살아남았습니다. 1999년 IE 5 이후 **Internet Explorer는 사이트 루트에 `/favicon.ico`를 요구**했기 때문입니다. Netscape는 호환성 유지를 위해 나중에 관례를 채택했습니다. 그 이후 모든 브라우저는 HTML에 `<link rel="icon">` 태그가 없어도 `/favicon.ico`를 자동으로 요청합니다. 이것이 대부분의 사이트가 폴백으로 여전히 포함하는 이유입니다. 현대 브라우저는 명시적인 `<link>` 태그를 통해 PNG·SVG favicon도 받지만 `.ico`는 최소 공통분모 기본값으로 남아 있습니다.

ICO 대 PNG 대 SVG favicon — 어느 것을 사용해야 하나요?

**최대 호환성**에는: 폴백으로 `/favicon.ico`에 `.ico`를 출시하고 추가로 PNG(iOS용 apple-touch-icon, Android Chrome 192/512)용 명시적인 `<link>` 태그, 선택적으로 SVG. **현대 전용 사이트**(IE·레거시 Edge 지원 불필요)에는: 단일 SVG favicon을 `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`로 Chrome 80+, Firefox 41+, Safari 12+에서 동작하며 가장 작은 파일(보통 < 1 KB)입니다. SVG favicon은 `prefers-color-scheme`도 지원하므로 아이콘이 다크·라이트 모드에 적응할 수 있습니다. 어떤 ICO도 따라할 수 없는 기능입니다. 트레이드오프는 SVG의 복잡성입니다. 복잡한 다중 레이어 SVG는 16 px에서 올바르게 렌더링되지 않을 수 있습니다. 작은 세부가 사라지기 때문입니다. 출시 전 Chrome DevTools에서 16 × 16 줌으로 테스트하세요. **권장**: ICO + apple-touch-icon PNG가 99%의 경우를 커버합니다. SVG는 현대 사용자용 보너스입니다.

왜 favicon은 `/static/icons/`가 아닌 `/favicon.ico`에 있나요?

역사적 기본값입니다. Internet Explorer 5(1999년)는 경로 `/favicon.ico`를 하드코딩하고 HTML이 언급하든 말든 모든 페이지 로드에서 **자동 GET 요청**을 발행했습니다. 다른 브라우저는 호환성을 위해 이 동작을 모방했습니다. 오늘날에도 Chrome·Firefox·Safari 모두 HTML에 `<link rel="icon">`이 없으면 `/favicon.ico`를 자동 요청합니다. 즉 favicon을 `/static/favicon.ico`에 두려면 명시적인 `<link rel="icon" href="/static/favicon.ico">`로 기본 조회를 재정의해야 하며 암묵적인 `/favicon.ico`에 대한 404는 매 페이지 로드마다 서버에 도달합니다. 실용적인 접근: 다른 정적 자산이 다른 곳에 있어도 `favicon.ico`는 루트 URL에 둡니다. 현대 정적 사이트 생성기(Next.js·Gatsby·Hugo·Astro)는 `public/`이나 `static/`에 둔 파일을 URL 루트로 자동 복사해 이를 쉽게 만듭니다.

브라우저는 어느 ICO 크기를 표시할지 어떻게 결정하나요?

각 브라우저는 자체 규칙을 내장하지만 **"표시 대상 이상의 가장 작은 크기, 모두 더 작으면 사용 가능한 가장 큰 것"**으로 수렴합니다. 표시 대상은 맥락에 따라 다릅니다. 브라우저 탭은 16 × 16(고 DPI 디스플레이는 32 × 32), 즐겨찾기 목록은 16, 기록 드롭다운은 16, 주소창의 자물쇠 아이콘은 16, OS 수준 단축 키(Windows 작업 표시줄 핀, macOS dock)는 32 또는 48, 위의 모든 고 DPI 버전은 2× / 3× 스케일. Chrome과 Firefox는 최근접 매치 알고리즘을 사용하고, Safari는 사용 가능하면 32를 선호하며 16으로 폴백합니다. Edge는 ICO의 선언된 `bitCount`를 존중해 여러 비트 깊이가 존재할 때 32비트(알파 채널) 항목을 선호합니다. 실용적인 규칙: **항상 16과 32를 모두 포함**하고, 브라우저 favicon에 더 큰 크기는 무시하고(대신 iOS에는 PNG `apple-touch-icon` 사용), 단일 크기가 어디서나 올바르게 보일 것이라고 신뢰하지 마세요.

새 favicon을 배포해도 업데이트되지 않습니다 — 왜인가요?

브라우저는 favicon을 다른 자산보다 훨씬 적극적으로 캐시합니다. `/favicon.ico` 요청은 브라우저의 favicon 프리페처가 동작하는 방식 때문에 캐시 무효화 쿼리 문자열을 우회하는 경우가 많으며, 일부 브라우저는 HTTP `Cache-Control` 헤더와 관계없이 favicon을 24시간 이상 캐시합니다. 신뢰할 수 있는 수정은 **파일명을 변경**하는 것입니다(예: `favicon.v2.ico`). 그리고 `<link>` 태그를 업데이트하세요. 대부분의 정적 사이트 생성기는 콘텐츠 해시된 파일명을 통해 자동으로 처리합니다. 암묵적 요청을 깨뜨리지 않고는 이름을 변경할 수 없는 정식 `/favicon.ico` 위치에는 우회책으로 `<link href>`에 `?v=2`를 추가하고 사용자가 결국 새로 고치기를 신뢰합니다. 기업 프록시의 기업 사용자는 며칠간 옛것을 계속 볼 수도 있습니다. 개발 중에는 Chrome DevTools → Application → Storage → Clear site data로 즉시 갱신을 강제할 수 있습니다.

favicon 소스는 정사각형이어야 하나요, 어떤 종횡비가 동작하나요?

**네, 항상 정사각형**입니다. 비정사각형 소스는 인코더에 의해 늘어나거나 잘립니다. 둘 다 보기 좋지 않습니다. 512 × 512 이상에서 정확히 **1:1** 종횡비를 목표로 하세요. 아이콘의 시각적 콘텐츠는 약간 작은 "안전 영역" 안에 자리해야 하며 여유를 둬야 합니다. 역사적으로 각 변에 약 10% 패딩 — 아이콘은 다양한 맥락(탭·즐겨찾기·작업 표시줄·홈 스크린)에 나타나며 빡빡한 크롭은 답답하게 느껴지기 때문입니다. 특히 iOS는 자체 둥근 모서리 클립과 그림자를 추가하므로 절대적인 모서리의 콘텐츠는 잘립니다. maskable-icon 사양(W3C, 2019)은 Android의 홈 스크린 원형 아이콘 마스크용 원의 안전 영역으로 문서화된 패딩으로 이를 공식화합니다. 원형 마스크 안에서 완전히 안전하게 렌더링하려면 40% 패딩. 일반 favicon(maskable이 아닌)에는 10~15% 패딩이 편안한 중간입니다.

관련 개념

**favicon 관례**는 웹 에코시스템에서 가장 오래 생존한 비공식 표준 중 하나입니다. Internet Explorer 5가 즐겨찾기 사이트용으로 `/favicon.ico` 자동 감지를 탑재한 **1999년 3월**에 Microsoft가 도입했으며 HTML4 자체보다 오래되었고 2026년에도 거의 변하지 않고 생존하고 있습니다. 이름은 "favorites icon"의 축약입니다. Internet Explorer의 즐겨찾기는 "favorites"라 불렸고 자동 가져온 아이콘이 *favorites icon*이었습니다. 몇 달 안에 Netscape와 Opera가 같은 경로 기반 자동 감지를 채택하면서 관례는 영구화되었습니다. HTML4는 같은 해에 명시적 재정의를 허용하는 `<link rel="shortcut icon">`을 추가했고, 현대 HTML은 `<link rel="icon">`을 사용합니다(`shortcut` 접두어는 비추천이지만 여전히 받아들여짐). Apple은 2008년에 iPhone OS 1.1.3에서 **apple-touch-icon** 관례를 도입해 iOS 홈 스크린 아이콘에 고해상도 소스를 제공했고, Google은 2014년 초기 PWA 추진의 일환으로 **Android Chrome 아이콘**으로 뒤따랐습니다.

**ICO 컨테이너 형식** 자체는 1985년 시대의 Microsoft 엔지니어링 결정을 반영합니다. 헤더는 리틀 엔디안(Intel x86 네이티브 순서)이며 항목 테이블은 고정 16바이트 레코드를 사용하고 폭/높이 필드는 단일 바이트입니다. 즉 255 px 초과 크기에는 0이 256을 의미하는 묘한 인코딩이 필요합니다(256 px 초과 크기는 표현 불가). Vista에서 도입된 PNG 페이로드 확장이 크기 제한을 우회하는 이유는 PNG 헤더 자체가 진짜 크기를 포함하고, Windows와 현대 브라우저가 ICO 디렉터리 항목이 아닌 임베드된 PNG 내부에서 그것을 읽기 때문입니다. 대부분의 현대 아이콘 생성 라이브러리(본 도구 포함)는 PNG 페이로드만 배타적으로 내보냅니다. 원본 BMP 스타일 페이로드보다 작기 때문입니다. 비압축 256 × 256 RGBA는 256 KB지만 등가 PNG는 보통 30 KB 미만입니다. Microsoft의 **.cur**(커서) 형식은 같은 컨테이너 구조를 공유하며 핫스팟 좌표를 인코딩하는 2개의 추가 바이트를 가집니다.

3가지 **아이콘과 자산 인접 개념**이 favicon 작업과 교차합니다. **SVG favicon**(2019년 이후 주요 브라우저에서 지원)은 현대적 대안입니다. 품질 저하 없이 임의 크기로 스케일되고 SVG에 임베드된 CSS를 통해 `prefers-color-scheme`에 응답할 수 있는 단일 파일입니다. 트레이드오프는 SVG favicon이 복잡한 브랜드 로고가 가끔 요구하는 풍부한 색과 그래디언트 세부를 표현할 수 없다는 점입니다. 브라우저 탭에서 한자나 이모지와 함께 16 × 16으로 렌더링되기 때문입니다. **프로그레시브 웹 앱(PWA) 매니페스트**(W3C 표준, 2016년)는 apple-touch-icon이 시작한 것을 공식화합니다. 설치 가능한 웹 앱의 이름·아이콘·테마 색상·표시 모드를 선언하는 JSON 파일(`site.webmanifest` 또는 `manifest.json`)입니다. Chrome DevTools의 Lighthouse 감사는 유효한 favicon과 완전한 매니페스트 둘 다 확인합니다. 이를 고치는 것이 종종 첫 PWA 준비 승리입니다. 마지막으로 **maskable 아이콘**(W3C, 2019년)은 Android의 원형 아이콘 클립 마스크가 콘텐츠를 잘라내지 않도록 아이콘 내부에 문서화된 안전 영역을 도입합니다. 매니페스트에서 `"purpose": "maskable"`을 선언하면 아이콘이 이 패딩으로 설계되었음을 Chrome에 알리며 Android가 다른 경우 적용하는 "흰 사각 테두리가 있는 아이콘" 폴백을 피합니다.

관련 도구

이미지 리사이저 / 변환

이미지

이미지 리사이즈, 포맷 변환(JPEG / PNG / WebP), 압축을 지원합니다. 파일은 브라우저 밖으로 전송되지 않습니다.

QR 코드 생성기

이미지

텍스트, URL, Wi-Fi, 이메일용 QR 코드를 생성합니다. 모든 처리는 브라우저 안에서 이루어지며 PNG/SVG 다운로드를 지원합니다.

SVG 옵티마이저

이미지

SVGO로 SVG를 최적화합니다. 편집기 메타데이터 제거, 좌표 반올림, 크기 감소를 적용하면서 렌더링은 유지합니다.

EXIF 뷰어 / 제거기

이미지

JPEG / HEIC / TIFF에 포함된 EXIF(카메라·GPS·촬영 시각·렌즈)를 표시하고, 메타데이터를 제거한 사본을 내려받을 수 있습니다.