파비콘의 경우 ICO 대 PNG
ICO는 보편적이지만 오래되었습니다. PNG는 현대적이지만 명시적인 연결이 필요합니다. 두 가지를 함께 사용하는 방법은 다음과 같습니다.
4 분 분량
ICO: 범용 폴백
모든 데스크탑 브라우저는 사용자가 아무 것도 하지 않고도 /favicon.ico를 가져옵니다. 여러 해상도를 담을 수 있는 컨테이너입니다.
Windows 바로가기와 파일 탐색기는 .ico를 사용하므로 웹 파비콘이 마음에 들지 않더라도 OS용으로 하나 제공하세요.
PNG: 어떤 밀도에서도 픽셀이 완벽함
PNG는 <link rel="icon" size="...">와 연결하면 높은 DPI 디스플레이에서 선명하게 렌더링됩니다.
웹 매니페스트에는 192×192 및 512×512 PNG를 사용하고 apple-touch-icon에는 180×180을 사용합니다.
평결 : 둘 다 사용
보편적인 지원을 위해 다양한 크기의 .ico와 HD 디스플레이 및 PWA 설치 프롬프트를 위한 PNG 변형을 제공하세요. 가장 선명하고 확장 가능한 아이콘을 얻으려면 상단에 SVG를 추가하세요.