애플 터치 아이콘 생성기

iOS 기기에서 홈 화면에 추가될 때 사용되는 아이콘을 쉽게 만들어보세요

권장: 1024x1024 픽셀 이상의 정사각형 이미지

미리보기

애플 터치 아이콘 미리보기 내 웹사이트

애플 터치 아이콘이란 무엇인가요?

애플 터치 아이콘은 iOS 기기 사용자가 웹사이트를 홈 화면에 추가할 때 표시되는 아이콘입니다. 이 아이콘은 웹사이트를 앱처럼 보이게 만들어 사용자 경험을 향상시킵니다.

애플 터치 아이콘 사용 방법

  1. 이 도구를 사용하여 애플 터치 아이콘을 생성합니다.
  2. 생성된 아이콘을 다운로드하고 웹사이트에 업로드합니다.
  3. HTML의 <head> 섹션에 다음 코드를 추가합니다:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

2025년 기준 권장 아이콘 크기

최신 iOS 기기를 지원하기 위해 다음과 같은 크기의 아이콘을 준비하는 것이 좋습니다:

필수 크기

  • 180x180 픽셀 - iPhone 기본 크기
  • 167x167 픽셀 - Retina iPad

권장 추가 크기

  • 512x512 픽셀 - 고해상도 디스플레이
  • 256x256 픽셀 - 고해상도 디스플레이
  • 192x192 픽셀 - Android 기기 호환성
  • 152x152 픽셀 - iPad
  • 144x144 픽셀 - 구형 고해상도 디스플레이
  • 128x128 픽셀 - 기본 아이콘 크기

애플 터치 아이콘 제작 팁

  • PNG 형식 사용: 애플 터치 아이콘은 반드시 PNG 형식으로 제작해야 합니다. 투명도를 지원하지만, 배경색을 넣는 것이 권장됩니다.
  • 크기 최적화: 가능하면 512x512 픽셀 크기로 제작하면 iOS가 필요에 따라 자동으로 크기를 조절합니다.
  • 둥근 모서리: iOS는 자동으로 아이콘에 둥근 모서리를 적용합니다. 직접 둥근 모서리를 적용할 필요가 없습니다.
  • 단순한 디자인: 작은 크기에서도 식별 가능한 단순하고 명확한 디자인을 사용하세요.
  • 여백 고려: 아이콘 주변에 약간의 여백을 두어 iOS가 적용하는 둥근 모서리에 의해 중요한 요소가 잘리지 않도록 하세요.

웹 앱 매니페스트와의 통합

최신 웹 표준에 맞게 웹 앱 매니페스트(manifest.json)에도 아이콘을 정의하는 것이 좋습니다:

{
  "name": "내 웹사이트",
  "short_name": "웹사이트",
  "icons": [
    {
      "src": "/apple-touch-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/apple-touch-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}