Favicon과 Open Graph 세팅

학습 목표

Favicon의 역할을 이해하고, 직접 생성하여 프로젝트에 적용할 수 있다.
**Open Graph(OG)**가 무엇인지 설명하고, SNS 공유 시 미리보기가 왜 중요한지 이해할 수 있다.
OG 메타태그를 Cursor를 활용하여 사이트에 적용할 수 있다.
카카오톡, 페이스북, 트위터 등에서 OG 미리보기를 테스트할 수 있다.

1. Favicon이란?

정의

Favicon = 브라우저 탭 맨 왼쪽에 표시되는 작은 아이콘

브라우저에서 여러 탭을 열었을 때, 각 탭을 구분해주는 작은 아이콘이 바로 Favicon이다. 16x16 또는 32x32 픽셀의 아주 작은 이미지지만, 사이트의 완성도와 전문성을 보여주는 중요한 요소이다.

Favicon이 노출되는 곳

위치	설명
브라우저 탭	여러 탭 사이에서 사이트를 바로 인식
즐겨찾기(북마크)	저장한 사이트를 아이콘으로 구분
검색 결과	구글 검색 결과에 사이트 이름 옆에 표시
모바일 홈 화면	"홈 화면에 추가" 시 앱 아이콘으로 사용
주소창	URL 왼쪽에 표시

Favicon이 없을 때 vs 있을 때

비교 항목	Favicon 없음	Favicon 있음
탭 표시	기본 아이콘 (브라우저 로고)	서비스 고유 아이콘
전문성	미완성된 느낌	완성된 프로젝트 느낌
인식성	여러 탭에서 구분 어려움	한눈에 식별 가능
브랜딩	불가능	서비스 정체성 확립

핵심: 기본 아이콘(예: Vercel 로고, Next.js 로고)이 그대로 남아있으면 "이 사이트는 아직 미완성"이라는 인상을 준다. 우리 서비스 아이콘으로 교체하면 완성된 프로젝트라는 인상을 줄 수 있다.

2. Favicon 생성 과정

Favicon 생성 및 적용 흐름

단계별 상세

단계 1: GPT에게 이미지 생성 요청

GPT(ChatGPT, DALL-E 등)에게 파비콘에 적합한 이미지를 요청한다.

날씨 앱 서비스의 파비콘 이미지를 만들어줘.
- 심플한 디자인
- 밝은 파란색 배경
- 태양과 구름이 포함된 아이콘
- 정사각형 형태
- 배경이 투명하면 좋겠어

단계 2: ICO 파일 변환

favicon.io 접속
"Image" 탭 선택
GPT가 생성한 PNG 이미지 업로드
Download 클릭하여 ICO 파일 다운로드

단계 3: 프로젝트에 적용

다운로드한 파일에서 favicon.ico 추출
프로젝트의 기존 favicon.ico를 교체
- Next.js: /public/favicon.ico
- 일반: 루트 디렉토리의 favicon.ico
npm run dev로 로컬에서 확인
브라우저 탭의 아이콘이 변경되었는지 확인
commit & push → 배포

팁: 브라우저가 이전 Favicon을 캐시하고 있을 수 있다. 강력 새로고침(Ctrl+Shift+R 또는 Cmd+Shift+R)으로 확인한다.

3. Open Graph란?

정의

Open Graph = 사이트가 링크로 공유될 때 어떻게 보일지 정하는 규칙

카카오톡, 페이스북, 트위터, 디스코드 등에서 링크를 공유하면 미리보기 카드가 표시된다. 이 카드에 어떤 이미지, 제목, 설명이 나올지를 결정하는 것이 바로 Open Graph(OG) 메타태그이다.

OG가 없을 때 vs 있을 때

비교 항목	OG 없음	OG 있음
미리보기 이미지	없음 또는 랜덤 이미지	지정한 대표 이미지
제목	URL 또는 HTML title	직접 설정한 제목
설명	없거나 엉뚱한 텍스트	깔끔한 서비스 설명
클릭 유도	낮음 (뭔지 모르겠음)	높음 (한눈에 이해)
전문성	아마추어 느낌	프로 느낌

핵심: OG 설정은 5분 투자로 클릭률을 극적으로 높이는 가장 효율적인 작업이다.

4. OG 설정 과정

OG 메타태그 구성 요소

태그	역할	예시
`og:title`	공유 시 표시되는 제목	"오늘의 날씨 - 실시간 날씨 정보"
`og:description`	공유 시 표시되는 설명	"전국 실시간 날씨, 주간 예보, 미세먼지 정보를 한눈에"
`og:image`	공유 시 표시되는 이미지	`https://myweather.com/og-image.png`
`og:url`	공유되는 페이지의 URL	`https://myweather.com`
`og:type`	콘텐츠 유형	`website`

설정 순서

순서	작업	상세 설명
1	Cursor에게 OG 태그 생성 요청	제목, 설명, 이미지 경로 지정
2	GPT에게 OG 이미지 생성 요청	1200x630 규격 (필수)
3	이미지 크기 조정	규격이 안 맞으면 iloveimg.com에서 변경
4	이미지 저장	`og-image.png`로 이름 변경 → `/public` 폴더에 저장
5	commit & push	자동 배포
6	테스트	각 플랫폼의 디버거 도구로 확인

Cursor에게 요청할 프롬프트 예시

아래 Open Graph 메타태그를 <head> 태그 안에 추가해줘.

<meta property="og:title" content="오늘의 날씨 - 실시간 날씨 정보" />
<meta property="og:description" content="전국 실시간 날씨, 주간 예보, 미세먼지 정보를 한눈에 확인하세요." />
<meta property="og:image" content="https://myweather.com/og-image.png" />
<meta property="og:url" content="https://myweather.com" />
<meta property="og:type" content="website" />

5. OG 데이터 흐름

SNS에서 링크가 공유될 때, OG 태그가 어떻게 작동하는지 이해해두면 문제 발생 시 원인을 빠르게 파악할 수 있다.

6. OG 테스트 도구

OG 태그가 올바르게 적용되었는지 각 플랫폼의 디버거 도구로 확인할 수 있다.

플랫폼	테스트 도구 URL	특이사항
카카오톡	developers.kakao.com/tool/debugger/sharing	캐시 초기화 기능 있음
페이스북/디스코드	developers.facebook.com/tools/debug/	"다시 스크랩" 버튼으로 캐시 갱신
트위터(X)	cards-dev.twitter.com/validator	트위터 카드 미리보기

테스트 방법

위 URL 접속
자신의 사이트 URL 입력
미리보기 확인
이미지, 제목, 설명이 의도한 대로 표시되는지 확인
문제가 있으면 수정 후 다시 스크랩(캐시 초기화)

중요: SNS 플랫폼은 한 번 가져온 OG 정보를 캐시한다. OG 태그를 수정한 후에는 반드시 디버거 도구에서 캐시를 초기화해야 변경사항이 반영된다.

핵심 정리

Favicon은 브라우저 탭, 검색 결과, 즐겨찾기 등에서 사이트를 식별하는 작은 아이콘이다.
GPT로 이미지를 생성하고 favicon.io에서 ICO로 변환하면 쉽게 만들 수 있다.
Open Graph는 SNS 공유 시 미리보기 카드의 내용을 결정하는 메타태그이다.
OG 이미지 규격은 1200x630 픽셀이 표준이다.
설정 후 반드시 각 플랫폼의 디버거 도구로 미리보기를 확인한다.
Favicon과 OG는 5~10분의 투자로 사이트의 완성도를 크게 높이는 효율적인 작업이다.

Favicon과 Open Graph 세팅 ​

학습 목표 ​

1. Favicon이란? ​

정의 ​

Favicon이 노출되는 곳 ​

Favicon이 없을 때 vs 있을 때 ​

2. Favicon 생성 과정 ​

Favicon 생성 및 적용 흐름 ​

단계별 상세 ​

단계 1: GPT에게 이미지 생성 요청 ​

단계 2: ICO 파일 변환 ​

단계 3: 프로젝트에 적용 ​

3. Open Graph란? ​