bal.pe.kr 파비콘 생성기English

파비콘 완전 가이드 — 사이즈별 용도, ICO vs PNG, manifest, 캐시 문제

업데이트 2026-08-24 · 웹 표준 문서 기준 참고 정보 · 브라우저 구현은 버전에 따라 다를 수 있습니다.

작성 김지광 (운영자)감수 WHATWG·W3C 공개 규격 기준 검토마지막 업데이트 bal.pe.kr 마이크로 SaaS

1. 파비콘은 결국 몇 개를 만들어야 하나

파비콘(favicon, favorite icon)은 브라우저 탭·즐겨찾기·홈 화면 바로가기에서 사이트를 대표하는 작은 아이콘입니다. 1999년 인터넷 익스플로러가 루트 경로의 /favicon.ico를 자동으로 찾아보는 동작을 도입한 뒤 사실상 모든 브라우저가 이 관례를 따르고 있습니다. 문제는 그 뒤로 iOS 홈 화면, Android 홈 화면, PWA 스플래시, Windows 타일처럼 각자 다른 규격이 계속 늘어났다는 점입니다.

2026년 기준으로 실무에서 필요한 최소 세트는 다음 네 덩어리입니다. 이 이상은 대부분 과잉입니다.

  • favicon.ico (16·32·48 멀티사이즈) — 루트에 두는 안전망. HTML 에 링크를 걸지 않아도 브라우저가 알아서 찾습니다.
  • PNG 16·32 — 최신 브라우저가 실제로 선호하는 탭 아이콘.
  • apple-touch-icon 180 — iOS 사파리에서 "홈 화면에 추가" 했을 때 쓰이는 단 하나의 규격.
  • 192 · 512 PNG + site.webmanifest — Android Chrome 홈 화면과 PWA 설치 프롬프트.

2. 사이즈별 용도 한눈에 보기

이 도구가 생성하는 11개 규격이 각각 어디에 쓰이는지 정리했습니다.

사이즈파일명용도ICO
16pxfavicon-16x16.png브라우저 탭·주소창✅
32pxfavicon-32x32.png탭(레티나)·즐겨찾기✅
48pxfavicon-48x48.pngWindows 사이트 바로가기✅
64pxfavicon-64x64.png고배율 데스크톱 탭—
96pxfavicon-96x96.pngGoogle TV·데스크톱 바로가기—
128pxfavicon-128x128.pngChrome 웹스토어·확장—
150pxmstile-150x150.pngWindows 타일—
180pxapple-touch-icon.pngiOS 홈 화면 (Apple Touch)—
192pxandroid-chrome-192x192.pngAndroid 홈 화면·PWA—
256pxfavicon-256x256.pngWindows 고해상도 아이콘—
512pxandroid-chrome-512x512.pngPWA 스플래시·스토어—

표에서 ICO 열에 표시된 16·32·48 은 하나의 favicon.ico 파일 안에 함께 들어가는 규격입니다. 파일이 세 개가 되는 게 아니라, ICO 컨테이너 하나가 세 해상도를 품는 구조입니다.

3. ICO · PNG · SVG — 무엇을 언제 쓰나

ICO: 여러 해상도를 담는 컨테이너

ICO 는 이미지 포맷이라기보다 컨테이너 포맷에 가깝습니다. 파일 하나 안에 서로 다른 크기의 비트맵(또는 PNG)을 여러 장 넣어두면, 운영체제와 브라우저가 상황에 맞는 해상도를 골라 씁니다. 탭에서는 16px 을, 즐겨찾기 목록에서는 32px 을, Windows 바탕화면 바로가기에서는 48px 을 꺼내 쓰는 식입니다.

구조는 의외로 단순합니다. 파일 맨 앞 6바이트가 ICONDIR 헤더(예약값 0, 타입 1, 이미지 개수)이고, 그 뒤로 이미지 개수만큼 16바이트짜리 ICONDIRENTRY 가 이어집니다. 각 엔트리에는 가로·세로 크기, 비트 심도, 데이터 길이, 그리고 파일 안에서 실제 이미지가 시작하는 오프셋이 들어갑니다. 오프셋 방식이라 이미지 데이터를 뒤에 그냥 이어붙이면 됩니다. 재미있는 규격상의 함정이 하나 있는데, 가로·세로가 1바이트 필드라 256px 은 0 으로 기록합니다. 이 도구는 그 규칙까지 지켜서 인코딩합니다.

PNG: 명시적으로 가리키는 규격

apple-touch-icon 이나 manifest 의 icons 배열처럼 "정확히 이 크기의 이 파일"을 지정해야 하는 곳에서는 PNG 를 씁니다. 알파 채널이 깔끔하고 압축률이 좋아 큰 규격(180·192·512)에 적합합니다.

SVG: 있으면 좋지만 대체는 아니다

<link rel="icon" type="image/svg+xml" href="/icon.svg"> 로 벡터 파비콘을 줄 수 있고, CSS 미디어 쿼리로 다크 모드 대응도 가능합니다. 다만 사파리 구버전·일부 안드로이드 런처는 SVG 파비콘을 무시하므로 ICO/PNG 를 대체하지는 못하고 추가로 얹는 용도입니다.

4. HTML head 에 넣는 표준 배치

순서는 중요하지 않지만, 아래 조합이면 사실상 모든 환경을 커버합니다.

<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="theme-color" content="#4f46e5">

sizes="any" 를 붙인 ico 링크는 "이 파일이 여러 해상도를 갖고 있다"는 힌트입니다. 이 힌트가 없으면 일부 브라우저가 ICO 를 단일 해상도로 오해해 SVG 나 PNG 대신 저해상도 ICO 를 확대해 쓰는 일이 생깁니다.

5. site.webmanifest 설정

PWA 설치 프롬프트와 Android 홈 화면 아이콘은 HTML 의 link 태그가 아니라 매니페스트를 봅니다. 최소 구성은 다음과 같습니다.

{
  "name": "My Site",
  "short_name": "My Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ],
  "theme_color": "#4f46e5",
  "background_color": "#ffffff",
  "display": "standalone"
}
  • purpose — any 는 그대로, maskable 은 안드로이드가 원·사각형 등으로 잘라내도 되는 이미지라는 뜻입니다. maskable 로 쓸 이미지는 가장자리 20% 정도를 여백으로 비워두어야 로고가 잘리지 않습니다. 이 도구의 여백 슬라이더가 그 용도입니다.
  • 512px 은 설치 스플래시 화면에도 쓰이므로 빠뜨리면 설치 배너가 아예 안 뜰 수 있습니다.
  • 매니페스트 파일의 MIME 타입은 application/manifest+json 이 권장이지만application/json 으로도 대부분 동작합니다.

6. 파비콘이 안 바뀔 때 — 캐시 대처법

파비콘 교체 후 가장 흔한 질문입니다. 파비콘 캐시는 일반 리소스 캐시와 별도로 관리되고, 브라우저가 상당히 공격적으로 붙잡아 둡니다. 강력 새로고침(Ctrl+Shift+R)으로도 안 바뀌는 게 정상입니다. 아래 순서로 시도하세요.

  1. 쿼리 스트링 붙이기 — /favicon.ico?v=2 처럼 버전을 붙이면 새 URL 로 인식됩니다. 가장 확실하고 부작용이 적습니다.
  2. 파일명 자체 변경 — favicon-2026.ico 처럼 이름을 바꾸고 link 태그를 갱신합니다. CDN 이 끼어 있을 때 특히 효과적입니다.
  3. 파비콘 URL 직접 방문 — 주소창에 https://example.com/favicon.ico 를 직접 열고 새로고침하면 그 항목만 갱신됩니다.
  4. CDN 무효화 — CloudFront·Cloudflare 등을 쓴다면 엣지 캐시를 먼저 비워야 합니다. 브라우저만 비워봐야 소용없습니다.
  5. 서버 헤더 확인 — Cache-Control: max-age=31536000, immutable 로 배포해 놓고 같은 URL 을 재사용하면 사실상 갱신 방법이 없습니다. 이 경우 반드시 파일명을 바꾸세요.

7. 자주 하는 실수 체크리스트

  • 16px 에서 글자를 읽히게 하려는 시도 — 불가능합니다. 워드마크 대신 심볼만 쓰세요.
  • 투명 배경 + 다크 모드 — 검은 로고를 투명 배경으로 내보내면 다크 테마 탭에서 사라집니다. 배경을 채우거나 밝은 색 버전을 따로 쓰세요.
  • 존재하지 않는 파일에 link 걸기 — 생성하지 않은 사이즈의 태그를 복붙하면 404 가 반복 요청됩니다. 이 도구는 실제로 생성한 규격의 태그만 스니펫에 넣습니다.
  • apple-touch-icon 에 투명 배경 — iOS 는 투명 영역을 검게 채웁니다. 180px 은 배경을 채워 내보내는 편이 안전합니다.
  • maskable 여백 부족 — 안드로이드 원형 마스크에 로고 가장자리가 잘립니다. 여백 15~20% 권장.
  • 루트에 favicon.ico 없음 — link 태그를 다 걸었어도, 크롤러·리더·구형 클라이언트는 여전히 루트를 먼저 찾습니다. 하나는 두세요.

8. 이 도구가 하는 일

favigen 은 위 과정을 브라우저 안에서 전부 처리합니다. 이미지는 FileReader 로 읽고, CanvasdrawImage 로 각 규격에 맞춰 리사이즈하고, ICONDIR/ICONDIRENTRY 를 직접 조립해 멀티사이즈 ICO 를 만들고, 무압축 ZIP 컨테이너도 자바스크립트로 직접 씁니다. 외부 이미지 라이브러리도, 서버 왕복도 없습니다. 사내 로고나 미공개 브랜드 자산을 다룰 때 이 점이 중요합니다.

파비콘 만들러 가기 →FAQ 보기