파비콘(.ico) 대 PNG
ICO 및 PNG는 경쟁자가 아니라 파트너입니다. 최신 파비콘 설정에서는 .ico를 범용 폴백으로 사용하고 PNG를 높은 DPI 재정의로 사용합니다. 이것이 바로 각자가 승리하는 때입니다.
ICO는 단일 파일에 여러 해상도가 포함되어 있다는 점에서 고유합니다. 브라우저나 OS는 그리기 시간에 가장 가까운 일치 항목을 선택합니다. 즉, 업스케일링이나 퍼지 가장자리가 없습니다.
PNG는 모든 개별 해상도에서 더 선명하며 단색 로고에 대해 더 나은 압축을 지원합니다. 하나의 파일에 여러 크기를 삽입할 수 없습니다.
최적의 설정은 다중 크기 .ico 하나와 높은 DPI 브라우저용 독립형 32×32 및 180×180 PNG 및 iOS입니다.
작동 방식
- 1
512×512 소스에서 시작
PNG 또는 SVG.
- 2
두 형식 모두 생성
FetchFavicon는 여러 크기의 .ico와 독립형 16/32/48/180/192/512 PNG를 출력합니다.
- 3
<head>에서 둘 다 연결
<link rel="icon" href="/favicon.ico"> 다음에 <link rel="icon" type="image/png" size="32x32" href="/favicon-32x32.png">가 옵니다.
지금 사용해 보기
.ico와 PNG를 모두 생성합니다.
PNG ICO 변환기자주 묻는 질문
어느 것이 파일 크기가 더 작습니까?+
단일 PNG는 동일한 해상도의 .ico보다 작지만 다중 크기 .ico는 4-6개의 PNG를 대체하며 일반적으로 총 바이트에서 승리합니다.
Google은 검색결과에 PNG 파비콘을 표시하나요?+
예. Google은 .ico와 PNG를 모두 지원합니다. 최소 48×48의 정사각형 종횡비를 선호합니다.
PNG는 다크 모드를 지원할 수 있나요?+
직접적으로는 아닙니다. 다크 모드 지원을 위해 PNG와 함께 SVG 변형을 사용하세요.