본문으로 건너뛰기

공유 미리보기 이미지·파비콘 규격

링크를 붙였을 때 뜨는 카드 이미지는 가로 1,200 × 세로 630px 한 장, 탭에 뜨는 아이콘은 정사각 512px 한 장이면 대부분의 자리에서 맞습니다. 잘려도 남는 자리, 파비콘을 몇 벌 만드나, 바꿨는데 안 바뀔 때 하는 일을 표로 정리했습니다.

공유 미리보기 이미지·파비콘 규격 — 식스원 블로그

링크를 붙였을 때 뜨는 카드 이미지는 가로 1,200 × 세로 630px 한 장, 브라우저 탭에 뜨는 아이콘은 정사각 512px 한 장 — 이 두 파일이면 대부분의 자리에서 맞습니다. 크기보다 자주 어긋나는 것은 잘리는 자리와 글자 크기입니다. 카드를 정사각으로 잘라 쓰는 곳이 있고, 아이콘은 실제로 16~32px 까지 줄어들기 때문입니다.

공유 미리보기 이미지 — 홈페이지 주소를 채팅이나 사회관계망에 붙였을 때 제목 · 설명과 함께 뜨는 그림입니다. 파비콘 — 브라우저 탭과 즐겨찾기에 뜨는 작은 아이콘입니다.

미리보기 이미지는 어떤 크기로 만드나요

항목 이유
크기1,200 × 630px가로가 세로의 약 1.9배 — 카드가 가장 널리 쓰는 비율입니다
가장 작은 크기600 × 315px이보다 작으면 카드가 아니라 작은 네모로 뜹니다
용량300KB 안팎, 1MB 이하무거우면 그림이 빠지고 글자만 나갑니다
형식JPG 또는 PNG투명 배경은 검게 차는 곳이 있어 배경을 채웁니다
주소홈페이지 전체 주소파일 이름만 적으면 찾아오지 못합니다

대체로 통하는 기준입니다. 붙이는 곳마다 조금씩 다르게 잘라 쓰니, 자주 쓰는 링크는 실제로 한 번 붙여 보고 눈으로 확인합니다. 한 장을 만들어 두면 홈페이지 · 소개 자료 · 문의 답장에 붙이는 링크가 전부 같은 그림으로 뜹니다.

잘려도 남는 자리는 어디인가요

같은 이미지라도 어떤 곳은 가로로 긴 카드로, 어떤 곳은 정사각으로, 어떤 곳은 목록 옆 작은 네모로 자릅니다. 어디서 잘려도 남는 자리는 가운데입니다.

잘리는 모양 남는 자리 여기에 둘 것
가로로 긴 카드1,200 × 630px 전체배경 사진과 분위기
정사각가운데 630 × 630px로고와 핵심 글자 한 줄
목록 옆 작은 네모가운데 절반심벌 하나
글자 없이 그림만이미지 전체그림만으로 무엇인지 알게

글자는 한글 15자 안쪽으로 크게 한 줄만 넣습니다. 문장을 여러 줄 넣으면 목록에서 작게 뜰 때 아무것도 읽히지 않습니다. 가장자리 사방 5% 는 비워 둡니다.

파비콘은 몇 벌을 만드나요

쓰임 크기 만드는 법
원본512 × 512pxPNG 로 만들고, 있으면 SVG 도 함께
브라우저 탭32 × 32px원본에서 줄여 뽑습니다
즐겨찾기 · 목록48 × 48px같은 원본에서 뽑습니다
폰 홈 화면 아이콘180 × 180px모서리가 둥글게 잘리니 안쪽 10% 를 비웁니다

기준은 하나입니다 — 32px 로 줄여 놓고 알아볼 수 있는가. 가로로 긴 로고를 통째로 넣으면 32px 에서는 회색 덩어리가 됩니다. 첫 글자 하나나 심벌만 남기고, 선은 굵게, 색은 두세 가지 안으로 줄입니다. 배경은 투명 대신 색을 채우는 편이 안전합니다 — 탭이 어두운 화면에서 검은 아이콘은 사라집니다.

파비콘은 한 번 만들면 오래 씁니다. 로고를 바꿀 때만 다시 만들면 되니, 512px 원본과 거기서 뽑은 크기들을 한 폴더에 모아 로고 폴더 옆에 둡니다. 나중에 다른 사람이 홈페이지를 손볼 때 그 폴더만 넘기면 됩니다.

페이지마다 다른 이미지를 넣어야 하나요

전부 다르게 만들 필요는 없습니다. 기본 한 장을 두고, 사람들이 실제로 링크를 붙이는 페이지에만 따로 만듭니다.

페이지 쓰는 이미지 넣을 글자
기본 · 그 밖의 모든 페이지대표 이미지 한 장회사 이름과 한 줄 소개
제품 · 서비스 소개그 제품 대표 사진제품 이름
글 · 소식그 글의 대표 이미지글 제목 앞부분
문의 · 찾아오는 길기본 이미지넣지 않습니다

글이 계속 늘어나는 자리는 글마다 이미지를 새로 만들기 어렵습니다. 대표 이미지가 없으면 기본 한 장이 대신 뜨도록 해 두면 빈 카드로 나가는 일은 막을 수 있습니다.

카드에 함께 뜨는 제목과 설명은 몇 자로 적나요

카드는 이미지 · 제목 · 설명 세 덩어리로 뜹니다. 이미지만 맞춰 두고 나머지를 비워 두면 주소가 그대로 나가거나 페이지 첫 문장이 잘려 들어갑니다.

  • 제목은 한글 20자 안쪽 — 넘으면 뒤가 잘립니다. 회사 이름은 앞이 아니라 뒤에 붙입니다
  • 설명은 한글 40자 안쪽 한두 문장 — 잘려도 말이 되도록 앞 문장에 결론을 담습니다
  • 페이지마다 다르게 적습니다 — 전부 같으면 목록에서 어느 링크인지 구분되지 않습니다
  • 느낌표와 특수문자는 넣지 않습니다 — 자리만 차지하고 뜻은 늘지 않습니다

사람이 먼저 보는 것은 이미지, 그다음이 제목입니다. 셋을 한 화면에서 같이 정하면 이미지에 넣은 글자와 제목이 같은 말을 반복하는 일이 줄어듭니다.

바꿨는데 안 바뀌면 어떻게 하나요

한 번 읽어 간 정보를 각 서비스가 얼마간 저장해 둡니다. 그래서 이미지를 새로 올려도 예전 그림이 계속 뜹니다. 가장 빠른 방법은 파일 이름을 바꿔 새 주소로 올리는 것입니다 — 주소가 달라지면 새로 읽어 갑니다.

그다음 확인할 것은 세 가지입니다. 이미지 주소가 전체 주소로 적혀 있는지 · 로그인해야 보이는 폴더에 있지 않은지 · 그 페이지가 수집을 막고 있지 않은지. 셋 다 아니면 저장해 둔 정보가 갱신되기를 기다리면 됩니다. 서비스마다 제공하는 미리보기 확인 도구에 주소를 넣으면 지금 어떤 그림을 읽어 가는지 그 자리에서 보입니다.

오늘 할 일

홈페이지 주소를 자기 자신에게 채팅으로 한 번 보내 봅니다. 카드가 아예 안 뜨거나, 그림 자리에 흰 네모가 뜨거나, 글자가 안 읽히면 미리보기 이미지가 없거나 규격이 어긋난 것입니다. 1,200 × 630px 한 장을 만들어 올리고 파일 이름을 새로 붙인 뒤 다시 보내 확인합니다. 40분이면 끝납니다.

FacebookX
24시간 내 견적 받기
카카오톡 상담식스원 고객센터 카카오톡 채널 (새 창)