iPhone 홈 화면에 웹 앱을 추가했는데 흐릿하고 깨진 아이콘을 본 적이 있다면, apple touch icon 180x180 설정이 잘못되었거나 아예 없는 경우가 대부분입니다. 예전에는 iOS를 만족시키기 위해 수십 개의 PNG 파일을 favicon 패키지로 만들어 배포하곤 했습니다. 정말 시간 낭비였죠.

2026년 기준으로 말씀드리자면, Apple Touch Icon 파일은 단 하나만 있으면 됩니다. apple touch icon 180x180 크기가 바로 그 '황금 표준'입니다. iOS는 이 단일 파일을 구형 기기에서는 자동으로 축소하고, 최신 하드웨어의 고해상도 레티나 디스플레이에서는 원본 그대로 사용합니다.

더 넓은 관점은 Apple Touch Icon Sizes Guide에서 이미 다뤘지만, 오늘은 이 특정 180픽셀 파일 하나만으로 충분한 이유를 깊이 파헤쳐 보겠습니다.

apple touch icon 180x180이란?

apple touch icon 180x180은 iOS에서 사용자가 웹사이트를 홈 화면에 추가할 때 사용하는 정사각형 PNG 파일입니다. Safari가 바로가기를 만들 때, 단순히 기본 favicon을 가져오지 않습니다. 대신, 앱 아이콘 역할을 할 특정 고해상도 이미지를 찾습니다.

Apple은 iPhone 6 Plus와 함께 180x180 픽셀 크기를 도입했습니다. 최신 iPhone은 고DPI 레티나 화면을 사용하기 때문에, 표준 32x32 favicon을 앱 아이콘 크기로 확대하면 톱니 모양이 그대로 드러나 보기 흉해집니다. 180픽셀 정사각형은 모든 iOS 기기에서 선명하게 보일 만큼 충분한 픽셀 밀도를 제공합니다.

iOS가 이 단일 파일을 확대/축소하는 방법

3x 레티나 디스플레이가 없는 구형 iPhone에서는 어떻게 될지 궁금하실 겁니다. 모든 과정은 완전히 자동으로 이루어집니다. iPhone 8(2x 레티나 스케일 사용)이 아이콘을 요청하면, iOS는 180x180 PNG를 가져와 내부적으로 120x120으로 축소합니다.

별도의 152x152 또는 120x120 파일을 제공할 필요가 없습니다. Apple의 렌더링 엔진이 다운스케일링을 완벽하게 처리합니다. 하나의 큰 파일만 제공하면 빌드 프로세스가 단순화되고, 소스 이미지가 항상 최고 품질임을 보장할 수 있습니다.

브랜딩에 이 특정 크기가 중요한 이유

첫인상은 냉혹합니다. 사용자가 사이트를 고정했는데 가운데에 작은 글자만 있는 지저분한 흰색 사각형을 보게 된다면, 사이트가 고장 났거나 신뢰할 수 없다고 생각할 것입니다. 선명한 apple touch icon 180x180 파일은 웹 앱을 마치 네이티브 애플리케이션처럼 느끼게 해줍니다.

GitHub이 이 부분을 완벽하게 보여줍니다. GitHub의 HTML을 살펴보면, 홈 화면 아이콘을 위해 정교하게 디자인된 180x180 PNG를 제공하고 있음을 알 수 있습니다. GitHub를 홈 화면에 추가하면, 홈페이지의 흐릿한 스크린샷이 아닌 완벽한 해상도의 옥토캣 로고를 볼 수 있습니다.

저해상도 제공의 위험성

예전에 57x57 아이콘(2010년의 유산 크기)을 사용한 프로젝트를 인수한 적이 있습니다. iPhone 14 Pro에서 그 아이콘은 수채화처럼 보였습니다. 픽셀이 너무 늘어나서 브랜드 로고를 전혀 알아볼 수 없었습니다. 180x180 파일을 제공하자 즉시 해결되었습니다.

오늘날 180x180보다 작은 파일을 제공하면 iOS가 이를 강제로 확대합니다. 브라우저와 운영체제는 래스터 이미지 확대에 매우 취약합니다. 결과는 항상 부드럽고 흐릿한 아이콘이 되어 사용자 홈 화면의 시각적 위계를 망가뜨립니다.

apple touch icon 180x180 구현 방법

사이트에 이 파일을 추가하는 것은 매우 간단합니다. 문서 head에 HTML link 태그 하나만 추가하면 됩니다. 기본적인 iOS 지원을 위해 복잡한 JavaScript나 manifest 설정이 필요하지 않습니다.

<head> 태그에 붙여넣을 정확한 HTML은 다음과 같습니다:

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

파일은 루트 디렉토리에 배치하세요. 다른 곳에 둘 수도 있지만, 루트에 두면 구형 iOS 버전이 HTML 태그를 무시하더라도 자동으로 파일을 찾을 수 있습니다.

완벽한 180px 정사각형 디자인하기

회사 전체 로고를 180x180 정사각형으로 그냥 리사이즈하지 마세요. 로고는 보통 가로로 길기 때문에, 정사각형에 억지로 넣으면 아주 작아져서 알아볼 수 없게 됩니다. 핵심 마크를 추출해야 합니다.

파일 디자인 시 다음 규칙을 따르세요:

마크를 분리하고 흐릿한 가장자리를 피하는 방법에 대한 자세한 내용은 Favicon vs Logo Difference 가이드를 확인하세요. 브라우저 탭의 디자인 원칙은 홈 화면 앱 아이콘에 두 배로 적용됩니다.

2026년 모범 사례

빌드 파이프라인에서 15가지 iOS 아이콘 크기를 생성하는 데 시간을 낭비하지 마세요. 레거시 57x57, 72x72, 114x114 파일은 쓸모없는 용량일 뿐입니다. 최신 iOS 버전에서는 완전히 사용이 중단되었습니다.

2026년의 엄격한 권장 사항은 apple touch icon 180x180 파일 하나만 생성하는 것입니다. PNG를 압축하여 파일 크기를 30KB 미만으로 유지하세요. Mzu favicondl을 사용하면 전문가들이 어떻게 하는지 확인하기 위해 모든 사이트에서 정확한 180x180 크기를 추출, 확인 및 다운로드할 수 있습니다.

실제 iPhone에서 구현을 테스트하세요. 사이트를 홈 화면에 추가하고, 라이트 모드와 다크 모드 모두에서 아이콘이 선명하게 보이는지 확인하세요. 배경에 묻힌다면 대비가 너무 낮은 것입니다.

깔끔하고 단일한 180x180 PNG를 제공하는 것은 최신 기기가 웹 콘텐츠를 렌더링하는 방식을 이해하고 있음을 증명합니다. HTML을 가볍게 유지하고 사용자에게 완벽한 네이티브 앱 경험을 제공합니다.