완벽하게 디자인된 웹 앱을 고해상도 안드로이드 화면에서 열었을 때, 사이트 아이콘이 거대한 흰색 원 안에 갇힌 흐릿한 얼룩처럼 보인 적이 있습니까? 그렇다면 당신의 크기 전략은 잘못된 것입니다.
우리 모두 그런 경험이 있습니다. favicon best size 2026을 검색하면 16x16부터 잘 쓰이지도 않는 76x76 아이패드 크기까지 35개의 다른 PNG 파일을 생성하라고 요구하는 튜토리얼을 만나게 됩니다.
이제 그만하십시오. 이는 대역폭과 개발자 시간의 엄청난 낭비입니다.
브라우저들은 엄청나게 똑똑해졌습니다. 거대한 아이콘 크기 스프레드시트가 필요했던 시대는 끝났습니다. 최신 기기의 99%를 완벽하게 커버하려면 정확히 3개의 크기(그리고 1개의 벡터 형식)만 있으면 됩니다. 제가 현재 프로덕션 앱에서 사용하고 있는 정확한 크기 전략을 안내해 드리겠습니다.
2026년 파비콘 최적의 크기 전략
모든 것을 지배할 단 하나의 픽셀 크기를 제시해야 한다면 512x512일 것입니다. 하지만 이는 약간의 지나친 단순화입니다. 브라우저는 사용자가 새 탭을 열 때마다 하나의 거대한 파일만 다운로드하기를 원하지 않습니다. 그들은 선택지를 원합니다.
단일 크기 대신 가장 좋은 접근 방식은 미니멀리스트 스택입니다. 구성은 다음과 같습니다.
1. 무한한 크기 (SVG)
기본 파비콘은 아예 픽셀 크기를 가져서는 안 됩니다. SVG여야 합니다.
최신 브라우저(Chrome, Firefox, Edge)는 SVG 아이콘을 훨씬 선호합니다. 무한히 확장 가능하고, 6K Pro Display XDR에서도 완벽하게 선명하게 보이며, 다크 모드 지원을 위한 CSS를 포함할 수 있습니다. GitHub를 예로 들어보겠습니다. 그들의 <head>를 검사해 보면, 시스템 테마에 따라 검은색에서 흰색으로 동적으로 전환되는 SVG 아이콘에 크게 의존하고 있음을 알 수 있습니다.
2. 192x192 PNG (핵심 역할)
SVG가 지원되지 않거나 안드로이드가 홈 화면 아이콘을 빌드해야 할 때, 192x192가 마법의 숫자입니다.
왜 192일까요? 정확히 48dp(장치 독립적 픽셀)에 4배의 화면 밀도를 곱한 값입니다. 이는 Web App Manifest의 기본 요구 사항입니다. 모바일에서 매끄러운 '홈 화면에 추가' 프롬프트를 원한다면 192x192 PNG가 반드시 있어야 합니다.
3. 512x512 PNG (스플래시 화면)
사용자가 프로그레시브 웹 앱(PWA)을 설치할 때, OS는 앱이 로드되는 동안 스플래시 화면에 표시할 고해상도 이미지가 필요합니다.
192x192 이미지를 6인치 휴대폰 화면에 늘리면 픽셀화되어 보입니다. 512x512 PNG가 이 문제를 해결합니다. 안드로이드와 iOS가 화질 저하 없이 부드럽게 축소할 수 있는 충분한 픽셀 데이터를 제공합니다.
4. 32x32 ICO (레거시 안전망)
네, 2026년에도 여전히 ICO 파일이 필요합니다. 하지만 16x16, 32x32, 48x48이 포함된 다중 해상도 괴물 파일은 필요하지 않습니다.
간단한 32x32 ICO면 완벽한 폴백(fallback)이 됩니다. 구버전 Safari, 레거시 기업용 브라우저, 그리고 여전히 루트 /favicon.ico 경로를 스크랩하는 RSS 리더를 커버합니다.
나머지를 무시해도 되는 이유
16x16, 180x180(Apple Touch) 또는 Windows Metro 타일 크기에 대해 궁금해하실 수 있습니다.
불편한 진실은 이렇습니다. 최신 iOS 기기는 Apple Touch Icon을 위해 192x192 PNG를 180x180으로 기꺼이 축소합니다. iOS를 위한 특정 패딩 조정이 필요한 디자인이 아니라면 엄밀히 말해 별도의 파일이 필요하지 않습니다. 정확한 파일 유형에 대해 더 깊이 알고 싶다면 웹사이트 아이콘 완전 가이드를 확인해 보십시오.
코드 구현
크기를 아는 것은 전투의 절반에 불과합니다. 브라우저에게 어디서 찾아야 할지 알려주어야 합니다. 다음은 <head> 태그에 넣어야 할 정확한 HTML 스니펫입니다. 5년 전의 20줄짜리 괴물 코드와 비교해서 얼마나 깔끔한지 주목하십시오.
<!-- 레거시 폴백 -->
<link rel='icon' href='/favicon.ico' sizes='32x32'>
<!-- 모던 SVG -->
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<!-- Apple Touch Icon (192x192 재사용 가능) -->
<link rel='apple-touch-icon' href='/icon-192.png'>
<!-- PWA를 위한 Web Manifest -->
<link rel='manifest' href='/manifest.json'>manifest.json 내부에서 더 큰 크기를 매핑합니다:
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}크기 내보내기 모범 사례
치수를 맞추는 것은 쉽습니다. 해당 치수에서 아이콘이 실제로 멋지게 보이도록 하려면 약간의 요령이 필요합니다. 제가 내보낼 때 따르는 몇 가지 규칙은 다음과 같습니다:
- 32x32 단순화: 512x512 로고를 32픽셀로 그냥 축소하지 마십시오. 흐릿한 얼룩이 될 것입니다. 텍스트를 제거하고 세부 묘사를 버리고 핵심 브랜드 마크에 집중하십시오.
- 안전 영역 주의: 192x192 및 512x512 아이콘의 경우, 중요한 아트워크를 캔버스 중앙 80% 이내에 유지하십시오. 안드로이드는 종종 이러한 아이콘에 원형이나 물방울 모양의 마스크를 적용합니다. 로고가 가장자리에 닿으면 잘려나갈 것입니다.
- SVG 최적화: SVG를 미니파이어(minifier)에 돌리십시오. 즉시 로드될 수 있도록 이 파일을 2KB 미만으로 유지하는 것이 좋습니다. 다크 모드 트릭에 대해서는 SVG 파비콘 가이드를 읽어보십시오.
추측은 그만, 생성을 시작하세요
Photoshop에서 수동으로 PNG 크기를 조정하고 매니페스트 JSON 파일을 작성하는 것은 지루한 일입니다. 당신에게는 개발해야 할 더 중요한 것들이 있습니다.
고해상도 로고(가급적 512x512 또는 SVG)가 있다면, 그냥 Mzu favicondl에 끌어다 놓기만 하면 됩니다. 저희 도구는 2026년의 골든 스택(SVG, 192x192, 512x512, 그리고 32x32 폴백)을 자동으로 생성합니다. 심지어 HTML과 JSON 코드도 작성해 줍니다. <head> 태그를 깔끔하게 유지하고, 올바른 기기에 올바른 픽셀을 제공하며, 실제 코드를 작성하는 일로 돌아가십시오.