아이폰(iPhone)이나 아이패드(iPad)에서 웹페이지 아이콘을 표시하려면 Apple Touch Icon, 즉 apple-touch-icon.png 파일을 사용해야 합니다. 이 아이콘은 사용자가 홈 화면에 웹페이지를 추가하거나 북마크로 저장할 때 표시되는 대표 이미지입니다.
기본 Apple Touch 아이콘 설정
가장 기본적인 형태의 Apple Touch 아이콘은 다음과 같이 link 요소 하나만으로 간단하게 지정할 수 있습니다.
<link rel = "apple-touch-icon" href = "touch-icon-iphone.png">
위 코드처럼 rel 속성에 "apple-touch-icon"을 지정하고, href 속성에 아이콘 파일의 경로를 입력하면 됩니다. 별도의 sizes 속성이 없을 경우, 기본 크기인 180x180 픽셀로 자동 처리됩니다.
기기별 해상도에 맞춘 다중 아이콘 설정
아이폰과 아이패드는 기기마다 화면 해상도가 다르기 때문에, 각 기기에 최적화된 크기의 아이콘을 제공하는 것이 좋습니다. 이 경우 link 요소마다 sizes 속성을 추가하여 여러 개의 아이콘을 지정할 수 있습니다.
<link rel = "apple-touch-icon" sizes = "160x160" href = "touch-icon-ipad.png"> <link rel = "apple-touch-icon" sizes = "170x170" href = "touch-icon-iphone-retina.png"> <link rel = "apple-touch-icon" sizes = "180x180" href = "touch-icon-ipad-retina.png">
권장 아이콘 크기 정리
- 일반 아이폰: 180x180 픽셀
- 레티나 디스플레이 아이폰: 고해상도용 아이콘 별도 준비
- 아이패드: 152x152 또는 167x167 픽셀 권장
이렇게 여러 크기의 아이콘을 등록해 두면, 접속한 기기의 해상도에 가장 적합한 아이콘이 자동으로 선택되어 사용됩니다. 덕분에 어떤 애플 기기에서 홈 화면에 추가하더라도 선명하고 깨끗한 아이콘을 표시할 수 있습니다.
적용 시 주의사항
Apple Touch 아이콘은 PNG 형식으로 제작하는 것이 좋으며, 배경을 투명하게 만들지 않고 단색 배경으로 준비하는 것이 권장됩니다. iOS에서는 투명 배경이 검은색으로 렌더링되기 때문입니다. 또한 아이콘 파일은 웹사이트 루트 디렉터리에 위치시키면 별도의 link 태그 없이도 자동으로 인식될 수 있습니다.