IMAGE TOOLBOX / GUIDE
파비콘부터 OG 이미지까지, 정확한 크기는 몇 픽셀일까
용도별로 요구하는 픽셀 크기가 다릅니다. 정확한 규격을 정리했습니다.
파비콘(브라우저 탭 아이콘)
브라우저 탭에 표시되는 작은 아이콘입니다. 전통적으로는 16×16px, 32×32px, 48×48px 여러 크기를 하나의 favicon.ico 파일에 담는 방식이 널리 쓰였습니다. 화면 배율(고해상도 디스플레이 등)에 따라 브라우저가 알맞은 크기를 골라 쓰기 때문입니다. 요즘은 PNG 파비콘 하나만 준비하는 경우도 많은데, 자세한 내용은 아래 FAQ를 참고하세요.
Apple Touch Icon과 Android/PWA 아이콘
Apple Touch Icon — 180×180px. iOS에서 웹사이트를 홈 화면에 추가할 때 쓰이는 아이콘입니다.
Android/PWA 아이콘 — 192×192px, 512×512px. 안드로이드 홈 화면 추가나 PWA(웹앱) 설치 시 쓰입니다.
og:image(소셜 공유 미리보기 이미지)
카카오톡, 페이스북, X(트위터) 등에 링크를 공유했을 때 보이는 미리보기 이미지입니다. 1200×630px(1.91:1 비율)이 표준 규격으로 널리 쓰입니다. 이 비율에서 벗어나면 플랫폼에 따라 이미지가 잘려 보일 수 있습니다.
카카오톡은 별도의 전용 태그 없이 표준 og:image만 인식합니다. 다만 og:image를 설정하지 않으면 카카오톡을 포함한 대부분의 플랫폼이 페이지 안에서 임의로 이미지를 찾아 보여주기 때문에, 의도하지 않은 이미지가 미리보기에 노출될 수 있습니다. 링크를 공유하기 전에 원하는 이미지가 제대로 나오는지 미리 확인하는 것이 안전합니다.
브라우저에서 각 크기 만드는 법
이미지 압축 도구의 가로/세로 픽셀 입력란에 원하는 규격을 직접 입력해 필요한 크기로 만들 수 있습니다. 파비콘처럼 여러 크기가 필요하다면 원본 하나를 준비해두고 필요한 크기(16, 32, 48, 180, 192, 512px 등)마다 각각 리사이즈하면 됩니다. og:image는 사진 편집 프로그램으로 1200×630px 비율에 맞춰 미리 크롭한 뒤, 이 사이트의 도구로 정확한 픽셀 크기로 조정하는 것을 권장합니다.
자주 묻는 질문
파비콘을 32×32px 하나만 만들면 안 되나요?
한 가지 크기만으로도 작동은 하지만, 화면 배율이 높은 기기에서는 확대되면서 흐릿하게 보일 수 있습니다. 여러 크기를 함께 준비하면 기기에 맞는 크기가 자동으로 선택됩니다.
og:image 비율을 안 지키면 어떻게 되나요?
플랫폼마다 다르지만, 1.91:1 비율에서 크게 벗어나면 미리보기에서 이미지의 일부가 잘려 보이거나 여백이 생길 수 있습니다.
PWA 아이콘은 꼭 192px과 512px 둘 다 필요한가요?
대부분의 PWA 매니페스트 가이드에서 두 크기를 함께 요구합니다. 192px은 홈 화면 아이콘, 512px은 스플래시 화면 등 더 큰 화면에 쓰입니다.
og:image가 없으면 어떻게 되나요?
카카오톡을 포함한 대부분의 플랫폼이 페이지 안에서 임의로 이미지를 골라 보여줍니다. 의도한 이미지가 아니거나 아예 이미지 없이 텍스트만 보일 수도 있어, og:image를 직접 지정해두는 것이 안전합니다.
파비콘 파일 형식은 꼭 .ico여야 하나요?
아니요. 요즘은 PNG를 파비콘으로 쓰는 경우가 가장 많고, 투명 배경을 지원해 밝은 화면과 어두운 화면 모두에서 무난하게 보입니다. .ico는 구형 브라우저를 위한 호환용으로만 함께 준비해두면 충분합니다.
다크모드 파비콘도 따로 만들어야 하나요?
필수는 아닙니다. 다만 흰색이나 밝은 색 위주의 파비콘은 어두운 배경의 브라우저 탭에서 잘 안 보일 수 있어, 투명 배경에 테두리를 살짝 넣는 등으로 대비를 확보해두면 도움이 됩니다.