서버 로그를 확인하다가 apple-touch-icon-152x152.png와 같이 이상할 정도로 구체적인 파일에 대한 404 에러가 쏟아지는 것을 본 적이 있으신가요? 아마 당황해서 디자인 툴을 열고 Apple의 끝없는 기기 라인업을 만족시키기 위해 로고의 수십 가지 변형을 내보냈을 것입니다.
이제 그만하세요.
공식 문서는 역사적으로 개발자들에게 모든 단일 화면 해상도에 대해 고유한 이미지를 생성하도록 강요했습니다. 그 결과 iPad Mini, iPhone Pro 등 모든 기기를 위한 링크로 가득 찬 비대한 <head> 태그가 만들어졌습니다. 이 apple touch icon sizes guide에서는 2026년에 그러한 접근 방식이 왜 완전히 구식인지 보여드리겠습니다.
결정적인 Apple Touch Icon 크기 가이드
사용자가 iPhone에서 '홈 화면에 추가'를 탭하면 Safari는 사이트를 나타내는 특정 PNG 파일을 찾습니다. 파일을 제공하지 않으면 iOS는 웹페이지의 보기 흉하고 읽기 힘든 스크린샷을 생성합니다.
수년 동안 표준적인 조언은 방대한 파일 목록을 생성하는 것이었습니다. 구형 iPhone용 120x120, iPad용 152x152, iPad Pro용 167x167, 최신 iPhone용 180x180이 있었습니다. 이는 리포지토리를 어지럽히는 유지보수의 악몽이었습니다.
현대의 '원 사이즈' 전략
현대 iOS 개발의 현실은 이렇습니다. Apple의 렌더링 엔진은 이미지를 축소하는 데 놀라울 정도로 뛰어납니다. 더 이상 모든 단일 해상도를 제공할 필요가 없습니다.
고해상도 이미지를 제공하면 iOS가 자동으로 계산하여 사용자의 특정 기기에 완벽하게 맞게 축소합니다. 오늘날 실제로 생성해야 하는 유일한 크기는 180x180 픽셀입니다.
이 크기는 가장 큰 iPhone Pro Max 모델에서 요구하는 @3x 해상도에 해당합니다. 구형 iPad가 152x152 아이콘을 요청하면 단순히 180x180 파일을 가져와서 축소합니다. 시각적 차이는 인간의 눈으로는 문자 그대로 인지할 수 없습니다.
실제 증명: GitHub의 방식
제 말만 믿지 마세요. GitHub, Stripe 또는 Vercel과 같은 주요 기술 회사의 소스 코드를 검사해 보세요. 레거시 Apple 아이콘의 거대한 블록을 찾을 수 없을 것입니다. 그들은 iOS 기기에 대해 정확히 하나의 파일만 제공합니다.
여러분이 사용해야 할 정확한 HTML은 다음과 같습니다:
<!-- 2026년에 필요한 유일한 Apple Touch Icon -->
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>이 한 줄이 과거 6줄의 코드를 대체합니다. 대역폭을 절약하고 HTML을 정리하며 시장에 있는 모든 iOS 기기를 만족시킵니다. 정확한 HTML 배치에 대해 더 깊이 알고 싶다면 Apple Touch Icon을 위한 완벽한 설정 가이드를 확인하세요.
과거 크기 vs 2026년 표준
왜 우리가 오래된 크기를 버릴 수 있는지 이해하려면 Apple의 하드웨어가 어떻게 발전해 왔는지 살펴보세요. 다음은 레거시 요구 사항과 오늘날 우리가 실제로 배포하는 것의 비교입니다.
| 대상 기기 | 레거시 크기 | 2026년 조치 |
|---|---|---|
| 구형 iPhone (@2x) | 120x120 | 무시 (iOS가 180px을 축소) |
| 구형 iPad (@2x) | 152x152 | 무시 (iOS가 180px을 축소) |
| iPad Pro (@2x) | 167x167 | 무시 (iOS가 180px을 축소) |
| 최신 iPhone Pro (@3x) | 180x180 | 필수 |
180x180 아이콘을 위한 디자인 규칙
크기를 올바르게 맞추는 것은 절반의 성공일 뿐입니다. iOS는 이 아이콘들을 표준 브라우저 파비콘과 다르게 취급합니다. 표준 로고의 크기만 조정하면 iPhone 홈 화면에서 깨져 보일 가능성이 높습니다.
- 투명도 제로: iOS는 홈 화면 아이콘에 대해 투명한 배경을 지원하지 않습니다. 투명한 PNG를 업로드하면 Apple은 빈 공간을 강제로 검은색으로 채웁니다. 항상 단색 배경색을 사용하세요.
- 둥근 모서리 금지: 이미지의 모서리를 미리 둥글게 만들지 마세요. 완벽한 정사각형을 업로드하세요. iOS는 디자인 위에 시그니처 '스쿼클(squircle)' 마스크를 자동으로 적용합니다. 미리 둥글게 만들면 이상한 이중 둥근 모서리가 생깁니다.
- 안전 영역 준수: Apple이 마스크를 적용하기 때문에 가장자리에 너무 가까운 로고는 잘려나갑니다. 주요 그래픽을 중앙에 유지하고 모든 측면에 약 20~30 픽셀의 여백을 남겨두세요.
Android 크기는 어떻게 하나요?
개발자들이 흔히 하는 실수는 Apple Touch Icon을 Android 기기에 사용하려고 하는 것입니다. 구형 Android 버전은 Apple 아이콘으로 대체되었을 수 있지만 현대의 Android는 전적으로 Web App Manifest에 의존합니다.
Android는 192x192 및 512x512 아이콘이 필요합니다. 180x180 Apple 아이콘이 여기서 두 가지 역할을 하도록 강요하지 마세요. 분리해서 유지하세요. Android 요구 사항에 대한 자세한 내용은 PWA 아이콘 요구 사항 가이드에서 읽을 수 있습니다.
아이콘을 복잡하게 만들지 마세요
우리는 픽셀이 완벽한 레거시 해상도를 쫓는 데 너무 많은 시간을 낭비합니다. 웹은 발전했고 브라우저는 10년 전보다 더 똑똑해졌습니다.
단일 고품질 180x180 PNG를 생성하세요. 단색 배경인지 확인하고 로고를 중앙에 유지하며 <head>에 링크하세요. 정확한 여백을 얻기 위해 Photoshop이나 Figma를 만지작거리고 싶지 않다면 로고를 Mzu favicondl에 놓기만 하세요. 안전 영역을 자동으로 처리하고 투명도를 제거하며 표준 웹 파비콘과 함께 iOS가 기대하는 정확한 180x180 파일을 출력합니다.