앱 정보
아이콘
manifest 파일
{
"start_url": "/",
"display": "standalone",
"theme_color": "#1f6f4a",
"background_color": "#ffffff",
"lang": "ko",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}위 내용을 manifest.webmanifest 또는 manifest.json 파일로 저장해 사이트 루트에 올리세요.
HTML head에 넣을 태그
<link rel="manifest" href="/manifest.webmanifest"> <meta name="theme-color" content="#1f6f4a"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
- name 또는 short_name 중 하나는 있어야 합니다.
manifest.json 생성기 사용 안내
웹사이트를 홈 화면에 설치할 수 있게 하는 웹 앱 매니페스트(manifest) 파일과, head에 넣을 연결 태그를 만들어 줍니다.
- 앱 이름, 시작 주소, 표시 방식, 색상을 입력합니다.
- 192×192, 512×512 아이콘 경로를 추가합니다.
- 생성된 JSON을 manifest 파일로 저장하고 태그를 head에 넣습니다.
자주 묻는 질문
name과 short_name은 무엇이 다른가요?
name은 설치 화면 등에서 쓰는 전체 이름, short_name은 홈 화면 아이콘 아래처럼 공간이 좁을 때 쓰는 짧은 이름입니다.
아이콘은 꼭 필요한가요?
설치 가능 조건에 192×192와 512×512 아이콘을 요구하는 브라우저가 많습니다. 파비콘 생성기로 만들 수 있습니다.
파일 이름은 manifest.json이어야 하나요?
이름은 자유이고 manifest.webmanifest도 많이 씁니다. link 태그의 경로만 일치하면 됩니다.