iPhone에서 '홈 화면에 추가'를 탭했는데 사이트 아이콘이 흐릿하고 알아볼 수 없는 미니어처 스크린샷으로 저장되어 실망한 적이 있다면, 파비콘 설정이 불완전한 것입니다. 모바일 브라우저는 오래된 데스크톱 아이콘에 신경 쓰지 않습니다. 웹사이트를 네이티브 앱처럼 느끼게 해주는 특정 고해상도 에셋을 기대합니다.

GitHub의 모바일 웹 경험을 살펴보세요. Safari의 탭 그리드에서 사이트를 보면 여백이 완벽하게 맞춰진 선명한 아이콘이 보입니다. Android 기기에 저장하면 OS가 사용하는 어떤 아이콘 모양에도 완벽하게 적응합니다. 이는 우연이 아닙니다. 그들은 모바일 기기용 파비콘에 대한 타겟팅된 전략을 사용합니다.

15가지의 다른 아이콘 크기를 제공하려고 애쓰지 마세요. 2026년에는 모바일 기기의 99%를 커버하기 위해 몇 가지 특정 파일만 있으면 됩니다. 어떻게 설정하는지 정확히 보여드리겠습니다.

모바일 아이콘을 위한 전제 조건

코드를 작성하기 전에 올바른 원본 이미지가 필요합니다. 32x32 픽셀 파일은 사용하지 마세요. 고해상도의 정사각형 로고 버전이 필요합니다. 512x512 픽셀 PNG 또는 깔끔한 SVG로 시작하는 것을 권장합니다. 로고에 텍스트가 있다면 제거하세요. 작은 스마트폰 화면에서도 가독성을 유지하려면 단독 브랜드 마크를 사용하세요.

단계별 모바일 파비콘 설정

1단계: Apple Touch Icon으로 iOS 정복하기

Apple은 고집이 세기로 유명합니다. iOS의 Safari는 홈 화면에 저장하거나 모바일 Safari 탭 개요에 표시할 때 표준 파비콘 선언을 완전히 무시합니다. 대신 Apple Touch Icon이라는 특정 파일을 요구합니다.

정확히 180x180 픽셀 PNG 하나가 필요합니다. 여기서 SVG를 사용하지 마세요. iOS는 이를 무시합니다. 게다가 iOS는 투명한 배경을 모두 검은색으로 채웁니다. 투명한 배경에 어두운 로고가 있다면 보이지 않는 검은색 사각형이 될 것입니다. 이 특정 파일에는 항상 단색 배경을 사용하세요.

이에 대한 뉘앙스는 Apple Touch Icon 가이드에서 더 자세히 읽을 수 있지만, 구현은 HTML 한 줄이면 됩니다.

2단계: Web App Manifest로 Android 길들이기

Android의 Chrome은 아이콘을 완전히 다르게 처리합니다. 특정 HTML 태그를 찾는 대신 웹 앱 매니페스트라는 JSON 파일을 찾습니다. 이 파일은 사이트가 설치되거나 모바일 작업 전환기에서 표시될 때 어떻게 동작해야 하는지 Android에 알려줍니다.

Android의 경우 192x192와 512x512 두 가지 PNG 크기가 필요합니다. 루트 디렉토리에 있는 site.webmanifest 파일 안에 이를 정의합니다.

3단계: Maskable Icon(마스크 가능한 아이콘) 구현하기

Android 제조사들은 다양한 아이콘 모양을 좋아합니다. 삼성은 둥근 사각형(squircle)을, Pixel 폰은 원형을, 다른 기기들은 물방울 모양을 사용할 수 있습니다. 마스크 가능한 아이콘을 제공하지 않으면 Android는 정사각형 로고를 축소하여 흰색 원 안에 넣는데, 이는 매우 보기 흉합니다.

매니페스트에 purpose: 'maskable' 속성을 추가하면 Android가 시스템의 기본 모양에 맞게 아이콘을 자를 수 있도록 허용하는 것입니다. 로고의 메인 그래픽이 중앙의 '안전 영역'(이미지 내부 80%) 안에 안전하게 위치하는지 확인하기만 하면 됩니다.

4단계: 최종 코드 통합

다음은 모바일 기기용 파비콘을 하나로 묶는 데 필요한 정확한 코드입니다. 먼저 HTML <head> 섹션에 다음을 추가하세요:

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

<!-- Android / Chrome -->
<link rel='manifest' href='/site.webmanifest'>

<!-- 최신 모바일 브라우저 (SVG 폴백) -->
<link rel='icon' type='image/svg+xml' href='/icon.svg'>

다음으로, 아래의 JSON 구조를 가진 site.webmanifest 파일을 생성하세요:

{
  'name': '앱 이름',
  'short_name': 'App',
  'icons': [
    {
      'src': '/icon-192x192.png',
      'sizes': '192x192',
      'type': 'image/png'
    },
    {
      'src': '/icon-512x512.png',
      'sizes': '512x512',
      'type': 'image/png',
      'purpose': 'any maskable'
    }
  ],
  'theme_color': '#ffffff',
  'background_color': '#ffffff',
  'display': 'standalone'
}

피해야 할 일반적인 함정

Android의 구체적인 내용에 대해 더 깊이 알고 싶다면 상세한 웹 앱 매니페스트 파비콘 가이드를 확인하세요.

결론

모바일 기기용 파비콘을 올바르게 설정하는 것은 웹사이트의 인지된 품질을 극적으로 높이는 작은 디테일입니다. 전용 Apple Touch Icon과 잘 구성된 웹 앱 매니페스트를 제공함으로써 모든 스마트폰과 태블릿에서 브랜드가 전문적으로 보이도록 보장할 수 있습니다.

수동으로 이미지 크기를 조정하고 JSON 파일을 직접 작성하는 대신 Mzu favicondl을 사용할 수 있습니다. 고해상도 로고를 업로드하면 2026년에 필요한 모바일에 최적화된 PNG, SVG 및 매니페스트 파일을 도구가 정확하게 생성해 줍니다.