iPhone으로 사파리에서 웹사이트를 열고 홈 화면에 추가했을 때, 어떤 사이트는 선명한 브랜드 아이콘이 뜨고, 내 사이트는 그냥 페이지 스크린샷이 뜨는 경험, 다들 해보셨죠? 이 차이는 바로 Apple Touch Icon 덕분입니다. 새 프로젝트를 준비 중이라면, 잘 만든 사이트들에서 영감을 얻고 싶을 거예요.

하지만 이 아이콘 파일을 찾는 게 항상 쉬운 건 아닙니다. 일반적인 favicon이 /favicon.ico에 있는 것과 달리, Apple Touch Icon은 <link> 태그나 manifest.json 파일 안에 숨어있거든요. URL을 추측하지 않고도 어떤 웹사이트에서든 Apple Touch Icon을 추출하는 방법을 알려드립니다.

Apple Touch Icon을 찾기 어려운 이유

대부분의 개발자는 표준 favicon URL 패턴을 알고 있습니다. 하지만 Apple은 좀 다르게 접근했어요. 아이콘 파일명이 apple-touch-icon.png일 수도, apple-touch-icon-precomposed.png일 수도 있고, 웹 앱 매니페스트 안에 있을 수도 있습니다. 정해진 단일 규칙이 없습니다.

예를 들어 GitHub의 Apple Touch Icon은 루트 디렉토리에 없습니다. https://github.githubassets.com/assets/apple-touch-icon-... 경로에 해시값이 포함된 파일명으로 제공되죠. /apple-touch-icon.png라고 추측했다간 404 에러를 보게 될 겁니다.

Apple Touch Icon이 숨는 세 군데

본격적으로 찾기 전에, 어디를 봐야 하는지 알아두세요:

방법 1: 브라우저 DevTools로 추출하기 (수동 방식)

빠르게 확인할 때 가장 좋은 방법입니다. 웹사이트를 열고, 우클릭 후 '검사'를 선택하거나 (F12 키를 눌러도 됩니다). 'Elements' 탭으로 이동한 뒤 Ctrl+F (Mac은 Cmd+F)로 'apple-touch-icon'을 검색하세요.

그러면 이런 코드를 볼 수 있습니다:

<link rel='apple-touch-icon' sizes='180x180' href='/path/to/icon-180.png'>

href 값을 복사하세요. 만약 상대 경로라면 (예: /path/to/icon-180.png), 사이트의 도메인을 앞에 붙여줍니다. 그 URL을 새 탭에서 열면 아이콘을 얻을 수 있습니다.

Link 태그가 없으면 어떻게 하나요?

특히 최신 PWA 사이트들은 HTML 태그를 생략하고 매니페스트에만 의존하는 경우가 있습니다. 그럴 땐 이것을 찾아보세요:

<link rel='manifest' href='/manifest.json'>

해당 JSON 파일을 열고, sizes: '180x180' 또는 sizes: '192x192'인 객체를 찾으면 됩니다. 그것이 바로 Apple Touch Icon입니다.

방법 2: Mzu favicondl 사용하기 (스마트한 방식)

아이콘을 자주 추출해야 한다면 — 예를 들어 경쟁사 사이트를 분석하거나 디자인 레퍼런스를 수집하는 경우 — 수동 방식은 금방 지겹습니다. 이럴 때 Mzu favicondl이 유용합니다.

웹사이트 URL을 도구에 붙여넣기만 하면, HTML link 태그, manifest.json, 루트 디렉토리 등 세 군데를 자동으로 스캔합니다. 모든 Apple Touch Icon 크기를 찾아서 다운로드 가능한 파일로 제공합니다. 더 이상 DevTools를 뒤지거나 경로를 추측할 필요가 없습니다.

이 기능은 특히 Apple.com처럼 여러 크기(152x152, 167x167, 180x180)의 아이콘을 다른 경로에서 제공하는 사이트에서 유용합니다. Mzu favicondl은 한 번에 모두 가져옵니다.

프로 팁: Precomposed 변형도 확인하세요

오래된 iOS 버전(iOS 7 이전)은 apple-touch-icon-precomposed를 사용했는데, 이는 광택 오버레이를 제거한 버전입니다. 최신 iOS는 이 속성을 무시하지만, 일부 레거시 사이트에서는 여전히 사용합니다. 오래된 사이트에서 아이콘을 추출한다면, 두 rel 값을 모두 확인하세요. Mzu favicondl은 자동으로 처리하지만, 수동으로 한다면 precomposed 태그를 놓치지 마세요.

방법 3: 콘솔 원라이너

터미널을 좋아하는 분들을 위해, DevTools 콘솔에서 실행할 수 있는 간단한 JavaScript 코드를 준비했습니다:

const links = document.querySelectorAll('link[rel*="apple-touch-icon"]);
links.forEach(link => console.log(link.href));

이 코드는 페이지에 있는 모든 Apple Touch Icon URL을 로그로 출력합니다. 아무것도 나오지 않는다면, 사이트가 매니페스트를 사용하고 있을 가능성이 높습니다. 대신 이 코드를 실행해보세요:

fetch('/manifest.json')
  .then(r => r.json())
  .then(m => m.icons.filter(i => i.sizes.includes('180'))
  .forEach(i => console.log(i.src)));

이 코드는 매니페스트를 가져와서 180x180 아이콘(Apple Touch의 표준 크기)만 필터링하여 출력합니다.

추출한 아이콘으로 무엇을 할까

아이콘 파일을 얻었다면, 자신의 디자인을 위한 레퍼런스로 사용할 수 있습니다. 하지만 그냥 복사하지 말고 분석해보세요. 큰 브랜드들이 180x180 픽셀이라는 작은 공간에서 로고를 어떻게 단순화하는지 주목해보세요. Apple은 실루엣을, Google은 'G' 마크를, Stripe은 'S'를 사용합니다.

자신만의 Apple Touch Icon을 설정하려면, Apple Touch Icon: 완벽 설정 가이드에서 필요한 정확한 HTML과 크기를 확인하세요. 그리고 iOS에서 아이콘이 표시되지 않는 문제를 해결 중이라면, Favicon이 안 보여요? 7가지 일반적인 원인과 해결책에서 가장 흔한 문제들을 다루고 있습니다.

결론

웹사이트에서 Apple Touch Icon을 추출하는 것은 어디를 봐야 하는지만 알면 어렵지 않습니다. DevTools로 link 태그에 즉시 접근할 수 있고, 매니페스트는 대체 경로를 제공합니다. 그리고 자주 이 작업을 한다면, Mzu favicondl이 반복 작업을 덜어줄 것입니다.

다음에 iPhone 홈 화면에서 선명한 아이콘을 보게 된다면, 그것을 어떻게 가져올지, 그리고 내 사이트에도 그렇게 멋진 아이콘을 어떻게 만들지 정확히 알게 될 것입니다.