PNG 파비콘 96x96 Google 검색 결과 최적화

Google을 열고 브랜드를 검색한 뒤, 페이지 제목 옆에 표시되는 아이콘을 자세히 살펴보십시오. 만약 아이콘이 흐릿하거나 픽셀이 거칠게 깨지거나 늘어나 보인다면, 해상도가 낮은 파비콘을 제공해서 Google이 이를 업스케일링하고 있을 가능성이 높습니다. 바로 이 문제를 해결하는 것이 PNG 파비콘 96x96 패턴이며, 이는 Google이 내부적으로 가장 선명한 후보를 선택할 때 사용하는 2배 다운샘플링 로직과 동일한 원리입니다.

96x96 PNG 파비콘이란 정확히 무엇인가

96x96 PNG 파비콘은 가로 96픽셀, 세로 96픽셀 크기의 정사각형 래스터 이미지로, image/png MIME 타입으로 제공됩니다. 96픽셀이라는 크기는 임의로 정해진 것이 아닙니다. 이는 Google 검색에서 데스크톱 결과의 페이지 제목 옆에 아이콘을 렌더링할 때 사용하는 48픽셀 CSS 크기의 정확히 2배에 해당하기 때문입니다.

브라우저나 검색 엔진이 48x48 아이콘을 표시해야 할 때, 소스 PNG가 96x96이면 다운샘플링이 선명한 윤곽과 깔끔한 안티에일리어싱을 만들어냅니다. 반면 소스가 16x16인데 이를 48x48로 업샘플링하면 흐릿한 결과가 나옵니다. 96x96 크기는 적절한 균형점을 잡고 있습니다. 파일 크기를 10 KB 이하로 충분히 작게 유지하면서도, 일반적인 모든 렌더링 대상에 품질 손실 없이 대응할 만큼 충분히 큰 크기입니다.

Google 검색에서 이 크기가 중요한 이유

Google의 공식 파비콘 문서에 따르면, 파비콘이 검색 결과에 표시되려면(보장이 아닌 자격 요건으로) Google이 크롤링할 수 있어야 하고, 정사각형이어야 하며, 최소 8x8 픽셀 이상이어야 합니다. Google은 48x48보다 더 큰 크기를 권장합니다.

96x96 PNG는 이 권장 범위에 속하며, 표시 크기의 정확히 2배이기 때문에 Google 렌더러에 깔끔한 다운샘플링을 제공합니다. Google 크롤러는 <link rel="icon"> 선언과 루트 favicon.ico 중에서 가장 크고 유효한 정사각형 이미지를 선택합니다. 96x96 PNG는 이러한 선택에서 자주 승리하며, 한 번 선택되면 사용자가 SERP에서 보게 되는 이미지가 됩니다. 96x96이 다른 일반적인 크기들 사이에서 어디에 위치하는지 확인하려면 종합 파비콘 크기 가이드를 참조하시기 바랍니다.

sizes 속성이 브라우저에 어떤 아이콘을 사용할지 알려주는 방식

HTML 명세는 <link rel="icon"> 태그의 sizes 속성을 통해 브라우저에 어떤 아이콘을 로드할지 힌트를 제공합니다. WHATWG HTML 표준에 정의된 대로, 사용자 에이전트가 특정 크기(예: Google 결과의 48x48, Windows 작업 표시줄 고정의 32x32)의 아이콘이 필요할 때, 대상 크기와 일치하거나 그보다 큰 sizes 값을 가진 선언된 아이콘을 선택합니다.

96x96 PNG 파비콘을 선언하는 표준적인 패턴은 다음과 같습니다.

&lt;link rel='icon' type='image/png' sizes='96x96' href='/favicons/favicon-96x96.png'&gt;

정확한 형식에 유의하십시오. "96x96"은 소문자로 작성하며 x 구분자를 사용합니다. 브라우저는 "96", "96 X 96" 또는 공백이 포함된 변형 형식은 무시합니다.

실제 구현: 전체 스택 구성

96x96 PNG 하나만 단독으로 제공하는 것만으로는 충분하지 않습니다. 최신 브라우저는 계층화된 아이콘 세트를 기대합니다. 일반적인 <head> 블록은 다음과 같습니다.

&lt;link rel='icon' type='image/svg+xml' href='/favicon.svg'&gt;
&lt;link rel='icon' type='image/png' sizes='96x96' href='/favicons/favicon-96x96.png'&gt;
&lt;link rel='icon' type='image/png' sizes='32x32' href='/favicons/favicon-32x32.png'&gt;
&lt;link rel='apple-touch-icon' sizes='180x180' href='/favicons/apple-touch-icon.png'&gt;
&lt;link rel='shortcut icon' href='/favicon.ico'&gt;

순서가 중요합니다. 더 크고 우선순위가 높은 아이콘을 먼저 배치하십시오. 브라우저는 필요한 sizes 조건이 처음으로 일치하는 항목에서 멈춥니다. 루트의 favicon.ico는 파일을 직접 탐지하는 구형 브라우저와 curl 스타일 스크레이퍼를 처리합니다.

96x96 PNG 모범 사례

96x96으로 디자인하고, 업스케일하지 마십시오. 원본 SVG에서 96x96 PNG를 새로 내보내면 깨끗한 픽셀 그리드가 만들어집니다. 32x32 내보내기를 업스케일하면 해결하려던 흐림한 결과가 그대로 고스란히 남게 됩니다.
URL을 영구적으로 유지하십시오. Google이 아이콘을 인덱싱한 이후에 URL을 변경하면 전체 재크롤링이 필요하며, Google 문서에 따르면 이 작업은 수일에서 수주까지 걸릴 수 있습니다.
10 KB 이하로 유지하십시오. 제한된 색상 팔레트를 사용한 96x96 PNG는 일반적으로 2~6 KB 사이입니다. 배포 전에 Oxipng 같은 PNG 최적화 도구를 사용하십시오.
정사각형은 필수입니다. Google 크롤러는 정사각형이 아닌 이미지를 무시합니다. 96x95 파일은 검색 결과에서 사용할 수 없습니다.
배포 전에 48x48로 미리 보십시오. Mzu favicondl 같은 도구를 사용해 96x96 PNG를 실제 표시 크기인 48x48로 렌더링해 보십시오. 48x48에서 흐리게 보인다면 Google에서도 똑같이 흐리게 표시될 것입니다.

96x96이 정답이 아닐 때

PWA를 구축 중이거나 Android 홈 화면 아이콘이 필요한 경우라면, site.webmanifest에서 192x192 및 512x512 PNG를 요구합니다. 이 크기는 해당 플랫폼이 실제로 사용하는 크기이기 때문입니다. 그 시나리오의 경우 웹 앱 매니페스트 아이콘 설정 가이드를 따르시기 바랍니다. 다만 브라우저 탭, 주소 표시줄, Google 검색 결과의 경우에는 SVG와 짝을 이루는 96x96이 현실적으로 가장 선명한 구성입니다.

권장 사항

업스케일된 더 작은 파일이 아닌 실제 96x96 PNG를 자체 <link> 태그에 sizes='96x96'으로 선언하여 제공하십시오. 이를 기본 SVG, 32x32 PNG 폴백, 루트 favicon.ico와 결합하십시오. 이러한 스택 구성은 Google의 "48x48보다 큰 크기" 권장 사항을 충족하고, 검색 결과에서 선명하게 표시되며, 구형 브라우저에서도 자연스럽게 대응합니다.