애플 터치 아이콘 설정 완벽 가이드 - iOS 홈 화면 추가 시 깨지지 않는 아이콘 만들기
애플 터치 아이콘 설정을 제대로 하지 않으면 아이폰 홈 화면에 추가했을 때 흐릿한 썸네일이 나옵니다. 사이즈, 코드, 캐싱까지 한번에 정리합니다.
웹사이트를 운영하다 보면 방문자가 아이폰에서 "홈 화면에 추가"를 눌렀을 때 아이콘이 깨지거나 흐릿하게 표시되는 경우를 자주 보셨을 겁니다. 또는 사파리 즐겨찾기에 추가했더니 회색 사각형만 나오는 상황도 있습니다. 이런 문제는 대부분 애플 터치 아이콘 설정이 누락되었거나 잘못된 사이즈로 등록되어 있기 때문입니다.
일반 파비콘만 등록하고 애플 터치 아이콘은 따로 신경 쓰지 않는 분들이 많습니다. 하지만 모바일 사용자가 전체 트래픽의 60% 이상을 차지하는 시대에, 홈 화면 아이콘은 사이트의 첫인상이자 재방문을 유도하는 중요한 요소입니다. 작은 차이지만 브랜드 신뢰도에 직접적인 영향을 줍니다.
애플 터치 아이콘이 필요한 이유
애플 터치 아이콘은 iOS 사파리에서 사용자가 홈 화면에 웹사이트를 추가할 때 사용되는 전용 아이콘입니다. 일반 favicon.ico와 별개로 동작하며, 등록되지 않은 경우 iOS는 사이트의 스크린샷을 자동으로 캡처해서 사용합니다. 결과는 대부분 처참합니다.
다음과 같은 상황에서 애플 터치 아이콘이 사용됩니다.
- 아이폰/아이패드 홈 화면에 웹사이트 추가 시
- 사파리 즐겨찾기 화면에 표시될 때
- iOS PWA(Progressive Web App)로 설치될 때
- 일부 메시지 앱에서 링크 미리보기 아이콘으로
애플 터치 아이콘이 없으면 iOS는 페이지 상단을 강제로 캡처해서 아이콘으로 사용합니다. 광고 배너나 헤더가 아이콘이 되는 참사가 벌어지는 이유입니다.
권장 사이즈와 파일 규격
애플은 공식적으로 여러 사이즈의 아이콘을 권장하지만, 실무에서는 180x180 픽셀 PNG 파일 하나만 잘 만들어두면 거의 모든 iOS 기기에서 깔끔하게 표시됩니다. iOS는 큰 이미지를 자동으로 축소하여 사용하기 때문입니다.
| 기기 / 용도 | 권장 사이즈 | 파일명 예시 |
|---|---|---|
| iPhone (Retina HD) | 180x180px | apple-touch-icon.png |
| iPad Pro | 167x167px | apple-touch-icon-167x167.png |
| iPad / iPad mini | 152x152px | apple-touch-icon-152x152.png |
| iPhone (구형 Retina) | 120x120px | apple-touch-icon-120x120.png |
| 기본 fallback | 180x180px | apple-touch-icon.png |
파일 형식 주의사항
반드시 PNG 형식을 사용해야 합니다. JPG나 SVG는 지원되지 않으며, GIF는 정적 이미지로만 표시됩니다. 또한 투명 배경 PNG의 경우 iOS가 자동으로 검은색 배경을 채워 넣기 때문에, 배경색을 명확하게 지정해서 만드는 것이 좋습니다.
HTML 코드 삽입 방법
아이콘 파일을 준비했다면 HTML의 head 영역에 link 태그를 추가하면 됩니다. 가장 간단한 형태는 다음과 같습니다.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
여러 사이즈를 모두 지원하는 코드
다양한 기기를 완벽하게 지원하려면 사이즈별로 link 태그를 여러 개 등록할 수 있습니다.
- <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
- <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
- <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
실제로는 사이트 루트 디렉토리에 apple-touch-icon.png 파일 하나만 180x180 사이즈로 업로드해도 iOS가 자동으로 인식합니다. HTML 코드를 작성하지 않아도 동작한다는 뜻입니다. 하지만 명시적으로 link 태그를 작성하는 편이 캐싱과 디버깅에 유리합니다.
자주 발생하는 실수 4가지
1. 사이즈 미달
76x76 같은 구형 사이즈만 등록해두면 최신 아이폰에서 흐릿하게 보입니다. 최소 180x180 픽셀로 만드는 것이 표준입니다.
2. 투명 배경
로고만 투명 배경으로 저장하면 iOS가 검은색을 채워 넣어 의도와 다른 결과가 나옵니다. 브랜드 컬러로 배경을 채워서 PNG로 저장하세요.
3. 잘못된 경로
서브디렉토리에 있는 사이트(/blog/, /shop/ 등)에서는 절대 경로로 지정해야 합니다. 상대 경로를 쓰면 페이지마다 다른 위치를 참조하게 됩니다.
4. 파일명 오타
apple-touch-icon.png에서 하이픈을 빼거나(appletouchicon), 언더스코어로 바꾸는(apple_touch_icon) 실수가 의외로 많습니다. iOS는 정확한 파일명만 인식합니다.
여러 파일명 변형을 빠르게 만들어보고 싶을 때는 텍스트 변환기로 대소문자나 구분자를 일괄 변경해보면서 표준 명명규칙을 확인하는 것도 방법입니다.
캐시 문제 해결과 검증 방법
아이콘을 새로 등록했는데 아이폰 홈 화면에 추가해도 옛날 아이콘이 그대로 나오는 경우가 흔합니다. iOS와 사파리는 애플 터치 아이콘을 매우 공격적으로 캐싱하기 때문입니다.
캐시 무효화 방법
- 파일명 뒤에 쿼리 스트링 추가: apple-touch-icon.png?v=2
- 파일명 자체를 변경 후 link 태그 갱신
- iOS 사파리 설정에서 "방문 기록 및 웹 사이트 데이터 지우기" 실행
- 홈 화면에 추가된 기존 아이콘을 삭제하고 다시 추가
검증 방법
실제 아이폰이 없어도 다음과 같은 방법으로 확인할 수 있습니다. 첫째, 크롬 개발자 도구의 Network 탭에서 apple-touch-icon.png 요청이 200 응답을 반환하는지 확인합니다. 둘째, 사이트 루트에 직접 접근(예: example.com/apple-touch-icon.png)했을 때 이미지가 정상 로드되는지 확인합니다. 셋째, RealFaviconGenerator 같은 온라인 검사 도구로 점검할 수 있습니다.
가장 확실한 검증은 실제 iOS 기기에서 사파리로 사이트에 접속한 뒤 공유 버튼을 눌러 "홈 화면에 추가"를 직접 시도해보는 것입니다. 시뮬레이터와 실기기 결과가 다른 경우가 가끔 있습니다.
마무리 체크리스트
애플 터치 아이콘 설정은 한번 제대로 해두면 다시 손볼 일이 거의 없습니다. 다음 항목만 점검하면 충분합니다.
- 180x180 픽셀 PNG 파일 준비 (배경색 채우기)
- 사이트 루트에 apple-touch-icon.png 업로드
- head 영역에 link rel="apple-touch-icon" 태그 추가
- 실제 iOS 기기에서 홈 화면 추가 테스트
오늘 당장 할 수 있는 두 가지 액션을 제안합니다. 첫째, 자기 사이트의 루트 URL 뒤에 /apple-touch-icon.png를 붙여서 접근해보세요. 404가 뜨면 지금 바로 등록이 필요합니다. 둘째, 디자인이 마음에 들지 않는다면 브랜드 컬러를 배경으로 한 180x180 PNG를 새로 만들어서 교체하세요. 작은 디테일이 사이트의 전문성을 결정합니다.
