파비콘은 사소해 보입니다. 하나를 배포하면 수백 가지 엣지 케이스가 나타납니다: iOS 홈 화면 아이콘이 흐릿하고, Android 크롬 탭의 색상이 잘못되었으며, Windows 핀은 흐린 16×16을 표시합니다. 이 가이드는 잡음을 제거하고 2026년에 정확히 필요한 것을 다룹니다 — 더 이상도 덜도 아닙니다.

최소 실행 가능 세트

6가지 자산이 사이트 아이콘을 표시할 모든 표면을 다룹니다:

favicon.ico — 내부에 16×16, 32×32, 48×48이 포함된 다중 크기 컨테이너(레거시 브라우저, Windows 탐색기, 고정된 탭).
favicon-16x16.png, favicon-32x32.png — 최신 브라우저 탭.
apple-touch-icon.png (180×180) — iOS 홈 화면, Safari 읽기 목록.
android-chrome-192x192.png, android-chrome-512x512.png — Android 홈 화면, PWA 설치 프롬프트.
site.webmanifest — Android 아이콘을 가리키고 테마 색상을 정의하는 PWA 구성.

이것이 전부입니다. 다른 모든 것(Safari 고정 탭 SVG, 이전 Apple 터치 변형, Windows 타일 이미지)은 레거시입니다. 최신 브라우저는 192 또는 512 PNG로 우아하게 폴백합니다.

2026년에도 .ico가 배포되는 이유

.ico 파일은 다양한 크기의 여러 PNG 이미지를 보유할 수 있는 바이너리 컨테이너입니다. 브라우저가 /favicon.ico를 요청할 때(일부는 기본적으로 여전히 그렇게 함), 한 요청에 3가지 크기를 모두 받습니다. 렌더러는 현재 표면에 가장 잘 맞는 것을 선택합니다 — Windows 탐색기의 경우 48×48, 브라우저 탭의 경우 16×16.

.ico로 이름을 바꾼 PNG는 한 가지 크기만 포함합니다. 브라우저가 관대하기 때문에 대부분 작동하지만, Windows 탐색기와 일부 이메일 클라이언트는 이를 흐릿하게 렌더링하거나 표시를 거부합니다. 일관성을 원한다면 실제 .ico를 배포하세요.

`site.webmanifest`가 하는 일

사용자가 사이트를 Android 홈 화면에 추가하거나 PWA로 설치할 때, 브라우저는 site.webmanifest를 읽어 설치된 앱이 어떻게 보여야 하는지 알아냅니다. 다음을 정의합니다:

name / short_name — 아이콘 아래의 레이블.
icons — 어떤 크기에서 어떤 PNG를 사용할지.
theme_color — 앱이 열려 있을 때 상태 표시줄의 색상.
background_color — 시작 중 스플래시 화면 배경.
display — 일반적으로 standalone이므로 앱이 브라우저 크롬 없이 열립니다.

manifest가 없으면 Android는 apple-touch-icon으로 폴백하고 사이트를 브라우저 창 내에 표시합니다. 있으면 네이티브 앱처럼 보입니다.

HTML 스니펫

모든 파일은 웹 루트에 있습니다. 모든 사이트는 <head>에 이 블록이 필요합니다:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="#YOUR_HEX">

16×16 디자인하기

아름다운 상세한 로고는 16픽셀에서 죽습니다. 그 크기에서 명확하게 읽히는 파비콘을 만드는 규칙:

단일 모양. 원, 정사각형 또는 강한 모노그램. 복합 형태는 피하세요.
높은 명암. 전경과 배경이 최소한 WCAG AA로 분리되어야 합니다. 미묘한 그래디언트는 사라집니다.
안전 여백. 10–20% 패딩을 남기세요. 브라우저는 종종 자신의 1px 테두리를 추가합니다.
텍스트? 16px에서는 전체 단어보다 단일 굵은 글자가 더 잘 작동합니다.

aukimi 파비콘 생성기는 한 이미지 또는 문자에서 30초 이내에 6가지 파일과 HTML 스니펫을 모두 생성합니다. Microsoft ICONDIR 사양에 따라 실제 다중 크기 .ico를 생성합니다(이름을 바꾼 PNG가 아님). 업로드, 크기 선택, zip이 없는 번들 다운로드, 스니펫 붙여넣기 — 완료입니다.

일반적인 실수

캐시 헤더 없이 CDN에서 .ico 제공. 브라우저는 파비콘을 공격적으로 캐시합니다. 버전 관리 URL(?v=2)을 사용하여 재설계 후 새로고침을 강제하세요.
서브도메인당 다른 아이콘. 최상위 apex의 단일 favicon.ico는 일반적으로 사용자가 기대하는 것입니다 — 정체성을 분산하지 마세요.
theme-color 메타 태그 잊기. 모바일 Chrome은 이 값과 일치하도록 브라우저 크롬을 색칠합니다. 이를 건너뛰면 기본 회색이 남습니다.

좋은 파비콘은 가장 좋은 방식으로 지루합니다 — 사용자는 누락되었거나 잘못되었을 때 알아차리고, 올바를 때는 절대 알아차리지 않습니다. 6가지 파일을 배포하고 계속하세요.

2026년 모든 곳에서 작동하는 파비콘 세트

최소 실행 가능 세트

2026년에도 .ico가 배포되는 이유

`site.webmanifest`가 하는 일

HTML 스니펫

16×16 디자인하기

일반적인 실수

관련 기사

창작 스택이 무너졌다: 2026년 4월 말 한 주간의 AI 도구들

2026년 AI 음악과 SFX: 인디 게임 오디오에서 실제로 작동하는 것

2026년 AI 메시 생성: 게임 파이프라인에서 실제로 출시되는 것

최소 실행 가능 세트

2026년에도 .ico가 배포되는 이유

site.webmanifest가 하는 일

HTML 스니펫

16×16 디자인하기

일반적인 실수

관련 기사

창작 스택이 무너졌다: 2026년 4월 말 한 주간의 AI 도구들

2026년 AI 음악과 SFX: 인디 게임 오디오에서 실제로 작동하는 것

2026년 AI 메시 생성: 게임 파이프라인에서 실제로 출시되는 것

`site.webmanifest`가 하는 일