지금 Chrome에서 새 탭을 열고 자주 방문하는 사이트 그리드를 살펴보세요. 네이버의 선명한 녹색 로고나 쿠팡의 아이콘이 보일 것입니다. 하지만 자세히 보면 흐릿하게 깨진 이미지나 글자 하나만 달랑 있는 회색 원이 보이는 사이트도 있을 겁니다. 이는 favicon for chrome new tab 설정이 제대로 최적화되지 않았을 때 발생하는 현상입니다.
Chrome 새 탭 페이지(NTP)는 매우 중요한 영역입니다. 사용자가 웹 앱을 자주 방문하면 Chrome이 자동으로 이 그리드에 사이트를 추가합니다. 하지만 이 바로가기 그리드는 일반 브라우저 탭에 사용되는 16x16 픽셀보다 훨씬 크고 고품질의 아이콘을 요구합니다.
Chrome이 새 탭 아이콘을 가져오는 방식
Chrome은 사용자가 새 탭을 열 때마다 아이콘을 새로 다운로드하지 않습니다. 대신 사용자 컴퓨터에 숨겨진 로컬 SQLite 데이터베이스에서 캐시된 이미지를 읽어옵니다.
사용자가 사이트를 방문하는 동안 Chrome은 HTML을 스캔하여 가장 품질이 좋은 아이콘을 캐시합니다. 저해상도의 구형 파일만 제공한다면, Chrome은 NTP 그리드에 맞추기 위해 이미지를 강제로 늘리게 됩니다. 결과적으로 흐릿하고 비전문적인 모습이 연출됩니다. (이 문제를 디버깅 중이라면 Chrome 캐시 문제 해결 가이드를 참고하세요).
2026년을 위한 완벽한 설정
Chrome NTP에서 사이트가 선명하게 보이도록 하려면 단일 구형 파일에 의존하는 것을 멈춰야 합니다. SVG와 고해상도 PNG 폴백을 함께 사용하는 듀얼 포맷 방식을 권장합니다.
문서의 head 영역에 추가해야 할 정확한 코드는 다음과 같습니다:
<link rel='icon' type='image/svg+xml' href='/icon.svg'>
<link rel='icon' type='image/png' sizes='32x32' href='/icon-32x32.png'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>NTP 바로가기를 위한 모범 사례
코드를 올바르게 작성하는 것은 절반의 성공일 뿐입니다. 디자인 역시 Chrome의 UI 특성을 고려해야 합니다.
- 단순하게 유지하세요: NTP 그리드 아이콘은 작습니다. 텍스트를 빼고 브랜드의 핵심 심볼만 사용하세요.
- 다크 모드를 대비하세요: Chrome의 NTP는 사용자의 OS 테마에 따라 배경색이 바뀝니다. 배경이 투명한 검은색 로고는 다크 모드에서 완전히 사라집니다.
- 최소 32x32 크기를 제공하세요: 16x16은 상단 탭 바에 적합하지만 NTP는 더 많은 픽셀이 필요합니다. 정확한 규격은 2026년 크기 가이드를 확인하세요.
Chrome 바로가기 문제를 해결하려고 아직도 포토샵에서 수동으로 이미지 크기를 조절하고 있다면 시간을 낭비하고 있는 것입니다. Mzu favicondl을 사용하여 Chrome이 요구하는 정확한 SVG 및 PNG 파일과 올바른 HTML 태그를 한 번에 생성하세요.