파비콘(Favicon)은 작은 크기이지만 브랜드 신뢰도와 브라우저 탭 식별성을 좌우하는 중요한 웹 에셋입니다. 과거에는 단일 16x16 ICO 파일로 충분했으나, 고밀도 레티나 디스플레이와 스마트폰 홈 화면 바로가기 기능이 보편화되면서 정교한 멀티 패키지 구성이 필수화되었습니다.
웹 개발 표준
웹 표준 파비콘 규격과 브라우저별 링크 태그 마크업
데스크톱 브라우저, 애플 iOS 홈 화면 북마크, 안드로이드 PWA 환경을 모두 만족하는 멀티 사이즈 파비콘 세트 구성과 최신 HTML 마크업 표준입니다.
imageconv 기술 연구팀· Web Standard & UX Engineer
발행 2026-09-02
읽는 시간 6분
목차 바로가기
핵심 스펙 및 성능 비교 매트릭스
| 파일 규격 | 해상도 | 용도 | 호환 환경 |
|---|---|---|---|
| favicon.ico | 32 x 32 px (멀티레이어) | 구형 브라우저 및 탭 기본 아이콘 | 100% 모든 브라우저 |
| favicon-32x32.png | 32 x 32 px | 표준 데스크톱 브라우저 탭 | Chrome, Safari, Edge, Firefox |
| apple-touch-icon.png | 180 x 180 px | iOS 사파리 홈 화면 추가 아이콘 | iPhone, iPad |
| android-chrome-512x512.png | 512 x 512 px | 안드로이드 PWA 설치 스플래시 화면 | Android PWA |
온디맨드 브라우저 무료 변환
웹사이트 이미지를 WebP로 지금 즉시 변환해 보세요
설치나 회원가입 없이 브라우저 메모리 안에서 용량을 70% 줄이고 구글 코어 웹 바이탈을 개선할 수 있습니다.
자주 묻는 질문과 답변
파비콘 배경을 투명하게 만들어야 하나요?
브라우저 탭용 파비콘은 다크모드/라이트모드 탭 바 모두에서 잘 보이도록 외곽선 대비를 고려한 투명 배경 PNG가 권장되며, Apple Touch Icon은 iOS 정책상 흰색 또는 브랜드 배경색을 채우는 것이 좋습니다.
관련 키워드 태그
파비콘 규격favicon.ico 표준Apple Touch IconPWA 매니페스트 아이콘파비콘 HTML 태그
함께 읽으면 좋은 연관 칼럼
Nextjs Image 컴포넌트 자동 최적화와 ISR 연동
Next.js의 next/image 컴포넌트 내부 동작 원리, On-Demand 이미지 리사이징, Vercel CDN 캐싱 및 원격 도메인 보안 설정을 심층 분석합니다.
SNS 썸네일 규격별 최적 해상도와 오픈그래프 이미지
카카오톡, 페이스북, 트위터, 인스타그램 링크 공유 시 썸네일이 잘리거나 흐려지지 않도록 하는 오픈그래프(OG) 이미지 규격과 최적 압축 가이드입니다.
SVG PNG 변환 시 고해상도 렌더링 배율과 래스터화 원리
수학적 벡터 패스를 비트맵 픽셀로 변환할 때 계단 현상 없이 4K 및 8K 초고화질 PNG로 렌더링하는 브라우저 Canvas 래스터화 테크닉을 다룹니다.