파비콘 크기 가이드모든 브라우저에 맞는 모든 크기 — 2026년 버전
Complete favicon size reference for all browsers, Apple touch icons, PWA manifest icons, and Windows tiles. Get exact pixel dimensions for every context where your favicon appears.
모든 파비콘 크기
Browser Favicons
| 이름 | 크기 | 체재 | 목적 | 메모 | 생성하다 |
|---|---|---|---|---|---|
| Standard Favicon | 16 × 16 px | ICO / PNG | Browser address bar and default tabs | Minimum size; most browsers use this for address bar | 생성하다 |
| High-DPI Favicon | 32 × 32 px | ICO / PNG | Browser tab on high-DPI displays | Used by retina displays and Windows taskbar | 생성하다 |
| Windows Site Icon | 48 × 48 px | ICO | Windows taskbar shortcut icon | Include in .ico file alongside 16×16 and 32×32 | 생성하다 |
| SVG Favicon | 확장 가능 | SVG | Scalable favicon for modern browsers | Supported in Chrome 80+, Firefox 41+, Safari 17+ — scales to any size | 생성하다 |
Standard Favicon
ICO / PNG16 × 16 px
Browser address bar and default tabs
Minimum size; most browsers use this for address bar
파비콘 생성High-DPI Favicon
ICO / PNG32 × 32 px
Browser tab on high-DPI displays
Used by retina displays and Windows taskbar
파비콘 생성Windows Site Icon
ICO48 × 48 px
Windows taskbar shortcut icon
Include in .ico file alongside 16×16 and 32×32
파비콘 생성SVG Favicon
SVG확장 가능
Scalable favicon for modern browsers
Supported in Chrome 80+, Firefox 41+, Safari 17+ — scales to any size
파비콘 생성Apple Touch Icons
| 이름 | 크기 | 체재 | 목적 | 메모 | 생성하다 |
|---|---|---|---|---|---|
| Apple Touch Icon (Universal) | 180 × 180 px | PNG | iOS / iPadOS home screen bookmark icon | Used by iPhone 6 Plus and newer; Apple scales it down for smaller devices | 생성하다 |
| Apple Touch Icon (iPad) | 152 × 152 px | PNG | iPad home screen bookmark icon | — | 생성하다 |
| Apple Touch Icon (iPhone @2x) | 120 × 120 px | PNG | iPhone home screen bookmark icon | — | 생성하다 |
Apple Touch Icon (Universal)
PNG180 × 180 px
iOS / iPadOS home screen bookmark icon
Used by iPhone 6 Plus and newer; Apple scales it down for smaller devices
파비콘 생성PWA Manifest Icons
| 이름 | 크기 | 체재 | 목적 | 메모 | 생성하다 |
|---|---|---|---|---|---|
| Android Chrome Icon | 192 × 192 px | PNG | Chrome for Android home screen icon | Minimum size required in web app manifest for Android installs | 생성하다 |
| PWA Splash / Store Icon | 512 × 512 px | PNG | PWA install prompt and splash screen | Required for Chrome PWA installability criteria | 생성하다 |
| Maskable Icon | 512 × 512 px | PNG | Android adaptive icon (fills the full canvas with safe zone) | Keep key content within the inner 80% safe zone circle | 생성하다 |
Android Chrome Icon
PNG192 × 192 px
Chrome for Android home screen icon
Minimum size required in web app manifest for Android installs
파비콘 생성PWA Splash / Store Icon
PNG512 × 512 px
PWA install prompt and splash screen
Required for Chrome PWA installability criteria
파비콘 생성Maskable Icon
PNG512 × 512 px
Android adaptive icon (fills the full canvas with safe zone)
Keep key content within the inner 80% safe zone circle
파비콘 생성파비콘 팁
- 1Use an .ico file containing 16×16, 32×32, and 48×48 versions for maximum browser compatibility
- 2Always provide a 180×180 Apple Touch Icon — iOS uses it for home screen bookmarks
- 3Include both 192×192 and 512×512 PNG icons in your web app manifest for PWA support
- 4Use an SVG favicon for the best Retina quality on modern browsers with a PNG fallback for older ones
- 5Maskable icons should keep key content within the inner 80% of the image (safe zone)
- 6Avoid fine details at 16×16 — they disappear at that size; opt for a bold, simple mark
- 7Use a transparent background for PNG favicons so they adapt to light and dark browser chrome
파비콘 크기 관련 FAQ
파비콘 크기, 형식 및 브라우저 지원에 대한 일반적인 질문
What size does a favicon need to be?
For modern browsers, you need at minimum: a 32×32 PNG (or .ico containing 16, 32, 48 px), a 180×180 Apple Touch Icon for iOS, and 192×192 and 512×512 PNG icons for PWA manifests. An SVG favicon is a great addition for scalable quality on Retina displays.
What is the difference between favicon.ico and favicon.png?
favicon.ico is a multi-size container format that can hold multiple image sizes (16×16, 32×32, 48×48) in a single file. favicon.png is a single-size PNG file. Modern browsers support both, but an .ico file with multiple sizes provides the best compatibility across all browsers and contexts.
What is a maskable icon and why do I need one?
A maskable icon is a 512×512 PNG where your artwork fills the entire canvas. Android uses these to create "adaptive icons" that are shaped by the device (circle, squircle, etc.). The key requirement is that important content must be within the inner 80% "safe zone" circle, as the outer 10% can be cropped by the OS.
Do I need different favicons for light and dark mode?
You can use an SVG favicon with a <style> block that detects prefers-color-scheme to serve different artwork in dark vs light mode. For PNG/ICO favicons, most sites just use a single version that works on both. A simple white or transparent background icon usually works in both modes.
What is the Apple Touch Icon and when is it used?
The Apple Touch Icon (apple-touch-icon.png) is the image iOS uses when a user adds your website to their home screen as a bookmark. It is declared in your HTML <head> with <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Apple recommends 180×180 px, which it scales down for older devices automatically.
Can I use an emoji as a favicon?
Yes, using an inline SVG favicon. You can set a single character emoji as a vector favicon that renders natively in the browser tab. This works in modern browsers but falls back to the default icon in older browsers. Our favicon generator supports emoji-to-favicon export.
나만의 파비콘 세트를 무료로 생성하세요
ICO, PNG, Apple Touch Icon, PWA 매니페스트 아이콘 등 필요한 모든 파비콘 크기를 하나의 이미지에서 한 번의 클릭으로 생성하세요.