모바일 홈 화면 파비콘 사이즈: 2026 완벽 가이드

즐겨 찾는 웹 앱을 iPhone 홈 화면에 저장했는데, 정제된 로고가 나오기를 기대했습니다. 그런데 돌아온 것은 페이지 전체의 작은 스크린샷 한 장입니다. 픽셀이 뭉개져 알아보기조차 어렵습니다. 원인은 디자인이 아닙니다. 모바일 홈 화면 요구사항에 맞는 favicon 사이즈를 잘못 출시했기 때문입니다.

모바일 홈 화면은 사이트를 설치된 앱처럼 다룹니다. 따라서 작은 썸네일에서 큰 런처까지 무너지지 않고 표시될 수 있는 고해상도 정사각형 이미지가 필요합니다.

"모바일 홈 화면 아이콘"의 실제 의미

16x16 또는 32x32 픽셀짜리 favicon(브라우저 탭)은 모바일 홈 화면 아이콘과는 완전히 다른 문제입니다. 브라우저 탭 아이콘은 작은 사각형 공간에 자리 잡아 다른 일곱 개 탭과 경쟁합니다. 반면 홈 화면 아이콘은 앱 그리드 위 60–120 픽셀 슬롯에 배치되며, 둥근 모서리, 드롭 섀도우, OS 레벨 마스킹이 적용되는 경우가 많습니다.

사용자가 Safari에서 "홈 화면에 추가"를 탭하거나 Chrome에서 "앱 설치"를 누르면, OS는 특정 HTML 선언을 찾습니다. 적합한 사이즈를 찾지 못하면 페이지 스크린샷(iOS)이나 표준 favicon(Android)으로 폴백합니다. 둘 다 프로페셔널해 보이지 않습니다.

표준 Favicon 사이즈가 여기서 실패하는 이유

대부분의 개발자는 32x32 ICO 파일이면 favicon으로 "충분하다"고 배웁니다. 이 파일은 브라우저 탭, 북마크, 주소 표시줄에서는 잘 작동합니다. 그러나 iOS가 홈 화면 아이콘을 요구하는 순간, 훨씬 큰 Apple Touch Icon을 기대합니다.

32x32 ICO 파일은 형식상 정사각형이지만, Retina 홈 화면 런처에 필요한 픽셀 밀도가 부족합니다. iOS가 이를 확대하면 사용자들이 "미완성" 웹 앱이라고 느끼는 흔한 흐릿한 결과물이 만들어집니다.

두 모바일 생태계, 두 가지 사이즈 규칙

모바일 홈 화면 요구사항은 두 진영으로 나뉘며, 각자 고유한 사양을 가지고 있습니다.

iOS: Apple Touch Icon

Apple이 문서로 밝힌 동작은 정사각형 PNG를 가리키는 HTML <link rel='apple-touch-icon'> 태그를 찾는 것입니다. 최신 iOS(iOS 8+)는 180x180 사이즈를 iPhone 홈 화면의 사실상 표준으로 취급합니다. 이보다 작으면 iOS는 이를 거부하거나 확대하며, 그 품질 저하는 예측 가능한 수준에서 나타납니다.

iPad의 경우 역사적으로 여러 사이즈가 필요했습니다. 오늘날은 180x180 PNG 하나만 출시해도 대부분의 현재 기기를 커버할 수 있습니다. iOS가 더 큰 이미지를 매끄럽게 축소해 주기 때문에 apple touch icon 180x180 전략이 그대로 통합니다.

Android: Web App Manifest

Android는 W3C가 정의한 Web App Manifest를 사용합니다. Web App Manifest 스펙에 따르면, icons 멤버는 명시적인 sizes, type, purpose 속성을 가진 이미지 객체의 배열을 받습니다.

Android가 일관되게 기대하는 두 가지 사이즈는 다음과 같습니다.

192x192 — 홈 화면 런처와 대부분의 앱 서랍용
512x512 — PWA를 게시할 경우 스플래시 화면과 Play Store 목록용

Android의 적응형 형태(원, 스퀴클, 둥근 사각형)를 그대로 통과하는 'purpose': 'maskable' 아이콘도 함께 제공하려면, 안전 영역이 미리 확보된 512x512 PNG가 필요합니다.

최소 모바일 홈 화면 구성

180x180 PNG — Apple Touch Icon(iPhone 및 iPad 커버)
192x192 PNG — Android 홈 화면 런처
512x512 PNG — Android 스플래시, Play Store, maskable 변형
SVG favicon — 선택 사항, 브라우저 탭 및 다크 모드 지원용
32x32 ICO — 구형 데스크톱 브라우저 레거시 폴백

HTML 구현

최소한의 작동하는 스택은 다음과 같습니다. <head> 안에 배치하세요.

&lt;link rel='apple-touch-icon' href='/icons/apple-touch-icon-180.png' sizes='180x180'&gt;
&lt;link rel='icon' type='image/svg+xml' href='/icons/favicon.svg'&gt;
&lt;link rel='icon' type='image/png' href='/icons/favicon-96.png' sizes='96x96'&gt;
&lt;link rel='manifest' href='/site.webmanifest'&gt;

site.webmanifest에는 두 Android 사이즈를 모두 선언해야 합니다.

{
  'icons': [
    { 'src': '/icons/icon-192.png', 'sizes': '192x192', 'type': 'image/png' },
    { 'src': '/icons/icon-512.png', 'sizes': '512x512', 'type': 'image/png' },
    { 'src': '/icons/icon-maskable.png', 'sizes': '512x512', 'type': 'image/png', 'purpose': 'maskable' }
  ]
}

rel='icon' 구문은 HTML living standard를 따르며, 이 때문에 레거시 포맷 대신 type과 sizes 속성을 사용합니다.

모범 사례

512x512에서 먼저 디자인하세요. 가장 큰 사이즈에서 시작하면 180, 192, 96으로 깔끔하게 축소됩니다.
JPEG가 아닌 PNG를 사용하세요. 홈 화면 아이콘은 OS 레벨 마스킹을 위해 투명도가 필요합니다. JPEG는 단색 배경만 허용합니다.
precomposed 태그는 생략하세요. apple-touch-icon-precomposed는 더 이상 사용되지 않습니다. iOS는 수년 전에 글로시 렌더링을 제거했습니다.
manifest를 검증하세요. sizes의 오타는 Android 홈 화면 설치를 조용히 망가뜨립니다. Chrome DevTools의 Application 탭으로 확인하세요.
캐시를 적극적으로 무효화하세요. 모바일 OS는 홈 화면 아이콘을 몇 주 동안 캐시합니다. 버전이 명시된 URL(예: ?v=2)은 리디자인 후 강제로 새로 고침하게 만듭니다.

사이트가 현재 무엇을 서빙하고 있는지 확인하려면 모든 브라우저용 favicon 테스터 가이드에서 DevTools 검증 절차를 확인할 수 있습니다. 패키지 자체를 생성하려면 Mzu favicondl에서 한 번의 클릭으로 다섯 개 파일을 모두 내보낼 수 있습니다.

모바일 홈 화면용 favicon 사이즈는 수십 개의 파일을 생성하는 것이 아닙니다. 올바른 3~4개의 PNG를 출시하고, HTML과 manifest에 올바르게 선언하며, OS가 실제로 그것을 찾을 수 있는지 검증하는 것이 핵심입니다.