생성 진보적 인 웹 응용 프로그램 이미지 아이콘과 다양한 크기 요구 사항

Question

나는 create react app를 사용하고 있는데 공공 디렉토리에 다음의 manifest.json를 생성

{ 
    "name": "React_Starter", 
    "short_name": "React_Starter", 
    "theme_color": "#1d9ed6", 
    "background_color": "#1d9ed6", 
    "display": "standalone", 
    "orientation": "portrait", 
    "Scope": "/", 
    "start_url": "/", 
    "icons": [ 
    { 
     "src": "/images/icons/android-chrome-72x72.png", 
     "sizes": "72x72", 
     "type": "image/png" 
    }, 
    { 
     "src": "/images/icons/android-chrome-96x96.png", 
     "sizes": "96x96", 
     "type": "image/png" 
    }, 
    { 
     "src": "/images/icons/android-chrome-144x144.png", 
     "sizes": "144x144", 
     "type": "image/png" 
    }, 
    { 
     "src": "/images/icons/android-chrome-192x192.png", 
     "sizes": "192x192", 
     "type": "image/png" 
    }, 
    { 
     "src": "/images/icons/android-chrome-256x256.png", 
     "sizes": "256x256", 
     "type": "image/png" 
    }, 
    { 
     "src": "/images/icons/android-chrome-384x384.png", 
     "sizes": "384x384", 
     "type": "image/png" 
    }, 
    { 
     "src": "/images/icons/android-chrome-512x512.png", 
     "sizes": "512x512", 
     "type": "image/png" 
    } 
    ], 
    "splash_pages": null, 
} 

이 이미지는 생산 프로그레시브 웹 응용 프로그램 (충분히 좋은 크기인가 PWA)? 또는 더 많은 크기를 포함해야합니까?

또한, 서로 다른 크기의 아이콘을 많이 생성 할 경우 나는 logo.png 주어진 PWA 이미지 아이콘을 생성하고 빌드 디렉토리

Answer 1

에 저장 ejecting없이 create react app로 사용할 수있는 도구가 수행 할 수 있습니다 이것을 사용하십시오 : https://realfavicongenerator.net

Answer 2

나는 그 목록에 적당한 크기의 아이콘이 있다고 생각합니다!

Google 개발자 웹 사이트에 따르면 기준 아이콘 크기는 48x48, 196x196, 128x128, 144x144, 152x152입니다. 사이트에서

는 :

홈 화면에 아이콘을 저장, 크롬 먼저 디스플레이의 밀도를 일치 화면을 밀도를 48dp 할 수있는 크기하는 아이콘 을 찾습니다. 아무 것도 발견되지 않으면 가장 가까운 아이콘 인 이 장치 특성과 일치하는 아이콘을 검색합니다. 어떤 이유에서든 에서 특정 픽셀 밀도의 아이콘을 대상으로 지정하려는 경우 은 숫자를 사용하는 선택적 밀도 멤버를 사용할 수 있습니다. 밀도를 선언하지 않으면 기본값은 1.0입니다. 즉, "화면 밀도 1.0 이상인 경우이 아이콘 사용"입니다. 이는 보통 원하는 것입니다.

아이콘 크기를 계속 추가 할 수는 있지만 궁극적으로 아이콘 크기가 좋은 한 Chrome에서 처리합니다.

매니페스트 파일의 유효성을 검사하는 한 좋은 결과를 얻을 수 있습니다. W3C 사양의 규칙을 따르는 Manifest Validator을 사용해 보셨습니까?