Apple 터치 아이콘 가이드
누군가가 귀하의 사이트를 iOS 홈 화면에 추가하면 Safari는 favicon.ico가 아닌 apple-touch-icon를 사용합니다. 180×180 PNG(또는 깔끔하게 축소되는 더 큰 사각형)를 배송하고 <head>에 연결하세요.
Apple는 기본 앱과 마찬가지로 웹 클립용 최신 iOS에 마스킹을 적용하지 않지만 아이콘은 여전히 안전 여백이 있는 정사각형이어야 합니다. 둥근 모서리가 아트워크를 자르지 않도록 로고 삽입을 ~10%로 유지하세요.
<link rel="apple-touch-icon" size="180x180" href="/apple-touch-icon.png">를 사용하세요. 단일 180×180 파일에는 현재의 모든 iPhone이 포함됩니다. 옵션인 152×152 및 167×167 항목은 이전 iPad 레이아웃에 도움이 됩니다.
작동 방식
- 1
180×180 PNG 내보내기
파비콘 생성기 또는 이미지 크기 조정기에서.
- 2
사이트 루트에 업로드
favicon.ico와 함께 /apple-touch-icon.png.
- 3
링크 태그 추가
<head>의 <link rel="apple-touch-icon" size="180x180" href="/apple-touch-icon.png">
지금 사용해 보기
apple-touch-icon 생성
파비콘 생성기자주 묻는 질문
apple-touch-icon의 사이즈는 어떻게 되나요?+
현재 iPhone의 경우 180×180 픽셀입니다. 512×512 또는 1024×1024 마스터에서 내보냅니다.
iOS의 경우 PNG 또는 ICO?+
PNG에만 해당됩니다. iOS는 홈 화면 아이콘의 .ico를 무시합니다.
favicon.ico가 여전히 필요합니까?+
예. 탭과 기타 브라우저에서는 여전히 .ico를 사용합니다. Apple-touch-icon은 추가됩니다.