홈페이지 링크를 카카오톡으로 보냈는데 썸네일이 비어 있거나 엉뚱한 이미지가 나온 적 있나요? 그리고 브라우저 탭에 기본 아이콘이 떠 있다면 브랜드 완성도는 거기서 한 번 떨어집니다. 파비콘과 OG 이미지는 작지만 첫인상에 직접 영향을 주는 설정입니다.
1. 파비콘과 OG 이미지는 무엇이 다를까
| 구분 | 노출 위치 | 역할 |
|---|---|---|
| 파비콘 | 브라우저 탭, 즐겨찾기, 검색 결과 일부 | 사이트를 한눈에 식별하는 작은 아이콘 |
| OG 이미지 | 카카오톡·SNS·메신저 링크 미리보기 | 링크 클릭을 유도하는 대표 썸네일 |
브랜드 일관성을 위한 로고·색상 정리는 브랜드 홈페이지 아이덴티티 가이드를 먼저 참고하면 좋습니다.
2. 파비콘 제작 가이드
권장 규격
- 기본 파일: 정사각형 PNG 또는 SVG, 최소 48×48px 이상의 배수 크기 권장
- 애플 터치 아이콘: 180×180px PNG (아이폰 홈 화면 추가용)
- 안드로이드·웹앱용: 192×192px, 512×512px
디자인 원칙
- 단순하게: 16px로 줄어들어도 알아볼 수 있도록 로고 전체가 아닌 핵심 심볼이나 이니셜을 사용합니다.
- 대비 확보: 밝은 탭과 어두운 탭 모두에서 보이는지 확인합니다.
- 여백 최소화: 작은 크기에서는 여백이 많으면 심볼이 더 작아 보입니다.
- 브랜드 컬러 유지: 로고·사이트와 같은 색을 사용해 일관성을 줍니다.
적용 코드
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-48.png" sizes="48x48" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">구글 검색 결과에 파비콘을 표시하려면 홈페이지에서 접근 가능한 파비콘 파일이 필요하고, 검색 로봇이 접근할 수 있어야 합니다. 반영에는 시간이 걸리므로 오픈 직후 바로 바뀌지 않을 수 있습니다. 로봇 설정은 sitemap·robots.txt 가이드를 참고하세요.
3. OG 이미지 제작 가이드
권장 규격
- 비율: 1.91:1 (예: 1200×630px)
- 파일 형식: JPG 또는 PNG, 용량은 1MB 이하 권장
- 주소: 절대 경로(https://로 시작)로 지정
디자인 원칙
- 핵심 문구는 중앙에: 플랫폼마다 가장자리가 잘릴 수 있어 중요한 요소는 안쪽 안전 영역에 둡니다.
- 글자는 크게, 짧게: 모바일 미리보기는 작게 표시되므로 제목은 2줄 이내로 정리합니다.
- 브랜드 요소 포함: 로고와 대표 색상을 넣어 어떤 사이트인지 바로 알아보게 합니다.
- 페이지마다 다르게: 블로그 글은 글마다, 서비스 페이지는 페이지마다 맞춤 이미지를 쓰면 클릭률이 높아집니다.
4. 메타 태그 작성법
<meta property="og:title" content="페이지 제목" />
<meta property="og:description" content="페이지 설명 (80자 내외)" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/페이지주소" />
<meta property="og:image" content="https://example.com/images/og-page.jpg" />
<meta name="twitter:card" content="summary_large_image" />og:title,og:description은 타이틀·메타 디스크립션 가이드의 원칙대로 페이지마다 고유하게 작성합니다.og:url은 canonical 주소와 같게 맞춥니다.- 이미지 주소가 로그인 필요 경로이거나 robots로 차단되면 미리보기가 나오지 않습니다.
검색 결과 확장용 구조화 데이터는 별도 영역입니다. 함께 설정하려면 스키마 마크업 가이드를 확인하세요.
5. 미리보기가 안 바뀔 때 해결법
SNS와 메신저는 한 번 가져온 미리보기를 캐시해 두어서, 이미지를 바꿔도 이전 썸네일이 계속 보일 수 있습니다.
- 태그가 실제로 배포 사이트에 반영되었는지 페이지 소스 보기로 확인합니다.
- 이미지 파일명을 바꾸고(예: og-v2.jpg) 주소를 새 파일로 교체합니다.
- 카카오톡은 개발자 도구의 공유 디버거 도구에서 캐시를 초기화할 수 있습니다.
- 페이스북·링크드인 등도 각 플랫폼의 공유 디버거로 다시 수집을 요청합니다.
6. 체크리스트
- 파비콘이 브라우저 탭에 정상 표시되는가
- 애플 터치 아이콘이 설정되어 있는가
- OG 이미지가 1200×630px, 1MB 이하인가
- og:title, og:description, og:url, og:image가 모두 있는가
- 카카오톡에 링크를 직접 보내 미리보기를 확인했는가
오픈 전 최종 점검은 오픈 전 검수 체크리스트와 함께 진행하세요. 링크 공유가 방문 전환으로 이어지는 구조는 홈페이지 전환율 가이드에서 확인할 수 있습니다.
자주 묻는 질문 (FAQ)
Q. 파비콘이 검색 결과에 바로 나오지 않는 이유가 뭔가요?
검색엔진이 파비콘을 다시 수집하고 반영하는 데 시간이 걸립니다. 파일이 접근 가능하고 규격에 맞는지 확인한 뒤 기다리거나, 서치콘솔에서 해당 페이지 재수집을 요청해 볼 수 있습니다.
Q. OG 이미지를 바꿨는데 카카오톡에서 예전 이미지가 나와요.
미리보기 캐시 때문입니다. 이미지 파일명을 바꿔 새 주소로 교체하고, 카카오 공유 디버거에서 캐시를 초기화한 뒤 다시 확인하세요.
Q. OG 이미지는 모든 페이지에 같은 걸 써도 되나요?
가능하지만 페이지별로 다른 이미지를 쓰면 공유 시 구분이 쉬워지고 클릭률에 유리합니다. 우선 대표 이미지를 넣고 중요한 글부터 맞춤 이미지로 확장하세요.
Q. 파비콘은 로고 전체를 넣어야 하나요?
작은 크기에서 알아보기 어렵기 때문에 로고 전체보다 핵심 심볼이나 이니셜을 단순화해 사용하는 것이 좋습니다.
마무리
파비콘과 OG 이미지는 한 번 만들어 두면 계속 쓰이는 가장 가성비 높은 브랜딩 설정입니다. 규격만 맞추고 카카오톡으로 직접 보내 확인하는 습관을 들이세요.