파비콘 & 오픈그래프 이미지 사이즈 완벽 가이드 (2026 최신)

최종 업데이트: 2026년 3월 | 파비콘, OG 이미지, PWA 아이콘, 웹 로고 — 웹사이트에 필요한 모든 이미지 규격 총정리

웹사이트를 만들 때 빠뜨리기 쉬운 것이 바로 파비콘과 오픈그래프(OG) 이미지입니다. 브라우저 탭에 표시되는 작은 아이콘부터 카카오톡·슬랙에 공유될 때 보이는 미리보기 이미지까지, 규격에 맞지 않으면 전문성이 떨어져 보입니다. 이 가이드에서 모든 규격을 확인하고 resize.co.kr에서 한번에 변환하세요.

---

목차

1. 파비콘(Favicon) 사이즈
2. Apple Touch Icon 사이즈
3. 오픈그래프(OG) 이미지 사이즈
4. 카카오톡 OG 이미지 사이즈
5. 트위터 카드 이미지 사이즈
6. PWA 아이콘 사이즈
7. 웹사이트 로고 사이즈
8. 전체 웹사이트 이미지 사이즈 한눈에 비교
9. 자주 묻는 질문 (FAQ)

---

파비콘(Favicon) 사이즈 {#favicon}

파비콘은 브라우저 탭, 북마크, 검색 결과 등에 표시되는 웹사이트의 작은 아이콘입니다. 다양한 환경에서 선명하게 표시되려면 여러 사이즈를 함께 준비해야 합니다.

파비콘 필수 사이즈 규격표

파비콘 HTML 설정 코드

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="shortcut icon" href="/favicon.ico">

핵심 포인트:

• 최소 16x16, 32x32, 48x48 3종은 반드시 준비
• ICO 파일은 레거시 브라우저(IE 등) 호환용으로 16+32+48을 하나의 파일에 포함
• SVG 파비콘은 다크모드 대응 가능 (CSS media query 포함 가능)
• 구글 검색 결과에 표시되려면 48x48px 이상 필수

---

Apple Touch Icon 사이즈

Apple Touch Icon은 iPhone/iPad에서 웹사이트를 홈 화면에 추가할 때 표시되는 아이콘입니다.

Apple Touch Icon 규격표

Apple Touch Icon HTML 설정 코드

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

핵심 포인트:

• 180x180px 하나만 준비하면 iOS가 자동으로 다운스케일
• 투명 배경 불가 — 투명 영역은 검정으로 채워짐
• 모서리 라운딩은 iOS가 자동 적용하므로 원본은 정사각형으로
• PNG 포맷 필수, 알파 채널 없이 저장 권장

---

오픈그래프(OG) 이미지 사이즈 {#og}

오픈그래프 이미지는 URL을 SNS나 메신저에 공유했을 때 표시되는 미리보기 이미지입니다. 페이스북이 만든 표준이지만 현재 대부분의 플랫폼에서 사용합니다.

OG 이미지 플랫폼별 규격표

OG 이미지 메타태그 설정

<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">

핵심 포인트:

• 1200x630px이 거의 모든 플랫폼에서 통용되는 황금 규격
• 파일 용량은 5MB 이하 권장 (8MB 초과 시 표시 안 되는 플랫폼 있음)
• JPG 포맷 권장 (용량 대비 품질 최적)
• 중요 텍스트/로고는 이미지 중앙 60% 영역에 배치 (플랫폼별 크롭 대비)

---

카카오톡 OG 이미지 사이즈

카카오톡은 한국에서 가장 많이 사용되는 메신저로, 링크 공유 시 OG 이미지가 크게 표시됩니다. 카카오톡만의 추가 규격이 있습니다.

카카오톡 링크 미리보기 규격표

카카오톡 OG 디버거

카카오톡 미리보기가 업데이트되지 않을 때:

1. 카카오 OG 초기화 도구 접속
2. URL 입력 후 캐시 초기화
3. 다시 공유하면 새 이미지 반영

핵심 포인트:

• 카카오톡은 800x420px를 별도로 준비하면 가장 선명
• 1200x630px OG 이미지도 호환되지만 약간 크롭될 수 있음
• 캐시가 강해서 이미지 변경 후 반드시 디버거로 초기화 필요
• 이미지 내 텍스트 20% 제한은 없지만, 깔끔한 이미지가 클릭률 높음

---

트위터 카드 이미지 사이즈

트위터(X)는 오픈그래프와 별도로 트위터 카드(Twitter Card) 전용 메타태그를 사용합니다.

트위터 카드 규격표

트위터 카드 메타태그 설정

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/twitter-card.jpg">
<meta name="twitter:image:alt" content="이미지 설명">

핵심 포인트:

• Summary Large Image (1200x628) 가 가장 일반적
• og:image와 거의 같은 사이즈이므로 1200x630px 하나로 대응 가능
• 최소 사이즈: 300x157px (이 이하면 카드 표시 안 됨)
• 최대 파일 용량: 5MB

---

PWA 아이콘 사이즈 {#pwa}

PWA(Progressive Web App)는 웹사이트를 앱처럼 설치할 수 있게 해주는 기술입니다. 설치 시 홈 화면 아이콘과 스플래시 스크린에 사용될 이미지가 필요합니다.

PWA 아이콘 필수 규격표

PWA manifest.json 설정

{
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

핵심 포인트:

• 192x192 + 512x512 최소 2개는 반드시 필요
• maskable 아이콘은 safe zone (아이콘 중앙 80%) 안에 핵심 디자인 배치
• PNG 포맷 필수, 투명 배경 가능
• Chrome DevTools → Application → Manifest에서 아이콘 검증 가능

---

웹사이트 로고 사이즈 {#logo}

웹사이트 로고는 헤더, 푸터, 이메일 서명 등 다양한 곳에 사용됩니다. 표시 환경에 따라 적절한 사이즈를 준비해야 합니다.

웹사이트 로고 권장 규격표

핵심 포인트:

• 레티나 디스플레이 대응을 위해 표시 크기의 2배 해상도로 준비
• SVG 포맷이 가장 이상적 (벡터 → 모든 사이즈에서 선명)
• PNG 사용 시 투명 배경 유지
• 구글 구조화 데이터(Schema.org)에서는 로고 112x112px 이상 필요

---

전체 웹사이트 이미지 사이즈 한눈에 비교

원본 이미지 권장 사양

웹사이트 이미지를 한번에 만들려면 다음 원본을 준비하세요:

---

resize.co.kr로 웹사이트 이미지 한번에 만들기

위 모든 이미지를 하나하나 만들 필요 없습니다. resize.co.kr의 웹사이트 팩을 사용하면:

1. 정사각형 로고 하나 업로드
2. 파비콘 4종 + Apple Touch Icon + PWA 아이콘 2종 자동 생성
3. OG 이미지 원본 업로드 → 페이스북/카카오/트위터 OG 이미지 자동 변환
4. 폴더별 정리된 ZIP 파일로 다운로드

지금 바로 변환하기 → resize.co.kr

---

자주 묻는 질문 (FAQ)

파비콘 사이즈는 몇 가지를 준비해야 하나요?

최소 **3가지(16x16, 32x32, 48x48)**를 준비하세요. 여기에 Apple Touch Icon(180x180)과 SVG 파비콘까지 추가하면 모든 환경을 커버할 수 있습니다. resize.co.kr에서 로고 하나로 모든 사이즈를 한번에 생성할 수 있습니다.

파비콘은 어떤 포맷이 좋나요?

PNG가 표준이며, 레거시 브라우저 호환을 위해 ICO 파일도 함께 준비하는 것이 좋습니다. 최신 브라우저는 SVG 파비콘도 지원하여 다크모드 대응까지 가능합니다.

오픈그래프(OG) 이미지 사이즈는 어떻게 되나요?

1200x630px이 거의 모든 플랫폼(페이스북, 링크드인, 슬랙, 디스코드)에서 통용되는 표준 사이즈입니다. 한국 서비스라면 카카오톡용 800x420px도 별도로 준비하면 최적의 미리보기를 얻을 수 있습니다.

카카오톡 OG 이미지가 업데이트 안 돼요

카카오톡은 OG 이미지를 강하게 캐싱합니다. 카카오 디버거에서 URL을 입력해 캐시를 초기화한 후 다시 공유하면 새 이미지가 반영됩니다.

네이버 OG 이미지 사이즈는 다른가요?

네이버 블로그/카페에서는 자체 OG 파서를 사용하며 800x420px 내외로 표시됩니다. 1200x630px 이미지를 사용해도 호환되지만, 네이버 최적화가 중요하다면 800x420px를 별도로 준비하세요.

PWA 아이콘은 꼭 필요한가요?

웹사이트를 앱처럼 설치 가능하게 만드는 PWA를 구현한다면 필수입니다. 192x192px과 512x512px 최소 2개가 필요하며, maskable 아이콘도 함께 준비하면 안드로이드에서 더 예쁘게 표시됩니다.

Apple Touch Icon은 몇 가지 사이즈가 필요한가요?

180x180px 하나만 준비하면 됩니다. iOS가 자동으로 각 기기에 맞게 다운스케일합니다. 단, 투명 배경은 지원되지 않으므로 배경색을 반드시 지정해야 합니다.

웹사이트 로고 권장 사이즈는 어떻게 되나요?

헤더 로고는 250x60~80px (레티나용 500x120160px), 푸터 로고는 200x5060px이 적합합니다. SVG 포맷으로 준비하면 모든 화면 크기에서 선명하게 표시됩니다.

파비콘과 Apple Touch Icon은 같은 이미지를 쓸 수 있나요?

같은 로고를 사용할 수 있지만, 파비콘은 매우 작게 표시되므로 단순화된 버전을 사용하는 것이 좋습니다. 예를 들어 로고의 심볼(마크) 부분만 사용하면 16x16px에서도 식별이 쉽습니다.

OG 이미지에 텍스트를 넣어도 되나요?

네, 가능합니다. 하지만 플랫폼마다 이미지를 다르게 크롭할 수 있으므로 중요 텍스트는 이미지 중앙 60% 영역에 배치하세요. 글자 크기는 최소 28px 이상이어야 모바일에서 읽을 수 있습니다.

트위터 카드와 OG 이미지를 따로 만들어야 하나요?

1200x630px 하나로 대응 가능합니다. 트위터는 og:image를 자동으로 읽어오며, 별도 twitter:image 메타태그를 설정하면 우선 적용됩니다. 둘 다 거의 같은 비율(약 1.91:1)이므로 하나의 이미지로 충분합니다.

이미지 용량은 얼마나 작아야 하나요?

파비콘은 100KB 이하, OG 이미지는 1MB 이하를 권장합니다. 파일이 너무 크면 로딩 속도가 느려지고, 일부 플랫폼에서 미리보기가 생성되지 않을 수 있습니다. resize.co.kr에서 자동으로 최적 용량으로 변환합니다.

다크모드 파비콘은 어떻게 만드나요?

SVG 파비콘을 사용하면 CSS prefers-color-scheme 미디어 쿼리로 다크모드 대응이 가능합니다. SVG 파일 내에 <style> 태그를 넣어 라이트/다크 모드별 색상을 지정할 수 있습니다.

---