favicon 최적 크기 2026 — 멀티 사이즈 ICO + apple-touch-icon + SVG의 현대 스택
Tomoda Hinata도구 작성자 및 유지 관리자게시 2026년 4월 26일약 3분 읽기
예전엔 favicon.ico 16×16 한 장이면 됐지만, 현재 브라우저 스택은 멀티 사이즈 ICO(16/32/48), iOS 홈 화면용 apple-touch-icon, 어떤 크기에서도 선명한 SVG favicon, PWA용 매니페스트 아이콘을 기대합니다.
이 가이드에서 사용하는 도구
현대 탭이 사용하는 크기
Chrome/Edge: 16/32, Firefox: 16/32, Safari: 16/32, Windows 작업표시줄 핀: 48. ICO에 16/32/48 포함이 충분.
apple-touch-icon 필수성
iOS는 페이지 썸네일 대신 apple-touch-icon을 사용. 180×180 PNG가 정확 매치.
SVG favicon — 선명 + 무료 다크 모드
Firefox 41+, Chrome 80+, Safari 9+, Edge 80+ 지원. SVG 내부 `<style>` + `prefers-color-scheme`로 자동 다크 모드.
PWA 매니페스트 아이콘
192×192 + 512×512 PNG, manifest.webmanifest에서 참조.
최소 모던 셋업
head에 SVG → ICO → apple-touch-icon → manifest 순.
단계
약 1분 소요정사각 512×512 마스터
정사각이 필수.
멀티 사이즈 ICO
16/32/48 통합.
apple-touch-icon
180×180 PNG, 모서리는 iOS가 자동.
사이트 루트 배치
head에 정확히 링크.
| 에셋 | 크기 | 용도 |
|---|---|---|
| favicon.ico (16+32+48) | 5–8 KB | 탭/북마크/핀 |
| favicon.svg | 1–4 KB | 벡터 + 다크 모드 |
| apple-touch-icon.png | 8–15 KB | iOS 홈 |
| icon-192.png | 10–18 KB | PWA Android |
| icon-512.png | 25–60 KB | PWA 스플래시 |
자주 묻는 질문
favicon.svg가 있으면 ICO는 불필요?
필요. 구형 브라우저와 크롤러가 ICO를 기대.
왜 180×180?
iPhone 고해상도 홈 화면의 네이티브 타깃.
ICO에 64를 넣을까?
선택. 분석에서 구형 IE가 0.1% 미만이면 생략.
SVG 다크 모드 작성?
SVG 내부 `<style>`에 `prefers-color-scheme` 미디어 쿼리.
ICO 투명도?
현대 ICO는 알파 채널 지원.
업로드되나요?
아니요.
지금 사용해 보기
Turn any image into a multi-size ICO file
ICO / Favicon Maker이 글은 AI 번역을 포함합니다. 오류가 있으면 알려 주세요.