Android 홈 화면에 웹사이트를 추가했을 때 거대하고 보기 흉한 흰색 원 안에 작은 아이콘이 갇혀 있는 것을 본 적이 있다면, 그것은 매니페스트 설정 실패를 목격한 것입니다. 대부분의 개발자는 iOS 사용자를 위한 apple-touch-icon에 크게 집중하지만, Android 생태계는 훨씬 더 구조화된 접근 방식인 Web App Manifest에 의존합니다. 2026년에 Chrome 및 기타 Chromium 기반 브라우저를 실행하는 수십억 개의 기기에서 전문가처럼 보이려면 단순히 16x16 ICO 파일을 갖는 것만으로는 충분하지 않습니다.
Web App Manifest favicon은 기술적으로 단일 파일이 아니라, 사이트가 앱으로 설치될 때 브라우저에 어떻게 동작해야 하는지를 알려주는 JSON 파일 내의 선언입니다. 여기에는 아이콘, 테마 색상, 심지어 사이트가 로드되는 동안 나타나는 스플래시 화면까지 포함됩니다. 당신의 사이트가 모바일에서 네이티브 앱과 같은 일류 경험을 제공하기를 원한다면, 이 설정을 제대로 해야 합니다.
Web App Manifest의 핵심
매니페스트는 보통 manifest.json 또는 site.webmanifest라는 이름의 간단한 JSON 파일입니다. 프로젝트의 루트 디렉토리에 위치하며 사이트의 메타데이터를 위한 중앙 레지스트리 역할을 합니다. HTML에서 직접 링크되는 표준 favicon과 달리, 매니페스트를 사용하면 단일 코드 블록에서 다양한 아이콘 크기와 목적을 제공할 수 있습니다.
Google과 Chromium 팀은 Progressive Web Apps(PWA)와 심지어 표준 웹사이트까지 일관성 있게 보이도록 이 방식을 표준화했습니다. 사용자가 '홈 화면에 추가'를 클릭하면 브라우저는 이 파일을 찾아 사용할 이미지를 결정합니다. 이 파일이 없으면 Chrome은 종종 도메인의 첫 글자나 페이지의 저해상도 스크린샷을 기반으로 일반 아이콘을 생성하는데, 두 경우 모두 끔찍하게 보입니다.
최신 설정을 위한 전제 조건
코드를 만지기 전에 고품질의 원본 이미지가 필요합니다. 512x512 픽셀 PNG로 시작하는 것을 권장합니다. 이 크기는 최고 밀도의 모바일 디스플레이와 PWA 스플래시 화면을 모두 커버할 수 있을 만큼 충분히 큽니다. 또한 'maskable' 아이콘(잠시 후에 자세히 설명)으로 잘 작동하는 버전의 아이콘도 있어야 합니다. 처음부터 시작하는 경우, 2026년 favicon 모범 사례에 대한 저희 가이드를 읽고 디자인이 확장에 준비되었는지 확인하는 것이 좋습니다.
1단계: manifest.json 파일 생성하기
프로젝트 루트에 manifest.json이라는 이름의 파일을 만드세요. 이 파일은 application/manifest+json MIME 타입으로 제공되어야 하지만, 대부분의 최신 서버는 .json 확장자를 사용하면 이를 자동으로 처리합니다. 다음은 아이콘에 초점을 맞춘 기본 구성입니다.
{
"name": "Mzu favicondl Pro Tool",
"short_name": "Mzu",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000"
}icons 배열이 바로 마법이 일어나는 곳입니다. 192x192 아이콘은 일반적으로 홈 화면에 사용되며, 512x512 아이콘은 앱이 실행될 때 나타나는 스플래시 화면에 사용됩니다. 많은 개발자들이 512px 버전을 건너뛰는 것을 보았는데, 이는 최신 Pixel이나 Galaxy 폰과 같은 고급 기기에서 스플래시 화면이 흐릿하게 보이는 결과를 낳습니다.
2단계: 비밀 병기 — Maskable Icons
이 부분이 대부분의 사람들이 잘못하는 지점입니다. Android는 원, 사각형, 둥근 사각형, 심지어 '스쿼클(squircle)'과 같은 다양한 모양의 아이콘을 사용합니다. 만약 당신의 아이콘이 투명한 배경을 가진 단순한 사각형 PNG라면, Android는 시스템 테마에 맞추기 위해 아이콘을 축소하여 흰색 도형 안에 배치할 것입니다. 이것은 아마추어처럼 보입니다.
이 문제를 해결하려면 maskable icon이 필요합니다. 이것은 아트워크가 '안전 영역'(이미지의 내부 80%) 내에 포함되고 배경이 가장자리까지 확장되는 아이콘입니다. 그런 다음 아이콘 객체에 "purpose": "maskable"을 추가하여 이 아이콘을 잘라내도 안전하다고 브라우저에 알려줍니다.
{
"src": "/icons/maskable-icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}표준 아이콘과 maskable 아이콘을 모두 제공함으로써, 사용자의 UI 설정에 관계없이 OS가 당신의 브랜드를 완벽하게 표시할 수 있는 유연성을 부여하게 됩니다. (프로 팁: 실제로는 "purpose": "any maskable"을 사용하여 둘을 결합할 수도 있지만, 저희는 패딩을 더 잘 제어하기 위해 파일을 분리하는 것을 선호합니다).
3단계: HTML에서 매니페스트 링크하기
JSON 파일과 이미지가 준비되면, 브라우저에 그것들을 어디서 찾을 수 있는지 알려줘야 합니다. HTML 문서의 <head>에 다음 줄을 추가하세요.
<link rel="manifest" href="/manifest.json">잠깐, 이게 다인가요? 그렇지는 않습니다. 매니페스트가 Android와 PWA를 처리하는 동안, Safari를 위해서는 여전히 apple-touch-icon이 필요합니다. 해당 특정 요구 사항에 대한 심층적인 내용은 Apple Touch Icon 완벽 설정 가이드를 확인하세요. 두 시스템은 함께 작동하여 전체 모바일 시장을 커버합니다.
4단계: 테스트 및 검증
코드가 깔끔해 보인다고 해서 작동한다고 가정하지 마세요. Chrome에서 사이트를 열고 F12를 눌러 개발자 도구를 연 다음, Application 탭으로 이동하세요. 왼쪽 사이드바에서 Manifest를 클릭하세요. Chrome은 매니페스트를 찾았는지, 아이콘 크기가 올바른지 알려주고, 심지어 maskable 아이콘의 안전 영역 미리보기도 보여줄 것입니다.
| 아이콘 크기 | 주요 사용 사례 | 필수 여부 |
|---|---|---|
| 192x192 | Android 홈 화면 아이콘 | 예 |
| 512x512 | PWA 스플래시 화면 | 예 |
| 모든 크기 (SVG) | 확장 가능한 UI 요소 | 권장 |
피해야 할 일반적인 함정
Mzu favicondl에서 우리가 가장 자주 보는 문제 중 하나는 캐싱 문제입니다. 브라우저는 manifest.json 파일을 믿을 수 없을 정도로 공격적으로 캐싱합니다. 아이콘을 업데이트했지만 파일 이름이나 매니페스트 내용을 변경하지 않으면, 사용자들은 몇 주 동안 업데이트를 보지 못할 수도 있습니다. 브랜드 리프레시를 적용할 때는 항상 버전 관리(예: icon-192x192.png?v=2)를 사용하세요.
또 다른 실수는 theme_color를 소홀히 하는 것입니다. 이 속성은 매니페스트에만 영향을 미치는 것이 아니라, 모바일 브라우저에 주소 표시줄과 시스템 상태 표시줄을 어떤 색으로 칠할지 알려줍니다. 아이콘이 진한 파란색인데 theme_color가 흰색이라면, 홈 화면에서 앱으로의 전환이 어색하고 세련되지 않게 느껴질 것입니다.
마지막으로, 경로가 올바른지 확인하세요. 매니페스트 파일의 상대 경로는 HTML 페이지가 아닌 매니페스트 파일의 위치를 기준으로 합니다. 특히 깊은 URL 구조를 가진 사이트에서는 혼동을 피하기 위해 항상 루트 상대 경로(/로 시작)를 사용하는 것을 권장합니다.
Web App Manifest favicon을 설정하는 것은 루트에 favicon.ico 파일을 던져 넣던 옛날에 비하면 추가적인 숙제처럼 느껴질 수 있습니다. 하지만 그 보상은 세계에서 가장 인기 있는 모바일 운영 체제에서 전문적이고 네이티브 앱처럼 느껴지는 존재감을 얻는 것입니다. 10분만 투자해서 제대로 설정하세요. 사용자들은 왜 당신의 사이트가 경쟁사보다 훨씬 좋아 보이는지 정확히 집어내지는 못하더라도 그 차이를 알아차릴 것입니다.