파비콘(Favicon)이란?
파비콘은 브라우저 탭에 표시되는 작은 웹사이트 아이콘입니다. 파비콘의 정의, 권장 사이즈, 제작 방법을 알아보세요.
파비콘(Favicon, Favorite Icon의 줄임말)은 브라우저 탭, 즐겨찾기, 브라우저 기록 등에서 페이지 제목 옆에 표시되는 작은 이미지입니다. 사용자가 여러 탭 사이에서 웹사이트를 빠르게 식별하는 데 도움을 줍니다.
파비콘이 표시되는 곳
파비콘은 다양한 위치에 나타납니다: • 브라우저 탭 — 페이지 제목 옆 • 즐겨찾기 바 — 페이지 저장 시 • 브라우저 방문 기록 — URL 목록에서 • 홈 화면 바로가기 — 모바일에서 사이트 저장 시 • 검색 결과 — 일부 검색엔진이 결과 옆에 표시
파비콘 사이즈 & 형식
원래 파비콘은 16×16픽셀 .ico 파일이었지만, 현대 웹사이트는 여러 사이즈가 필요합니다: • 16×16 — 브라우저 탭 • 32×32 — Windows 작업표시줄, 바로가기 • 48×48 — Windows 바탕화면 • 180×180 — Apple 터치 아이콘 (iPhone 홈 화면) • 192×192, 512×512 — Android 홈 화면 (PWA) PNG 형식이 현재 널리 지원되며 구형 .ico를 대체하고 있습니다.
파비콘 추가하는 방법
1. 정사각형 이미지 준비 (512×512 권장) 2. 필요한 사이즈로 변환 3. 웹사이트 루트 디렉토리에 파일 추가 4. HTML <head>에 링크 태그 추가: <link rel="icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
Try it yourself
파비콘 생성하기파비콘에 대하여
파비콘은 1999년 인터넷 익스플로러 5에서 처음 도입되었습니다. 처음에는 항상 16×16픽셀의 favicon.ico 파일이었지만, 모바일 기기와 고해상도 디스플레이의 등장으로 다양한 사이즈가 필요해졌습니다. 현대 빌드 도구와 프레임워크는 파비콘 생성을 자동화합니다.
FAQ
- 파비콘 사이즈는 어떻게 해야 하나요?
- 512×512 PNG로 시작해서 작은 사이즈를 생성하세요. 브라우저 탭용 16×16·32×32, Apple 기기용 180×180이 기본입니다.
- 파비콘 형식은 무엇이 좋나요?
- PNG가 현대 표준입니다. 하위 호환성을 위해 .ico도 여전히 지원됩니다. 최신 브라우저에서는 SVG 파비콘도 지원이 늘고 있습니다.
- 파비콘이 안 보이는 이유는?
- 주요 원인: 브라우저 캐시(Ctrl+Shift+R로 강력 새로고침), 잘못된 파일 경로, HTML에 <link> 태그 누락, 또는 이미지가 정사각형이 아닌 경우입니다.