Apple 터치 아이콘 가이드
누군가 Safari에서 '홈 화면에 추가'를 탭하면 iOS는 favicon.ico가 아닌 apple-touch-icon를 사용합니다. 180×180 PNG를 배송하고 사이트 루트에 apple-touch-icon.png로 배치한 다음 `<head>`의 `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>`와 연결하세요. favicon generator는 모든 소스 이미지에서 올바른 크기의 PNG를 내보냅니다. 이 가이드에서는 iOS 홈 화면 아이콘 시스템의 모든 세부 사항을 설명합니다.
apple-touch-icon는 favicon.ico와 완전히 별개의 자산입니다. 브라우저 탭은 favicon.ico(또는 연결된 PNG/SVG)를 사용합니다. iOS 홈 화면 설치는 apple-touch-icon를 사용합니다. apple-touch-icon가 없으면 Safari는 페이지 뷰포트의 저해상도 스크린샷을 찍어 이를 홈 화면 아이콘으로 사용합니다. 이는 기본 앱 옆에 비전문적으로 보이는 흐릿하고 브랜드 없는 결과입니다.
Apple는 2007년 iOS 1.1.3에서 apple-touch-icon를 도입했으며 이후 iPhone 및 iPad 화면 밀도가 증가함에 따라 지원되는 크기를 발전시켰습니다. 단일 모든 장치 파일에 대한 현재 권장 사항은 180×180픽셀입니다. 이 크기는 iPhone 6 Plus, iPhone X 및 모든 후속 iPhone 모델에서 60pt @3x 밀도로 표시됩니다. 이전 모델(iPhone SE 1세대, Plus 이전 iPhone)은 2x에서 120×120을 사용합니다. — iOS는 180×180 파일을 자동으로 축소하여 맞춥니다.
iPad 적용 범위의 경우 Apple는 iPad Pro(3x)의 경우 167×167, 표준 iPad의 경우 152×152를 권장합니다. 실제로 apple-touch-icon로 제공되는 단일 180×180 파일은 iOS가 고품질 이중선형 필터링으로 축소되기 때문에 이러한 모든 경우를 수용 가능하게 처리합니다. iPad Pro의 완벽한 픽셀 선명도가 최우선이라면 `<link rel='apple-touch-icon' size='167x167' href='/apple-touch-icon-167x167.png'>` 태그를 추가하세요.
apple-touch-icon에는 PNG 형식이 필수입니다. iOS는 홈 화면 아이콘의 .ico, JPEG, SVG 및 GIF를 무시합니다. 항상 PNG-32(알파 채널 포함) 또는 PNG-24(아이콘 배경이 단색인 경우 투명도 없음)를 내보내세요. 투명성이 지원 및 권장됩니다. 투명한 배경 아이콘을 사용하면 iOS가 이전 iOS 버전에 표준 둥근 모서리 및 광택 효과를 적용할 수 있습니다.
apple-touch-icon에는 안전한 여백이 중요합니다. iOS는 더 이상 이전 광택 오버레이(iOS 7에서 제거됨)를 적용하지 않지만 아이콘을 둥근 직사각형 모양으로 자릅니다. 둥근 모서리에 중요한 부분이 잘리지 않도록 핵심 로고 인세트를 모든 면에서 약 10% 정도 유지하세요. 안전 영역은 180×180 캔버스 내 대략 162×162 픽셀입니다.
도메인 루트에 apple-touch-icon 파일을 배치하는 것이 중요합니다. 링크 태그 href를 통해 모든 URL을 사용할 수 있지만 iOS Safari의 일부 버전과 일부 Apple 크롤러(Spotlight 검색 엔진 통합용)는 HTML 링크 태그를 읽지 않고 루트에서 직접 /apple-touch-icon.png 또는 /apple-touch-icon-precomposed.png를 가져오려고 시도합니다. 파일을 루트에 배치하면 호환성이 가장 좋습니다.
태그의 `precomposed` 변형인 `<link rel='apple-touch-icon-precomposed'>`는 이전 iOS 버전에 아이콘에 추가 시각 효과(광택, 둥근 모서리, 그림자)를 적용하지 말라고 지시합니다. Apple는 iOS 7에서 이러한 효과를 제거했으므로 2026년에는 'apple-touch-icon'와 'apple-touch-icon-precomposed' 간의 구분이 최신 iOS와 관련이 없습니다. 일반 'apple-touch-icon' 상대 값을 사용하세요.
여러 링크 태그를 사용하면 여러 크기 선언이 지원됩니다. 모든 Apple 장치에서 최대 정밀도를 위해 iPhone 6 Plus 이상에서는 `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon-180x180.png'>`, iPad에서는 `<link rel='apple-touch-icon' size='167x167' href='/apple-touch-icon-167x167.png'>`를 선언할 수 있습니다. Pro, 구형 iPad의 경우 `<link rel='apple-touch-icon' size='152x152' href='/apple-touch-icon-152x152.png'>`. iOS는 가장 가까운 일치 항목을 선택합니다.
Apple Watch는 시계 앱 아이콘에 apple-touch-icon를 사용하지 않습니다. 이러한 아이콘은 기본 앱 번들에서 제공됩니다. 그러나 사용자가 Apple Watch 브라우저에서 웹 사이트를 탐색하면 Safari Watch는 북마크 목록에 apple-touch-icon를 표시합니다. 여기서는 동일한 180×180 PNG가 아무런 변경 없이 작동합니다.
Mac의 macOS Safari도 웹 앱으로 Dock에 웹 사이트를 추가할 때 apple-touch-icon를 사용합니다(macOS Sonoma 이상에서는 웹 사이트를 Safari의 웹 앱으로 고정할 수 있습니다). apple-touch-icon는 Dock 아이콘으로 사용됩니다. 이로 인해 apple-touch-icon는 모바일뿐만 아니라 최신 macOS를 사용하는 Mac 사용자에게도 중요합니다.
apple-touch-icon를 업데이트할 때 iOS는 사용자 기기의 이전 아이콘을 캐시하고 사용자가 홈 화면 아이콘을 제거하고 다시 추가하거나 Safari의 캐시를 지우지 않는 한 업데이트를 확인하지 않습니다. 이 캐시에 대한 서버측 제어는 없습니다. 이는 클라이언트측 iOS 동작입니다. 이를 이해관계자에게 전달하면 리브랜딩이 기존 홈 화면 저장 내용에 얼마나 빨리 전파되는지에 대한 기대치를 설정하는 데 도움이 됩니다.
apple-touch-icon를 올바르게 테스트하려면 물리적 iOS 장치 또는 Xcode iOS 시뮬레이터가 필요합니다. 기기에서 Safari를 열고 사이트로 이동한 후 공유 버튼을 탭하고 '홈 화면에 추가'를 선택하세요. 대화상자의 미리보기에 apple-touch-icon가 표시되어야 합니다. 대신 스크린샷이 표시되면 선언된 URL에서 파일에 액세스할 수 없거나 링크 태그가 HTML에서 누락된 것입니다.
favicon generator는 표준 파비콘 패키지의 일부로 180×180 apple-touch-icon.png를 출력합니다. 생성 후 파일을 사이트 루트에 배치하고 링크 태그를 HTML `<head>`에 추가하세요. apple-touch-icon와 함께 제공되는 모든 아이콘 크기에 대한 전체 가이드는 favicon sizes explained 참조를 참조하세요.
작동 방식
- 1
180×180 PNG 생성
로고 또는 브랜드 마크(512×512 PNG 또는 SVG 소스)를 [favicon generator](tool:favicon-generator)에 업로드하세요. 패키지에는 정확히 180×180 픽셀 크기의 apple-touch-icon.png가 포함되어 있어 바로 사용할 수 있습니다.
- 2
안전 지대 패딩 적용
로고가 180×180 캔버스의 각 가장자리에서 최소 10%(18픽셀) 이상 삽입되어 있는지 확인하세요. 이렇게 하면 iOS의 둥근 모서리가 아트워크를 자르는 것을 방지할 수 있습니다. 생성기는 안전 여유를 자동으로 적용합니다.
- 3
파일을 사이트 루트에 배치
apple-touch-icon.png를 사이트의 루트 디렉터리(index.html 또는 홈 페이지를 제공하는 것과 동일한 디렉터리)에 복사합니다. 액세스 가능한 URL은 https://yourdomain.com/apple-touch-icon.png여야 합니다.
- 4
<head>에 링크 태그 추가
HTML `<head>` 안에 `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>`를 추가하세요. 여러 장치 크기의 경우 167×167 및 152×152에 대한 추가 태그도 추가하세요.
- 5
홈 화면에 추가로 테스트
iPhone 또는 iPad에서 Safari를 열고 사이트로 이동한 후 공유를 탭하고 '홈 화면에 추가'를 선택하세요. 미리보기 대화상자에 apple-touch-icon가 표시되어야 합니다. 스크린샷이 표시되면 파일 경로와 링크 태그 구문을 확인하세요.
지금 사용해 보기
apple-touch-icon 생성
파비콘 생성기자주 묻는 질문
apple-touch-icon의 크기는 얼마입니까?+
현재 모든 iPhone의 경우 180×180 픽셀 PNG입니다. 이 단일 파일에는 구형 iPhone 모델(120×120으로 축소) 및 iPad(152×152 및 167×167)도 포함됩니다. iPad Pro 선명도가 중요한 경우 명시적인 167×167 및 152×152 링크 태그를 추가하세요.
apple-touch-icon에는 어떤 형식이 필요합니까?+
PNG에만 해당됩니다. iOS는 홈 화면 아이콘의 .ico, JPEG, SVG 및 GIF를 무시합니다. 정사각형 PNG-32(알파 포함) 또는 PNG-24(단색 배경)를 내보냅니다. 투명성이 지원되며 iOS 홈 화면에 깔끔하게 표시됩니다.
apple-touch-icon.png를 어디에 배치해야 합니까?+
사이트 루트에서 https://yourdomain.com/apple-touch-icon.png에 액세스할 수 있습니다. iOS Safari 및 Apple 크롤러의 일부 버전은 HTML 링크 태그를 읽지 않고 이 경로를 직접 가져옵니다. 링크 태그 href는 모든 경로를 가리킬 수 있지만 루트 배치는 최대 호환성을 제공합니다.
apple-touch-icon가 있는 경우에도 favicon.ico가 필요합니까?+
예. apple-touch-icon는 iOS 홈 화면 설치 전용입니다. 브라우저 탭, 북마크 바, Windows 바로가기 및 iOS가 아닌 모든 컨텍스트는 여전히 표준 링크 태그를 통해 연결된 favicon.ico 또는 PNG/SVG를 사용합니다. 두 자산은 완전히 다른 용도로 사용됩니다.
apple-touch-icon와 apple-touch-icon 사전 구성의 차이점은 무엇입니까?+
사전 구성된 변형은 이전 iOS에 시각 효과(광택, 둥근 모서리)를 적용하지 않도록 지시합니다. Apple는 iOS 7(2013)에서 이러한 효과를 제거했으므로 2026년에는 구분이 부적합합니다. 모든 새 프로젝트에서는 `rel='apple-touch-icon'`를 사용하세요.
내 사이트에 iOS의 apple-touch-icon 대신 스크린샷이 표시되는 이유는 무엇입니까?+
선언된 URL(404 오류 확인)에서 파일에 액세스할 수 없거나, HTML `<head>`에서 링크 태그가 누락되었거나, 파일 형식이 PNG가 아닙니다. URL을 브라우저에서 직접 열어 URL이 올바르게 확인되는지 확인하고 링크 태그가 `rel='apple-touch-icon'`를 사용하는지 확인하세요.
apple-touch-icon에 안전 영역 패딩이 필요합니까?+
예. iOS는 아이콘을 둥근 직사각형으로 자릅니다. 핵심 로고 인셋을 모든 면에서 약 10% 정도 유지하세요(180×180 캔버스에 패딩 약 18픽셀). 이렇게 하면 둥근 모서리가 브랜드 마크의 중요한 부분을 자르지 않게 됩니다.