파비콘 사이즈 만들기 완벽 가이드

파비콘(Favicon)은 브라우저 탭, 즐겨찾기, 스마트폰 홈화면, PWA 아이콘 등 다양한 위치에 표시되는 소형 아이콘입니다. 사이즈 하나로는 모든 환경을 커버할 수 없기 때문에 여러 사이즈를 함께 준비해야 합니다. 이 가이드에서 파비콘부터 OG 이미지, PWA 아이콘까지 필요한 모든 사이즈를 한눈에 정리했습니다.

파비콘 & 아이콘 전체 사이즈 규격표

이미지 유형	사이즈	파일 형식	배경	사용 위치
Favicon (기본)	16 x 16 px	PNG / ICO	투명	브라우저 탭 (기본)
Favicon (중간)	32 x 32 px	PNG / ICO	투명	브라우저 탭 (고해상도)
Favicon (대)	48 x 48 px	PNG / ICO	투명	Windows 작업표시줄
Apple Touch Icon	180 x 180 px	PNG	흰색 또는 브랜드 컬러	iOS 홈화면 아이콘
Android Chrome (소)	192 x 192 px	PNG	투명 또는 브랜드 컬러	Android 홈화면
Android Chrome (대)	512 x 512 px	PNG	투명 또는 브랜드 컬러	Android 스플래시
Favicon (흰배경-소)	32 x 32 px	PNG	흰색	흰배경 필요 환경
Favicon (흰배경-대)	180 x 180 px	PNG	흰색	흰배경 필요 환경
OG 이미지	1200 x 630 px	JPG	임의	SNS 공유 썸네일
PWA 아이콘 (소)	192 x 192 px	PNG	투명 또는 단색	PWA manifest
PWA 아이콘 (중)	384 x 384 px	PNG	투명 또는 단색	PWA manifest
PWA 아이콘 (대)	512 x 512 px	PNG	투명 또는 단색	PWA manifest, 앱스토어

브라우저 파비콘 (16 / 32 / 48 px)

브라우저 탭에 표시되는 가장 기본적인 파비콘입니다. 세 가지 사이즈를 모두 준비하면 다양한 디스플레이 환경에서 선명하게 표시됩니다.

16 x 16 px: 브라우저 탭의 기본 파비콘 크기
32 x 32 px: 레티나 디스플레이 및 고DPI 화면에서 선명하게 표시
48 x 48 px: Windows 작업표시줄, 브라우저 단축키 설정 등에 사용

구현 방법 (HTML)

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">

Apple Touch Icon (180 x 180 px)

iPhone, iPad에서 웹사이트를 홈화면에 추가할 때 사용되는 아이콘입니다.

사이즈: 180 x 180 px
형식: PNG
배경: iOS가 자동으로 둥근 모서리를 적용하므로, 흰색 배경 또는 브랜드 컬러 배경 사용
투명 배경은 검정으로 채워지는 경우가 있으므로 단색 배경 권장

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

Android 아이콘 (192 / 512 px)

Android Chrome 브라우저에서 홈화면에 추가하거나 스플래시 화면에 표시되는 아이콘입니다.

192 x 192 px: 홈화면 아이콘
512 x 512 px: 스플래시 화면, 앱 설치 시 표시

manifest.json에 등록하여 사용합니다.

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

OG 이미지 (Open Graph, 1200 x 630 px)

카카오톡, 페이스북, 트위터, 슬랙 등 SNS나 메신저에 링크를 공유했을 때 나타나는 미리보기 이미지입니다.

항목	권장값
사이즈	1200 x 630 px
형식	JPG
비율	약 1.91:1
용량	5 MB 이하

사이트 이름, 핵심 메시지, 브랜드 컬러를 포함
텍스트는 읽기 쉽게, 배경과 대비가 명확하게
로고는 좌측 상단 또는 하단에 배치

<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">

PWA 아이콘 (192 / 384 / 512 px)

Progressive Web App(PWA)으로 배포할 때 manifest.json에 등록하는 아이콘 세트입니다.

192 x 192 px: 필수 (최소 요구 사이즈)
384 x 384 px: 중간 해상도 디바이스
512 x 512 px: 필수 (Google Lighthouse PWA 감사 요구 사항)

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

파비콘 제작 핵심 팁

원본은 크게 — 512 x 512 px 이상의 고해상도 원본 SVG 또는 PNG를 먼저 만들고, 모든 작은 사이즈는 여기서 축소 생성하세요.
단순한 디자인 — 16 x 16 px에서도 인식 가능한 단순한 형태가 좋습니다. 복잡한 로고는 아이콘용으로 간략화한 버전을 따로 만드세요.
Safe zone 확보 — 아이콘 전체 크기의 80% 내에 핵심 디자인을 배치하고, 나머지 10%씩은 여백으로 남기세요. (Maskable 아이콘 대응)
다크모드 고려 — 투명 배경 파비콘은 다크모드 브라우저에서 흰색 아이콘이 보이지 않는 문제가 생길 수 있습니다. 흰 배경 버전도 준비해 두세요.
캐시 초기화 — 파비콘을 교체해도 브라우저 캐시 때문에 바로 반영되지 않을 수 있습니다. URL에 버전 파라미터를 붙이거나 파일명을 변경해 강제 갱신하세요.

이미지 준비 체크리스트

favicon-16x16.png (투명 배경)
favicon-32x32.png (투명 배경)
favicon-48x48.png (투명 배경)
apple-touch-icon.png — 180 x 180 px (단색 배경)
android-chrome-192x192.png
android-chrome-512x512.png
og-image.jpg — 1200 x 630 px
pwa-192x192.png (maskable)
pwa-384x384.png
pwa-512x512.png (maskable)
HTML <head>에 link 태그 등록
manifest.json에 아이콘 등록

원문 참고

참고 사이트: favicon.io — 파비콘 생성 도구

resize.co.kr에서 한번에 변환하세요

이미지 한 장만 올리면 위의 모든 사이즈를 자동으로 변환해드립니다. 무료, 회원가입 없음, 서버 전송 없음.

resize.co.kr 바로가기 →