아이폰에서 내 웹앱을 열고 주소창을 탭했을 때, '즐겨찾기' 목록에 밋밋한 회색 정사각형이 나타난다면 favicon for ios safari 설정이 잘못된 것입니다. iOS Safari에서 완벽한 파비콘을 얻으려면 루트 디렉토리에 ico 파일 하나를 던져두는 것 이상이 필요합니다. 애플의 모바일 브라우저는 탭 바, 북마크 메뉴, 새 탭 그리드에 대해 자체적인 엄격한 렌더링 규칙을 가지고 있습니다.

네이버나 토스 같은 사이트를 보세요. iOS Safari 즐겨찾기에 저장하면 흐릿하게 확대된 32x32 이미지가 나오지 않습니다. 마치 네이티브 앱처럼 선명하고 완벽한 비율의 아이콘이 나타납니다. 이는 우연이 아닙니다. WebKit의 요구 사항에 정확히 맞춘 특정 에셋을 제공하기 때문입니다.

지금 바로 iOS Safari 아이콘을 수정해 봅시다.

iOS Safari 아이콘이 표시되는 3가지 위치

코드를 작성하기 전에 iOS Safari가 실제로 브랜드 아이콘을 어디에 표시하는지 이해해야 합니다. 주로 다음 세 곳에 아이콘이 나타납니다.

홈 화면을 위한 Apple Touch Icon 가이드는 따로 마련되어 있으므로, 여기서는 Safari 브라우저 UI를 선명하게 만드는 데 집중하겠습니다.

단계별 가이드: iOS Safari 파비콘 완벽 설정

1. 180x180 불투명 PNG 생성

iOS Safari는 즐겨찾기 그리드를 표시할 때 apple-touch-icon에 크게 의존합니다. 여기서 절대 타협할 수 없는 규칙은 크기와 배경입니다. 180x180 픽셀의 PNG가 필요합니다. 더 중요한 것은 투명한 배경을 가져서는 안 된다는 점입니다.

iOS Safari에 투명한 PNG를 제공하면 투명한 영역을 강제로 검은색으로 채워버립니다. 로고가 검은색 배경용으로 디자인되지 않은 이상 매우 흉하게 보입니다. 내보내기 전에 아이콘에 단색 배경(흰색이나 브랜드의 기본 색상)을 채워주세요.

2. 모던 SVG 아이콘 적용

실제 탭 바 UI의 경우 iOS Safari는 확장 가능한 벡터 그래픽(SVG)을 선호합니다. iOS 15부터 Safari는 SVG 파비콘을 지원하여 사용자의 확대/축소 수준이나 기기 해상도에 관계없이 아이콘이 항상 선명하게 유지되도록 합니다.

SVG 내부에 CSS 미디어 쿼리를 사용하여 다크 모드를 지원할 수도 있습니다. 이렇게 하면 사용자가 시스템 테마를 전환할 때 탭 아이콘이 사라지는 것을 방지할 수 있습니다.

3. HTML 구현

2026년 iOS Safari를 만족시키기 위해 <head>에 필요한 정확한 마크업은 다음과 같습니다. 코드가 얼마나 깔끔한지 확인해 보세요. 수많은 레거시 크기로 문서를 무겁게 만들 필요가 없습니다.

<!-- Safari 탭 바를 위한 핵심 SVG -->
<link rel='icon' href='/icon.svg' type='image/svg+xml'>

<!-- Safari 즐겨찾기 및 홈 화면을 위한 180x180 불투명 PNG -->
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

<!-- PWA 기능을 위한 Web Manifest -->
<link rel='manifest' href='/site.webmanifest'>

4. Web Manifest 구성

과거 애플은 웹 매니페스트를 무시했지만, 2026년 현재 iOS Safari는 프로그레시브 웹 앱(PWA)에 대해 이를 존중합니다. 사용자가 사이트를 홈 화면에 추가하면 Safari는 매니페스트에서 아이콘 정의를 확인합니다. 자세한 내용은 전체 웹 앱 매니페스트 파비콘 가이드를 읽어보시길 권하지만, 최소한 site.webmanifest 파일에 192x192 및 512x512 아이콘을 포함하세요.

iOS Safari의 흔한 실수들

올바른 코드를 작성하더라도 문제가 발생할 수 있습니다. 개발자들이 가장 자주 하는 실수는 다음과 같습니다.

Precomposed 태그 사용

수년 전, 개발자들은 iOS가 아이콘에 광택(Gloss) 효과를 추가하는 것을 막기 위해 apple-touch-icon-precomposed를 사용했습니다. 애플은 iOS 7에서 그 광택 효과를 제거했습니다. HTML에 여전히 precomposed 태그가 있다면 삭제하세요. 이는 불필요한 코드이며 Safari가 중복된 태그를 처리하도록 강제할 뿐입니다.

안전 영역 무시

180x180 PNG를 디자인할 때 로고를 가장자리 끝까지 밀어 넣지 마세요. iOS는 즐겨찾기 그리드의 아이콘에 둥근 사각형 마스크를 적용합니다. 로고가 캔버스 가장자리에 닿으면 모서리가 잘려 나갑니다. 핵심 아트는 중앙의 약 120x120 픽셀 안전 영역 내에 유지하세요.

강력한 캐싱

Safari는 아이콘을 매우 강력하게 캐시합니다. apple-touch-icon.png를 업데이트하더라도 며칠 동안 아이폰에서 변경 사항이 보이지 않을 수 있습니다. 개발 중에 강제로 새로 고침하려면 에셋 URL에 쿼리 문자열을 추가하거나(예: href='/apple-touch-icon.png?v=2') Safari 웹사이트 데이터를 완전히 지우세요.

가장 빠른 해결 방법

수동으로 이미지 크기를 조정하고, 투명도를 제거하고, 웹 매니페스트를 위한 JSON을 작성하는 것은 번거롭습니다. 개발자는 더 중요한 비즈니스 로직에 집중해야 합니다. 고해상도 로고를 Mzu favicondl에 넣는 것을 추천합니다. iOS의 불투명 배경 요구 사항을 자동으로 처리하고, 정확한 180x180 크기를 생성하며, 필요한 깔끔한 HTML 코드를 출력해 줍니다.

아이콘을 올바르게 설정하면 웹앱이 모든 아이폰에서 일급 네이티브 앱처럼 느껴질 것입니다.