파비콘이란? 웹사이트에 파비콘을 추가하는 방법

"좋은 것들은 작은 포장에 담겨 있다(good things come in small packages)"라는 격언은 작지만 중요한 파비콘에도 그대로 적용됩니다. 이 작은 브랜드 배지들은 1990년대 Internet Explorer(인터넷 익스플로러) 시절부터 웹 브라우저에 등장해 브라우저 탭과 북마크 화면에 표시되어 왔습니다. 파비콘은 고객이 여러분의 웹사이트를 회사의 브랜드 정체성과 연관 짓도록 돕는 시각적 요소 역할을 합니다.

이제 일반적인 브라우저 아이콘에서 벗어날 때입니다. 간단한 작업으로도 파비콘을 만들어, 고객이 수많은 탭으로 가득한 브라우저 창에서 여러분의 사이트를 더욱 쉽게 탐색하도록 할 수 있습니다.

파비콘이란 무엇인가요?

파비콘은 웹 브라우저 탭의 페이지 제목 옆, 북마크 바, 즐겨찾기 바, 브라우저 기록 결과, 그리고 검색 엔진 결과 페이지(SERP)에 나타나는 작은 그래픽입니다.

‘Favorite icon(즐겨찾기 아이콘)’의 합성어인 파비콘(favicon)은 웹사이트의 시각적 북마크 역할을 하며, 여러 개의 탭을 열어둔 상태에서도 사용자가 웹페이지를 쉽게 식별할 수 있도록 돕습니다. 웹사이트가 최소화되면 파비콘이 작업 표시줄의 바로가기 아이콘으로 표시될 수 있습니다. 사용자가 웹사이트를 북마크에 추가하면, 파비콘은 북마크 아이콘으로도 사용되어 저장된 여러 웹페이지 중에서 해당 사이트를 더 쉽게 찾을 수 있습니다.

일부 운영체제에서는 브라우저 창에서 URL을 바탕화면으로 끌어다 놓을 경우 데스크톱 바로가기 아이콘이 생성되며, 브라우저 파비콘이 이러한 바로가기 아이콘으로 재사용되기도 합니다.

파비콘이 웹사이트의 검색 엔진 최적화(SEO) 순위를 마법처럼 끌어올리지는 않지만, 다른 UX 디자인 개선 요소와 함께 적용하면, 더욱 사용자 친화적인 웹사이트를 만드는 데 도움이 됩니다. 다음은 파비콘이 웹사이트 성능에 도움이 되는 몇 가지 구체적인 방법입니다.

클릭률 증가

Google(구글) 및 기타 검색 엔진은 검색 결과에 파비콘을 표시합니다. 눈에 띄거나 쉽게 인식할 수 있는 파비콘은 브랜드 인지도를 높여 사용자가 웹사이트를 방문할 가능성을 높입니다. 이는 클릭률을 향상시키며, SEO에서 중요한 전자상거래 지표로 작용합니다.

브랜드 인지도 구축

브랜드 로고와 일관성 있는 파비콘을 사용하면, 사용자의 북마크 바나 웹사이트 탭, SERP 등에서 무료 광고처럼 작용하여 브랜드 인지도를 강화하는 데 도움이 됩니다.

사용자 경험 및 체류 시간 개선

즉시 인식 가능한 파비콘은 사용자가 웹페이지를 북마크할 가능성을 높이며, Google과 같은 검색 엔진은 이를 긍정적인 신호로 인식합니다. 이러한 작은 UX 개선만으로도 재방문을 유도하고 웹사이트 트래픽과 체류 시간(사용자가 SERP로 돌아가기 전까지 머무는 시간)을 늘리는 데 도움이 됩니다.

웹사이트용 파비콘 제작 가이드라인

적절한 크기 선택
호환 가능한 파일 형식 선택
애니메이션 파비콘 고려

파비콘은 올바르게 만들려면 특정한 크기와 파일 형식 요구사항을 충족해야 합니다.

적절한 크기 선택

파비콘의 이상적인 크기는 16픽셀 x 16픽셀이지만, 일부 파비콘은 32픽셀 x 32픽셀 또는 48픽셀 x 48픽셀로 디자인되기도 합니다. 16 x 16 크기는 모든 웹 브라우저 디스플레이(주소 표시줄, 탭, 북마크 화면)에서 지원되므로 가장 안전한 선택입니다.

호환 가능한 파일 형식 선택

이미지를 파비콘으로 원활하게 변환하려면 원본 파일 형식이 중요합니다. 파비콘 제작에 가장 일반적으로 사용되는 파일 형식은 PNG와 ICO입니다. PNG 파일은 무손실 데이터 압축과 투명도를 지원하므로, 크기 조정 시 이미지 품질이 손상되지 않습니다. Microsoft Windows Explorer(마이크로소프트 윈도우 익스플로러)에서 사용되는 ICO 파일은 여러 크기와 색상 깊이로 된 이미지 버전들을 함께 포함하고 있어 쉽게 크기를 조정할 수 있습니다. SVG 형식은 아직 모든 브라우저에서 널리 지원되지는 않지만, 로딩 속도가 빠르고 크기에 상관없이 선명한 확장이 가능합니다. 반면 JPEG 형식은 크기를 줄일 때 이미지 데이터가 일부 손실될 수 있으므로 사용을 피하는 것이 좋습니다.

애니메이션 파비콘 고려

애니메이션 GIF나 자바스크립트 파일을 사용하면 시각적인 매력을 더할 수 있지만, 브라우저 호환성 등 몇 가지 제한 사항이 있습니다. Google Chrome(구글 크롬)에서는 잘 보이더라도 다른 브라우저에서는 제대로 작동하지 않을 수 있으므로, 여러 브라우저에서 애니메이션 파비콘을 테스트하는 것이 좋습니다.

주요 파비콘 생성기

온라인 파비콘 생성기를 사용하여 브랜드 정체성에 맞는 맞춤형 파비콘을 만들 수 있습니다. 대표적인 파비콘 생성기 몇 가지를 소개합니다.

Favicon.io는 이미지 파일, 링크, 또는 텍스트를 활용해 파비콘을 만들고 다양한 형식으로 변환할 수 있는 도구입니다. 변환된 파일을 다운로드해 웹사이트의 루트 디렉토리에 업로드한 뒤, 링크 태그를 복사해 HTML 페이지의 head 태그에 붙여넣으면 됩니다.

RealFaviconGenerator는 마스터 이미지를 어떻게 처리해 파비콘을 생성할지 직접 설정할 수 있는 인터랙티브 API입니다.

Favicon Generator는 플랫폼별로 파비콘을 제작할 수 있으며, 각 플랫폼과 브라우저에서 디자인이 어떻게 표시되는지도 미리 확인할 수 있습니다.

Dan's Tools의 Favicon.ico & App Icon Generator는 기존 이미지를 업로드해 ICO 형식으로 변환하거나, 자체 아이콘 갤러리에서 원하는 디자인을 선택해 사용할 수 있습니다.

HTML에 파비콘 추가하는 방법

사이트의 파비콘을 만든 후에는 웹사이트에 업로드하고 브라우저와 웹 앱이 표시할 수 있도록 코드를 추가해야 합니다.

파비콘에 대한 경로는 웹사이트 HTML 파일의 <head> 섹션에 한 줄의 코드로 나타납니다. 브라우저는 이 헤드 태그의 지시를 읽어 파비콘 파일을 찾아 표시합니다. 예를 들어, 파비콘 파일이 "brandXicon.png"라는 PNG 파일이라고 가정하면, <head></head> 태그 안에 다음 줄을 추가하면 됩니다:

파비콘은 사이트의 어느 디렉토리에나 위치할 수 있습니다. 위의 예시에서는 일반적인 위치인 사이트의 루트 디렉토리에 포함되어 있습니다. 파일 경로가 정확한지 확인하세요.

또한, 여러 크기의 파비콘을 함께 로드할 수도 있습니다. 각 크기마다 한 줄의 코드가 필요하며, 모두 <head> </head> 태그 안에 있어야 합니다. 각 크기에 고유한 파일명을 지정하고 다음과 같이 코드에 "sizes" 속성을 추가하세요.

Shopify 웹사이트에 파비콘 추가 방법

Shopify 웹사이트를 운영한다면 코딩 없이 쉽게 파비콘을 추가할 수 있습니다.

1. 데스크톱 웹 브라우저에서 온라인 스토어 관리자 패널로 이동합니다.

2. Themes’를 선택한 후 ‘Customize’를 클릭해 테마 편집기를 엽니다.

3. 톱니바퀴 아이콘이 표시된 ‘Theme Settings’를 클릭합니다.

4. ‘Favicon’을 선택합니다. 일부 테마에서는 ‘Logo’로 표시될 수 있습니다.

5. 스토어 라이브러리에서 이미지를 선택하거나 새 이미지를 업로드합니다.

6. 가능하다면 접근성을 위해 파비콘의 ‘Alt Text’를 수정합니다. 이 텍스트는 사용자가 파비콘 위에 마우스를 올렸을 때 표시됩니다.

7. 작업을 저장한 뒤, 여러 브라우저에서 파비콘이 정상적으로 표시되는지 테스트합니다.

iPhone이나 Android 기기에서 파비콘을 추가하는 방법에 대한 자세한 정보는 이 주제에 관한 Shopify 도움말 항목을 참조하세요.

WordPress에 파비콘 추가 방법

WordPress 웹사이트에서 파비콘을 추가하는 단계별 가이드를 따르세요.

1. WordPress 대시보드에서 ‘Appearance’를 클릭합니다.

2. 옵션 목록에서 ‘Customize’를 클릭합니다.

3. ‘Site Identity’를 선택합니다. 여기에서 사이트 제목, 태그라인, 로고 등을 설정할 수 있습니다.

4. ‘Site Icon’ 섹션에서 ‘Select Site Icon’을 클릭하고 새 파비콘 이미지를 업로드합니다.

5. ‘Publish’를 클릭해 변경 사항을 적용합니다.

6. 여러 웹 브라우저에서 파비콘이 정상적으로 표시되는지 테스트합니다.

Wix에 파비콘 추가 방법

Wix 웹사이트에는 기본 파비콘이 제공되지만, 프리미엄 플랜 이용자는 파비콘을 사용자 지정할 수 있습니다. Wix 사이트에서 파비콘을 변경하려면 다음 단계를 따르세요.

1. 사이트 대시보드에서 ‘Settings’로 이동합니다.

2. ‘Favicon’ 옆의 ‘Manage’를 클릭합니다.

3. ‘Upload Image’ 또는 ‘Upload Media’를 클릭하여 컴퓨터에서 이미지를 업로드합니다.

4. ‘Add to Page’를 클릭하고 브라우저 탭에서 파비콘이 어떻게 표시되는지 미리 확인합니다.

5. ‘Save’를 클릭한 다음 ‘Publish’를 눌러 적용합니다.

파비콘이란? FAQ

파비콘과 로고는 같은 것인가요?

파비콘(favicon, “즐겨찾기 아이콘”)은 검색 결과, 브라우저 탭, 북마크 바 등에서 사이트의 페이지 이름이나 주소 옆에 표시되는 작은 아이콘으로, 사용자가 웹페이지를 식별할 수 있도록 돕습니다. 반면 로고는 브랜드를 전체 마케팅 영역에서 대표하는 시각적 상징입니다. 대부분의 브랜드는 파비콘과 로고가 동일한 디자인 요소를 공유하며, 로고가 충분히 단순한 경우 두 아이콘이 동일하게 사용되기도 합니다.

파비콘의 예시는 무엇인가요?

파비콘은 주소 표시줄의 웹사이트 URL 옆이나 브라우저 탭의 아이콘으로 표시되며, 사용자가 웹사이트를 시각적으로 인식하고 구별하는 데 도움을 줍니다. 예를 들어, Shopify의 파비콘은 Shopify 로고에서 가져온 “S”가 들어간 쇼핑백 아이콘 형태입니다.

파비콘을 디자인할 수 있는 도구가 있나요?

네, 웹사이트용 파비콘을 손쉽게 디자인할 수 있는 다양한 도구가 있습니다. 일부는 무료로 이용할 수도 있습니다. 대표적인 온라인 생성 도구로는 Favicon.io와 RealFaviconGenerator가 있습니다.