파비콘

파비콘은 브라우저 탭, 북마크, 검색 결과에서 웹사이트를 나타내는 작은 아이콘으로, 보통 16x16 또는 32x32픽셀입니다. 웹에서 가장 자주 보이는 브랜드 요소 중 하나입니다.

Related workflow terms: Open Graph 이미지, 이미지 형식.

파비콘 파일 형식과 크기

파비콘은 16x16 ICO 파일 하나에서 시작해, 이제 표시 환경마다 다른 형식과 크기를 묶어 제공하는 방식으로 발전했습니다.

ICO(favicon.ico)는 이전부터 사용한 형식입니다. 파일 하나에 16x16, 32x32, 48x48처럼 여러 크기의 이미지를 넣습니다. 명시적인 link 태그가 없어도 브라우저가 사이트 루트의 /favicon.ico를 자동으로 확인합니다. 이전 브라우저와 일부 기업 환경의 호환성을 위해 여전히 필요합니다.

PNG는 가장 흔한 현대 형식입니다. 32x32, 192x192, 512x512처럼 크기별 PNG 파일을 HTML head의 <link> 태그로 연결합니다. 투명도를 지원하며 현재 브라우저 대부분에서 표시됩니다.

SVG는 가장 유연합니다. 파일 하나를 어떤 크기로 확대해도 픽셀이 깨지지 않습니다. 파일 안에서 @media (prefers-color-scheme: dark)를 비롯한 CSS도 사용해 라이트와 다크 모드에 따라 파비콘을 자동으로 바꿉니다. Chrome, Firefox, Edge가 SVG 파비콘을 지원합니다.

Apple 터치 아이콘은 iOS 사용자가 웹사이트를 홈 화면에 추가할 때 쓰는 180x180 PNG입니다. <link rel="apple-touch-icon">으로 연결하며 둥근 앱 아이콘으로 표시됩니다.

파비콘을 빠짐없이 구성하려면 일반 브라우저 탭용 32x32 PNG, Apple 기기용 180x180 PNG, Android와 PWA 매니페스트용 192x192 및 512x512 PNG, 크기와 다크 모드에 대응하는 SVG, 이전 환경을 위한 favicon.ico를 준비합니다.

파비콘이 표시되는 위치

파비콘은 생각보다 많은 곳에 보입니다.

• 브라우저 탭: 페이지 제목 옆에 16x16 또는 32x32픽셀로 표시되는 기본 위치입니다. 최신 브라우저에서는 탭이 좁아지면 파비콘만 남기도 합니다.
• 북마크와 읽기 목록: 저장한 페이지의 시각적 표식으로 사용해 긴 목록에서 사이트를 찾기 쉽게 합니다.
• 브라우저 방문 기록: 최근 페이지의 제목과 URL 옆에 표시됩니다.
• 검색 결과: Google과 Bing이 검색 결과 옆에 파비콘을 보여 줘 작은 브랜드 표식으로 사용합니다.
• PWA와 모바일 홈 화면: Progressive Web App과 '홈 화면에 추가' 기능은 큰 파비콘 버전을 앱 아이콘으로 사용합니다.
• 탭 그룹과 탭 관리 도구: 탭을 정리하는 브라우저 기능은 사이트를 구분하는 주요 시각 요소로 파비콘을 사용합니다.

파비콘 만드는 방법

단순하고 알아보기 쉬운 디자인부터 시작하세요. 파비콘은 16x16픽셀에서도 구분돼야 합니다. 복잡한 로고, 자세한 일러스트, 글자가 많은 디자인은 이 크기에서 알아보기 어렵습니다. 굵은 형태, 뚜렷한 대비, 최소한의 세부 요소가 효과적입니다.

아이콘은 512x512 이상 큰 크기로 디자인한 뒤 줄입니다. 필요한 모든 크기에서 같은 디자인을 유지하기 쉽습니다. 줄인 버전을 실제 표시 크기로 시험해 브라우저 탭에서 알아볼 수 있는지 확인하세요.

자동화할 때는 색이 있는 글자, 단순한 SVG 모양, 브랜드 아이콘처럼 스타일을 적용한 HTML 요소의 스크린샷을 원본 이미지로 삼습니다. 캡처한 이미지를 필요한 파일 형식과 크기로 줄여 내보냅니다. 빌드 과정에서 파비콘을 코드로 만들고 현행화할 때 활용하는 방식입니다.

파비콘 생성 도구에 원본 이미지 하나를 넣으면 필요한 모든 크기, 파일 형식, 연결용 HTML 마크업을 함께 만들 수 있습니다.

실제 게시 과정에서 관리하기

파비콘은 사이트의 다른 시각 요소와 같은 원본 이미지에서 만들 때 가장 일관됩니다. favicon.ico, 터치 아이콘, 매니페스트 아이콘을 따로 내보내지 말고 고해상도 원본 하나를 유지한 뒤 출시 준비 과정에서 필요한 크기를 만드세요. 탭, 북마크, PWA, 검색 결과 사이의 디자인 차이를 줄입니다.

흔한 실수

• favicon.ico만 사용합니다. ICO 하나로는 Apple 터치 아이콘, Android 매니페스트 아이콘, SVG 다크 모드를 지원하지 못합니다. 여러 플랫폼에서 일정하게 보이도록 필요한 형식과 크기를 모두 제공하세요.
• 세부 요소를 너무 많이 넣습니다. 브라우저 탭의 파비콘은 16x16픽셀로 표시됩니다. 가는 선, 작은 글자, 복잡한 형태는 뭉개집니다. 가장 알아보기 쉬운 형태만 남기세요.
• 투명도를 잊습니다. 투명 배경이 없는 파비콘은 브라우저 탭과 북마크 막대에서 아이콘 뒤에 단색 사각형을 표시합니다. 투명 배경이 있는 PNG나 SVG를 사용하세요.
• 다크 모드에서 시험하지 않습니다. 어두운 파비콘은 어두운 브라우저 탭에서 보이지 않을 수 있습니다. CSS 미디어 쿼리가 있는 SVG로 밝고 어두운 버전을 나누거나 두 배경에서 모두 대비되는 색을 고르세요.
• 캐시를 무시합니다. 브라우저는 파비콘을 오래 캐시합니다. 파비콘을 바꾼 뒤에는 URL에 버전 문자열을 더하거나 파일 이름을 바꿔 새 파일을 받도록 하세요.