Android Chrome에서 점 세 개 메뉴를 누르고 "홈 화면에 추가"를 선택하면, 런처에 일반적인 첫 글자 플레이스홀더가 나타납니다. 브라우저가 정성껏 만든 favicon을 무시한 것입니다. 이 가이드는 favicon for android add to home screen 흐름에서 바로 이 문제를 해결합니다.

Android Chrome은 사용자가 사이트를 설치할 때 표준 <link rel='icon'> 태그를 읽지 않습니다. 대신 웹 앱 매니페스트(web app manifest)를 읽습니다. 매니페스트가 없거나, 형식이 잘못되었거나, 올바른 아이콘 항목이 빠져 있으면 Android 홈 화면의 바로가기는 스크린샷이나 일반 글리프로 대체됩니다.

사전 준비물

코드를 건드리기 전에 세 가지가 필요합니다:

단계별: Favicon for Android Add to Home Screen 구성하기

1. 소스 아트워크에서 두 가지 아이콘 크기 내보내기

Android Chrome은 설치 대화상자에는 192×192 아이콘을, 바로가기가 추가된 후 잠깐 나타나는 스플래시 화면에는 512×512 아이콘을 선호합니다. 둘 다 PNG로 내보내세요. W3C 매니페스트 명세는 이를 purpose: 'any' 아이콘의 두 가지 필수 sizes 값으로 정의합니다. 공식 스키마는 W3C Web App Manifest: icons member를 참고하세요.

2. 적응형 런처를 위한 maskable 변형 만들기

Android 런처는 기기에 따라 정사각형 아이콘을 원, 스퀴클, 또는 둥근 사각형으로 자릅니다. 일반 512×512 PNG는 모서리가 잘려나갑니다. maskable 버전을 만드세요: 전체 아트가 캔버스 중앙 80%를 차지하는 안전 영역 안에 들어가고, 나머지 20%는 런처가 세부 정보 손실 없이 자를 수 있는 투명 패딩 역할을 합니다.

icon-maskable-512.png로 저장하세요. 안전 영역 계산에 대한 더 자세한 내용은 maskable icon 가이드를 참고하세요.

3. manifest.json 작성하기

사이트 루트에 다음을 추가하고 경로를 조정하세요:

{
  "name": "Your App Name",
  "short_name": "Short",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

purpose 필드는 favicon for android add to home screen이 선명하게 보이는지, 잘려 보이는지를 가르는 핵심 차이입니다. 매니페스트 명세는 표준 아이콘에는 'any'를, 런처 자르기를 견디도록 설계된 아이콘에는 'maskable'을 정의합니다.

4. 모든 페이지에서 매니페스트 연결하기

Android Chrome은 사용자가 설치할 수 있는 모든 페이지의 HTML head에 <link> 태그가 없으면 매니페스트를 발견하지 못합니다. 다음을 추가하세요:

<link rel='manifest' href='/manifest.json'>

본문 안이 아니라 favicon 선언 옆에 두세요. 브라우저는 head 파싱이 끝난 후 발견한 link 태그를 무시합니다.

5. 주소 표시줄과 일치하도록 테마 색상 설정하기

head에 있는 김에, 홈 화면에서 사이트를 실행할 때 Chrome 상단 바가 물들도록 일치하는 테마 색상을 추가하세요:

<meta name='theme-color' content='#000000'>

6. 실제 설치 흐름 테스트하기

실제 기기의 Android Chrome에서 사이트를 여세요. 점 세 개 메뉴를 열고 "홈 화면에 추가"를 탭하세요. 대화상자 미리보기에는 글자나 스크린샷이 아니라 192×192 아이콘이 표시되어야 합니다. 확인하고 런처를 확인하세요 — 아이콘이 중요한 세부 정보를 잘라내지 않고 모양을 채워야 합니다.

잘못된 아이콘이 보이면 다음 섹션을 읽어보세요.

Android에 특화된 일반적인 함정

작업 검증하기

favicon checker online을 사용하여 매니페스트가 파싱 가능하고 PNG가 HTTPS를 통해 확인되는지 확인하세요. Mzu favicondl은 단일 소스 파일에서 192×192와 512×512 PNG를 모두 내보내고 일치하는 maskable 변형을 생성할 수 있어 수동 Figma 단계를 절약합니다. 그런 다음 최소 하나의 Pixel 기기와 하나의 Samsung 기기에서 설치 흐름을 진행하세요 — 런처 모양이 눈에 띄게 다르며, 이것이 바로 maskable 변형이 중요한 이유입니다.

favicon for android add to home screen을 구성하는 것은 192×192 항목, 512×512 maskable 항목, 그리고 모든 페이지의 <link rel='manifest'> 태그를 갖춘 제대로 선언된 manifest.json으로 귀결됩니다. maskable 변형을 건너뛰면 아이콘이 잘립니다. 매니페스트를 완전히 건너뛰면 Android가 대신 페이지를 스크린샷으로 찍습니다. 이 세 파일을 제대로 만들면 사용자의 홈 화면에 있는 바로가기가 원래 있어야 할 것처럼 보일 것입니다.