GitHub이나 Stripe 같은 사이트를 안드로이드 홈 화면에 추가했을 때 아이콘이 완벽하게 보이는 반면, 여러분의 프로젝트는 흰색 원 안의 작은 점처럼 보인 적이 있나요? 그 차이는 바로 favicon site.webmanifest 파일의 유무에서 옵니다. 이 파일은 웹사이트와 모바일 OS를 연결하는 보이지 않는 다리 역할을 합니다.

2026년에 단순히 favicon.ico 파일 하나만 루트에 던져두는 것은 정장 파티에 슬리퍼를 신고 가는 것과 같습니다. 작동은 하겠지만, 프로답지 못하다는 인상을 주죠. 웹 매니페스트는 브라우저에게 사용자의 기기에서 이 '앱'이 어떻게 보여야 하는지 알려주는 간단한 JSON 파일입니다. 이전에 웹 앱 매니페스트 파비콘 가이드에서 다루었지만, 오늘은 파비콘 최적화를 위한 site.webmanifest 구현에 집중해 보겠습니다.

완벽한 site.webmanifest의 구조

코드를 작성하기 전에 자산이 준비되어야 합니다. 16x16 아이콘 하나로는 부족합니다. 현대의 모바일 기기는 높은 픽셀 밀도를 가지고 있어 더 크고 선명한 이미지를 요구합니다. 기본적으로 192x192 및 512x512 PNG 파일이 필요합니다.

루트 폴더에 site.webmanifest 파일을 생성하세요. 2026년 권장 구조는 다음과 같습니다:

{
  'name': '나의 멋진 프로젝트',
  'short_name': '프로젝트',
  'icons': [
    {
      'src': '/android-chrome-192x192.png',
      'sizes': '192x192',
      'type': 'image/png'
    },
    {
      'src': '/android-chrome-512x512.png',
      'sizes': '512x512',
      'type': 'image/png'
    },
    {
      'src': '/maskable-icon-512x512.png',
      'sizes': '512x512',
      'type': 'image/png',
      'purpose': 'maskable'
    }
  ],
  'theme_color': '#ffffff',
  'background_color': '#ffffff',
  'display': 'standalone'
}

1단계: 아이콘의 올바른 정의

icons 배열이 핵심입니다. purpose: 'maskable' 설정을 확인하세요. 2026년에는 필수입니다. 안드로이드는 아이콘을 원형, 사각형 등 다양한 모양으로 표시하는데, 마스커블 아이콘이 없으면 로고 주변에 못생긴 흰색 테두리가 생깁니다. 마스커블 아이콘은 로고 주변에 충분한 여백을 두어 잘려도 로고가 유지되도록 설계해야 합니다.

2단계: HTML에서 매니페스트 연결

브라우저에게 이 설정 파일의 위치를 알려줘야 합니다. HTML의 <head> 섹션에 다음 코드를 추가하세요:

<link rel='manifest' href='/site.webmanifest'>

이 태그는 브라우저가 가능한 빨리 정보를 가져올 수 있도록 상단에 배치하는 것이 좋습니다. 더 자세한 배치 방법은 2026년 파비콘 베스트 프랙티스를 참고하세요.

주의해야 할 실수들

favicon site.webmanifest를 설정하는 것이 번거롭게 느껴질 수 있지만, 이런 디테일이 전문적인 제품을 만듭니다. Mzu favicondl 같은 도구를 사용하면 리사이징과 포맷 변환을 쉽게 처리할 수 있어 개발 시간을 단축할 수 있습니다.