애플 터치 아이콘 가이드: 크기, 투명도, HTML

업데이트: 2026-10-27 · AnyToolsKit

아이폰이나 아이패드에서 누군가 사이트를 홈 화면에 추가하면 iOS는 애플 터치 아이콘을 사용합니다. 몇 가지 흔한 실수만 피하면 180×180 PNG 하나로 모든 최신 기기를 지원할 수 있습니다.

필요한 태그는 하나

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

180×180px PNG를 쓰세요. iOS가 구형 기기와 Spotlight용으로 알아서 축소합니다. 태그가 없어도 사파리는 사이트 루트의 /apple-touch-icon.png를 찾으므로, 파일 이름을 그대로 맞춰 두면 좋은 대비책이 됩니다.

투명 배경도, 둥근 모서리도 넣지 마세요

• iOS가 자체 둥근 사각형 마스크를 적용합니다. 직접 모서리를 둥글게 하면 이중으로 둥글어 보입니다.
• iOS는 투명한 부분을 검은색으로 채워 대부분의 로고를 망칩니다. 항상 불투명한 배경색을 쓰세요.
• 그림 주위에 약 10% 여백을 두어 마스크 가장자리에 닿지 않게 하세요.

파비콘 생성기가 이를 자동으로 처리합니다: 이미지를 여백과 함께 불투명한 배경(색상 선택 가능) 위에 정확히 180px로 배치합니다.

빼도 되는 예전 크기

예전 가이드는 57, 60, 72, 76, 114, 120, 144, 152px 버전을 sizes 속성과 함께 나열했습니다. iOS 6과 초기 아이패드 시절에 필요했던 것입니다. 지금은 180px 파일 하나면 충분합니다. 추가 크기가 해롭진 않지만 관리만 늘어납니다.

precomposed 아이콘

iOS 7 이전 사파리는 apple-touch-icon-precomposed를 쓰지 않으면 광택 효과를 덧씌웠습니다. 이 효과는 사라졌으므로 일반 apple-touch-icon만 있으면 됩니다. 일부 안드로이드 브라우저가 아직 precomposed 이름을 읽기도 하니 사본을 두는 것은 선택입니다.

테스트

1. 아이폰이나 아이패드의 사파리로 사이트를 엽니다.
2. 공유 버튼을 누르고 홈 화면에 추가를 선택합니다.
3. 대화상자 미리보기에 iOS가 쓸 아이콘이 보입니다. 페이지 스크린샷이 보인다면 파일을 찾지 못한 것입니다.