2026-10-02

구글 검색에 내 파비콘이 안 보이거나 안드로이드 홈 화면에서 동그랗게 잘리는 이유

파비콘은 작은 정사각형 이미지 하나로 서로 다른 세 가지 역할을 동시에 합니다. 브라우저 탭에 표시되고, 구글 검색결과에서 내 사이트 목록 옆에 뜨며, 누군가 내 사이트를 폰 홈 화면에 추가하면 바로 그 그림이 매일 누르는 앱 아이콘이 됩니다. 이 세 곳은 각자 따로 정해둔 모양·크기·파일형식 규칙이 있고 — 그 규칙은 각각 다른 문서에 흩어져 있습니다 — 한 곳에 맞춰 만든 아이콘이 나머지 두 곳에서는 아예 안 보이거나 보기 흉하게 잘릴 수 있습니다.

구글 검색이 실제로 요구하는 것 — 그리고 요즘 흔한 기본값 하나가 이걸 깨는 이유

구글의 공식 Search Central 파비콘 문서는 정확한 수치를 제시합니다. 이미지는 정사각형(가로세로 비율 1:1)이어야 하고 최소 8×8픽셀 이상이어야 하며, “여러 화면에서 잘 보이도록” 48×48픽셀보다 크게 만들 것을 권장합니다. 또한 구글 검색이 받아들이는 파비콘 파일형식을 정확히 나열합니다: BMP, GIF, ICO, PNG, JPEG, PPM, TIFF.

이 목록에 WebP는 없습니다. 이게 중요한 이유는, 요즘 다른 이미지 최적화 조언 대부분이 일반 웹 사진에는 WebP를 쓰라고 권하기 때문입니다 — 용량은 작고 화질은 같으니까요. 파비콘에도 같은 기본값을 적용하면, 구글 공식 문서에 따르면 검색결과에는 색인되지 않습니다 — 브라우저 탭에서는 멀쩡히 잘 보이는데도 말입니다. 브라우저와 구글 검색이 이 파일을 완전히 다른 두 시스템 으로 읽기 때문입니다. 같은 문서는 놓치기 쉬운 규칙 두 가지를 더 밝힙니다: 구글 검색은 사이트당 (여기서 “사이트”는 호스트네임 기준) 파비콘 하나만 지원하며, 파비콘의 URL은 안정적 으로 유지돼야 합니다 — URL을 자주 바꾸거나 robots.txt로 그 경로를 차단해두면 이 역시 표시를 막을 수 있습니다.

같은 아이콘이 안드로이드에서는 동그랗게 잘려 나오는 이유

안드로이드 8.0부터 기기와 런처에 따라 앱 아이콘을 원형·둥근 사각형·스퀴클(squircle) 등 다양한 모양으로 렌더링하는데, 이를 적응형 아이콘(adaptive icon)이라 부릅니다. 웹사이트의 “홈 화면에 추가” 기능을 떠받치는 표준인 웹 앱 매니페스트(Web App Manifest) 명세는 사이트가 아이콘을 제공하는 방법을 두 가지로 나눕니다. purpose: "any"로 표시한 일반 아이콘은 안드로이드가 그냥 크기를 조정해 단색 배경 박스 위에 올려놓습니다 — 파비콘을 그대로 홈 화면 아이콘으로 재사용하면 작은 흰 카드 안에 들어 있는 것처럼 보이는 이유가 이것입니다. 반면 purpose: "maskable"로 표시한 마스커블(maskable) 아이콘은 그 배경 박스를 없애고 안드로이드가 그림 자체를 자신의 네이티브 모양대로 바로 잘라내게 합니다 — 단, 로고의 중요한 부분이 정해진 안전영역(safe zone) 안에 있을 때만 안전합니다. 이 명세(web.dev 문서화)는 안전영역을 아이콘 중심에서 너비의 40%를 반지름으로 하는 원으로 정의 합니다. 그 바깥 테두리 — 각 가장자리 바깥쪽 약 10% — 에 있는 내용은 기기가 적용하는 마스크 모양에 따라 완전히 잘려나갈 수 있습니다.

실제로 이는, 사각형 가장자리까지 꽉 채운 로고 — 일반 파비콘으로는 딱 맞아 보이는 바로 그 모양 — 가 누군가 내 사이트를 안드로이드 홈 화면에 마스커블 아이콘으로 추가하는 순간 모서리를 잃어버릴 가능성이 가장 큰 모양이라는 뜻입니다.

같은 원본 그림도 형식과 안전영역을 확인하지 않고 내보내면 구글의 형식 규칙에 걸리거나 안드로이드 홈 화면 아이콘에서 가장자리를 잃지만, 여백을 두고 크롭한 뒤 알맞은 프리셋으로 리사이즈하고 PNG로 컨버트하면 세 곳 모두를 통과합니다.

실제로 쓰이는 크기들

아이콘	크기	형식	이유
브라우저 탭 / 일반 파비콘	32×32, 48×48보다 크게 권장	PNG 또는 ICO	구글: “여러 화면에서 잘 보이도록 48×48px보다 크게”
구글 검색결과 아이콘	같은 파일, 정사각형, 8×8 이상	PNG, ICO, GIF, BMP, JPEG, PPM, TIFF — WebP 제외	구글 Search Central 공식 지원형식 목록
애플 터치 아이콘(iOS 홈 화면)	180×180	PNG	오래된 관행(홈 화면 슬롯 60pt × 3x 레티나)으로, 애플의 지금은 보관(archive)된 Safari 웹 콘텐츠 가이드에서 유래 — 애플이 현재 유지보수 중인 가이드라인에는 이 픽셀표가 더 이상 없음
안드로이드 / PWA 매니페스트 아이콘	192×192, 512×512, `purpose: "any"`	PNG	웹 앱 매니페스트 명세
마스커블 안드로이드 아이콘	512×512, 로고는 안쪽 ~80% 안에	PNG, `purpose: "maskable"`	안전영역 명세: 중심에서 반지름 40%인 원, 바깥쪽 약 10%는 잘릴 수 있음

nearIMG로 이 세트 만들기

정사각형 원본에서 시작하세요. 로고가 이미 1:1이 아니라면 먼저 진짜 정사각형으로 크롭하세요 — 정사각형이 아닌 이미지를 고정 크기 리사이즈에 그대로 넣으면 잘리는 대신 늘어납니다.
마스크를 위한 여백을 남기세요. 결과물을 마스커블 홈 화면 아이콘으로도 쓸 거라면, 위의 40% 반지름 안전영역에 맞춰 로고의 주요 모양을 프레임 중앙 약 80% 안에 두세요 — 그래야 안드로이드의 원형·스퀴클 마스크가 로고를 침범하지 않습니다.
nearIMG에 이미 있는 프리셋을 쓰세요. 소셜 도구의 프리셋 목록에는 “웹/블로그” 그룹 안에 파비콘(512×512) 프리셋과 앱 아이콘(192×192) 프리셋이 이미 들어 있어서, 이 두 크기는 픽셀 숫자를 직접 입력할 필요가 없습니다. 나머지 크기(32×32, 180×180)는 리사이즈로 바로 처리하면 됩니다.
원본 형식이 무엇이든 명시적으로 PNG로 컨버트하세요. PNG는 구글 검색도, 모든 브라우저의 <link rel="icon">도, 웹 앱 매니페스트 명세도 받아들입니다 — 반면 WebP는 구글 공식 문서의 파비콘 지원형식 목록에서 빠진 바로 그 형식이면서, 동시에 일반적인 이미지 내보내기 조언이 가장 흔히 기본값으로 삼는 형식이기도 합니다.
nearIMG는 이 모든 과정을 브라우저 안에서만 처리하므로, 다른 곳에는 올리고 싶지 않은 브랜드 키트에서 뽑은 원본 파일이 내 기기 밖으로 나가지 않습니다.

이게 못 하는 것

여러 해상도를 한 파일에 묶는 .ico 컨테이너는 만들지 못합니다. 옛 윈도우 방식의 .ico 형식은 여러 크기(16/32/48px)를 한 파일에 묶을 수 있지만, nearIMG는 대신 순수한 PNG를 내보냅니다. 구글 검색과 요즘 모든 브라우저의 <link rel="icon" type="image/png">에는 이것으로 충분하지만, 쓰고 있는 CMS가 굳이 .ico 파일 하나를 요구한다면 그 파일만은 별도의 아이콘 패키징 도구가 필요합니다.
HTML이나 매니페스트 항목을 대신 작성해주지는 않습니다. 이미지 파일이 준비된 뒤에는 <link rel="icon">, <link rel="apple-touch-icon">, 매니페스트의 icons 배열을 직접 추가해야 합니다(또는 사이트 빌더가 대신 넣게 하세요).
실제 기기에서 마스크가 어떻게 보이는지 미리보기는 하지 못합니다. 공개 전에 마스커블 아이콘이 정확히 어떻게 잘릴지 보려면 무료 도구인 maskable.app 같은 전용 미리보기가 표준적인 확인 방법입니다.

한 줄 요약

구글 공식 Search Central 문서는 색인하는 파비콘 형식을 정확히 밝힙니다 — BMP, GIF, ICO, PNG, JPEG, PPM, TIFF — 그리고 요즘 다른 이미지 최적화 조언 대부분이 기본값으로 권하는 WebP는 여기 없습니다. 별개로, 웹 앱 매니페스트의 마스커블 아이콘 명세는 로고의 중요한 내용이 중심에서 너비의 40%인 안전영역 안에 있어야 한다고 요구합니다 — 그렇지 않으면 안드로이드가 홈 화면 아이콘 모양으로 자를 때 가장자리를 잃을 수 있습니다. 한편 애플의 180×180 터치 아이콘 관행은 애플의 현재 가이드가 아니라 보관된 옛 개발자 가이드에만 남아 있습니다. 여백을 두고 정사각형으로 크롭한 뒤, nearIMG에 내장된 파비콘·앱 아이콘 프리셋으로 리사이즈하고, 명시적으로 PNG로 컨버트하면 같은 원본 파일 하나로 세 곳 모두를 처리할 수 있습니다.