Apple Touch 아이콘은 방문자가 사이트를 iPhone 홈 화면에 추가할 때 사용할 이미지를 명시합니다. 브라우저 탭 파비콘이나 웹 앱 매니페스트의 아이콘과는 별도입니다.
180×180 한 가지 크기면 충분합니다
180×180픽셀은 고해상도 원본으로 널리 쓰입니다. iOS가 더 작은 표시 공간에 맞게 축소하므로 대부분의 프로젝트는 선언 하나만 유지하면 됩니다.
예전 권장 사항은 57×57부터 152×152까지 여덟 파일을 각각 sizes 속성과 함께 나열했습니다. 이런 변형은 이제 불필요합니다. 같은 결과를 위해 HTML을 늘리고 추가 요청을 발생시킵니다.
파일은 PNG여야 합니다. iOS는 이 아이콘에 SVG나 WebP를 사용하지 않으며 JPEG는 평면 그래픽의 선명한 가장자리를 손상시킵니다.
불투명한 배경을 사용하세요
투명 배경은 버전과 표시 환경에 따라 예상 밖의 결과를 낼 수 있습니다. 홈 화면에서 원하는 모습으로 표시하려면 직접 선택한 불투명 배경 위에 이미지를 배치하세요.
내보내기 전에 아이콘과 불투명 배경을 하나로 합치면 됩니다. 브랜드 색상을 사용하거나 심벌이 다채롭다면 흰색을 선택하세요. 이미지 주위에 약 10% 여백을 두어 답답하지 않게 만드세요.
모서리는 직접 둥글게 만들지 마세요. iOS가 자체 둥근 마스크를 적용합니다. 이미 둥근 파일은 곡률이 이중으로 적용되어 모서리가 어색해집니다.
삽입할 태그
페이지의 head에 link rel="apple-touch-icon" href="/apple-touch-icon.png" 한 줄이면 충분합니다. 파일 하나만 제공할 때 sizes 속성은 선택 사항입니다.
아이콘 아래 이름을 지정하려면 meta name="apple-mobile-web-app-title" content="브랜드 이름"을 추가하세요. 이 태그가 없으면 iOS는 페이지 제목을 사용하며, 제목이 길면 잘려 보일 수 있습니다.
루트에도 apple-touch-icon.png라는 이름으로 파일을 두세요. iOS는 태그를 찾지 못하면 favicon.ico와 마찬가지로 이 주소에서 파일을 찾습니다.
아이콘이 업데이트되지 않는 이유
iOS는 아이콘을 강하게 캐시하며 이미 홈 화면에 추가된 바로가기는 저절로 바뀌지 않습니다. 새 버전을 테스트하려면 바로가기를 삭제하고 Safari 데이터를 지운 다음 사이트를 다시 추가하세요.
아이콘이 계속 표시되지 않으면 세 가지를 확인하세요. 파일이 404가 아닌 200으로 응답하는지, 콘텐츠 유형이 image/png인지, robots.txt 규칙이나 인증으로 차단되지 않는지 확인해야 합니다.
LFFavicon 검사기는 공개 URL에서 이런 항목을 검사하고 실제로 가져온 아이콘을 보여줍니다.
공식 참고 자료
자주 묻는 질문
apple-touch-icon을 여러 크기로 만들어야 하나요?
대부분의 프로젝트는 고해상도 180×180 파일 하나면 iOS가 작은 크기를 생성할 수 있습니다. 지원 대상 기기에서 테스트하세요.
Android도 apple-touch-icon을 사용하나요?
Android의 Chrome은 대체 수단으로 사용할 수 있지만 웹 매니페스트 아이콘을 먼저 읽습니다. 공식 방식에 따라 192×192와 512×512 아이콘을 매니페스트에 선언하세요.
SVG를 Apple Touch 아이콘으로 사용할 수 있나요?
아니요. iOS는 이 태그에 래스터 PNG를 요구합니다. SVG는 선명도와 다크 모드 지원을 제공하는 데스크톱 브라우저 파비콘에 사용하세요.