누군가 당신의 웹사이트를 iPhone 또는 iPad 홈 화면에 추가할 때, iOS는 Apple Touch Icon을 앱과 같은 아이콘으로 사용합니다. 이것이 없으면 iOS는 대신 페이지의 보기 흉한 스크린샷을 찍습니다. 알아야 할 모든 것을 여기에 정리했습니다.
Apple Touch Icon이란 무엇입니까?
Apple Touch Icon은 사용자가 당신의 사이트를 홈 화면에 북마크할 때 iOS 기기가 사용하는 특별한 PNG 이미지입니다. 네이티브 앱 아이콘처럼 작동하며, iOS는 자동으로 시그니처인 둥근 모서리와 광택 효과(이전 iOS 버전에서)를 적용합니다. HTML에서는 다음과 같이 선언합니다.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">필수 크기: 180×180 픽셀
2026년에는 180×180 픽셀 한 가지 크기만 필요합니다. 그 이유는 다음과 같습니다.
- iPhone (Retina) — 120×120 또는 180×180을 사용합니다 (필요한 경우 iOS가 180을 120으로 축소합니다)
- iPad Pro — 167×167을 사용합니다 (iOS가 180을 축소합니다)
- iPad — 152×152를 사용합니다 (iOS가 180을 축소합니다)
iOS는 축소는 잘하지만 확대는 잘하지 못하므로, 가장 큰 크기(180×180)를 제공하는 것이 가장 안전한 접근 방식입니다. 하나의 파일로 모든 기기를 커버할 수 있습니다.
역사적 참고: 과거에는 각 기기(57, 60, 72, 76, 114, 120, 144, 152, 167, 180)마다 별도의 크기가 필요했습니다. 최신 iOS는 스케일링을 충분히 잘 처리하므로 180×180 하나만으로 완벽하게 작동합니다.
파일 형식 요구 사항
- 형식: PNG만 지원합니다 (JPEG도 작동하지만 PNG가 표준입니다)
- 모양: 정사각형 (iOS가 자동으로 둥근 모서리를 적용합니다)
- 투명도: 피하십시오 — iOS는 투명한 영역을 검은색으로 대체합니다
- 파일 이름: 관례적으로
apple-touch-icon.png입니다 (iOS도 이 이름을 자동으로 찾습니다)
HTML 구현
기본 (한 줄)
<link rel="apple-touch-icon" href="/apple-touch-icon.png">명시적 크기 지정
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">자동 검색 (HTML 불필요)
apple-touch-icon.png라는 파일을 웹사이트의 루트 디렉토리에 배치하면, HTML 선언이 없어도 iOS가 자동으로 이를 찾습니다. 하지만 신뢰성을 위해 HTML에 명시적으로 선언하는 것을 여전히 권장합니다.
apple-touch-icon vs apple-touch-icon-precomposed
| 속성 | apple-touch-icon | apple-touch-icon-precomposed |
|---|---|---|
| 광택 효과 | iOS가 광택을 추가합니다 (iOS 6 및 이전) | 광택이 추가되지 않습니다 |
| 최신 iOS (7+) | 광택 없음 (동일한 동작) | 광택 없음 (동일한 동작) |
| 권장 사항 | 이것을 사용하십시오 | 더 이상 사용되지 않으며 필요 없습니다 |
iOS 7 이상에서는 더 이상 광택 효과를 추가하지 않으므로, apple-touch-icon과 apple-touch-icon-precomposed는 동일하게 동작합니다. 그냥 apple-touch-icon을 사용하십시오.
디자인 팁
- 둥근 모서리를 추가하지 마십시오 — iOS가 자동으로 적용합니다. 직접 둥글게 만들면 이중으로 둥근 모서리가 됩니다.
- 투명도를 피하십시오 — 단색 배경색을 사용하십시오. 투명한 영역은 iOS에서 검은색이 됩니다.
- 간단하게 유지하십시오 — 아이콘은 화면에서 약 60px로 표시됩니다. 미세한 디테일은 보이지 않습니다.
- 브랜드 색상을 배경으로 사용하십시오 — 이렇게 하면 아이콘이 어떤 배경화면에서도 돋보이게 됩니다.
- 실제 기기에서 테스트하십시오 — iOS 시뮬레이터는 항상 실제 기기와 일치하지는 않습니다.
흔한 실수
- 투명도 사용 → iOS 홈 화면에서 검은색 배경이 됩니다
- 수동으로 둥근 모서리 추가 → 이중 둥근 모서리 효과
- 잘못된 파일 형식 → SVG는 지원되지 않습니다; PNG를 사용하십시오
- 너무 작음 → 57×57을 제공하면 최신 Retina 화면에서 흐릿하게 보입니다
- 테스트를 잊음 → 항상 실제 iPhone에서 홈 화면에 추가하여 테스트하십시오
다른 사이트들이 어떻게 하는지 확인하십시오
다른 주요 웹사이트들이 Apple Touch Icon을 어떻게 처리하는지 궁금하십니까? Mzu favicondl을 사용하여 Apple Touch Icon을 포함한 모든 웹사이트의 favicon 설정을 확인할 수 있습니다.