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

An animated image of a desktop computer screen with a blue, green, and purple abstract screensaver.

"작은 것들이 좋은 것이라는 속담"은 파비콘(favicon)에도 확실히 적용됩니다. 이 작은 브랜드 배지는 1990년대 인터넷 익스플로러 시절부터 웹 브라우저에 등장해 브라우저 탭과 북마크에 표시되고 있습니다. 파비콘은 고객이 웹사이트를 회사의 브랜드 정체성과 연관 짓도록 도와주는 시각적 요소입니다.

이제 일반적인 브라우저 아이콘을 넘어서야 할 때입니다. 곧바로 눈에 띄고 (탭이 가득한 브라우저 창에서 고객이 쉽게 탐색할 수 있도록) 도움을 주는 파비콘을 만들 수 있습니다. 

파비콘(favicon)이란?

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

'즐겨찾기 아이콘(favorite icon)'의 합성어인 파비콘은 웹사이트의 시각적 북마크 역할을 하며, 여러 개의 탭이 열려 있을 때 사용자가 쉽게 웹 페이지를 식별할 수 있도록 도와줍니다. 웹사이트가 최소화되었을 때 파비콘은 작업 표시줄 바로 가기 아이콘으로 나타날 수 있습니다. 사용자가 웹사이트를 북마크할 때 파비콘은 북마크 아이콘으로도 사용되어 저장된 여러 웹 페이지 사이에서 해당 웹사이트를 쉽게 찾을 수 있게 합니다.

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

파비콘(favicon) 사용의 이점

  • 클릭률(CTR) 증가
  • 브랜드 인지도 구축
  • 사용자 경험과 체류 시간 개선

파비콘이 웹사이트의 검색 엔진 최적화(SEO) 순위를 마법처럼 높여주지는 않지만, 파비콘을 추가하고 다른 UX 디자인 개선을 통해 더 사용자 친화적인 웹사이트를 만들 수 있습니다. 파비콘이 웹사이트 성능에 미치는 몇 가지 더 중요한 영향은 다음과 같습니다:

클릭률(CTR) 증가

구글과 다른 검색 엔진은 검색 결과에 파비콘을 표시합니다. 눈에 띄거나 쉽게 알아볼 수 있는 파비콘은 브랜드 인지도를 높여 사람들이 웹사이트를 방문할 가능성을 높여줍니다. 이는 클릭률(CTR)을 증가시키며, CTR은 SEO에서 중요한 전자상거래 지표입니다.

브랜드 인지도 구축

파비콘이 브랜드 로고를 강화할 때, 사용자의 북마크 바, 웹사이트의 탭, 그리고 검색 엔진 결과 페이지(SERPs)에서 무료 광고 역할을 하여 브랜드 인지도를 높일 수 있습니다.

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

즉시 인식 가능한 파비콘은 사용자가 웹 페이지를 북마크할 가능성을 높이며, 이는 구글과 같은 검색 엔진에서 긍정적인 신호로 인식됩니다. 이러한 작은 사용자 경험 개선은 재방문을 유도하여 웹사이트 트래픽과 체류 시간(사용자가 검색 엔진 결과 페이지로 돌아오기 전 웹페이지에 머무는 시간)을 증가시킵니다.

웹사이트 파비콘(favicon) 제작 가이드라인

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

좋은 파비콘은 특정 크기와 파일 형식 요구 사항을 준수해야 합니다:

적절한 크기 선택

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

호환 가능한 파일 형식 선택

원본 파일 형식은 이미지가 파비콘으로 변환되는 방식에 큰 영향을 미칩니다. 파비콘을 만들 때 가장 일반적으로 사용되는 파일 형식은 PNG와 ICO입니다. PNG 파일은 무손실 데이터 압축과 투명성을 제공하여 이미지가 크기 조정될 때 품질이 저하되지 않습니다. ICO 파일은 Microsoft Windows Explorer에서 사용되며, 여러 크기와 색상 깊이를 가진 하나 이상의 이미지를 포함하므로 크기 조정이 잘 됩니다. SVG 형식은 브라우저 지원이 적지만, 빠르게 로드되고 무한히 확장 가능합니다. JPEG와 같이 축소 시 이미지 데이터가 손실되는 형식은 피하는 것이 좋습니다.

애니메이션 파비콘 고려

애니메이션 GIF 또는 Javascript 파일은 시각적인 매력을 더할 수 있지만, 호환성 문제를 포함한 제한이 있습니다. Google Chrome에서는 잘 보이지만 다른 브라우저에서는 깨질 수 있으므로, 여러 브라우저에서 애니메이션 파비콘을 테스트해 보세요.

인기 있는 파비콘 생성기

온라인 파비콘 생성기를 사용하여 브랜드 정체성에 맞는 맞춤형 파비콘을 만들 수 있습니다. 다음은 인기 있는 옵션들입니다:

  • Favicon.io: 이미지 파일, 링크 또는 텍스트로 파비콘을 생성하고 다양한 형식으로 변환할 수 있는 도구입니다. 변환된 파일을 다운로드한 후 웹사이트의 루트 디렉토리에 배치하고, 링크 태그를 복사하여 HTML 페이지의 헤드 태그에 붙여넣으면 됩니다.

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

  • Favicon Generator: 플랫폼별로 파비콘을 생성할 수 있어, 디자인이 다양한 플랫폼과 브라우저에서 어떻게 보이는지 확인할 수 있습니다.

  • Favicon.ico & App Icon Generator from Dan’s Tools: 기존 이미지를 업로드하여 ICO 형식으로 변환하거나 아이콘 갤러리에서 디자인을 탐색할 수 있습니다.

    HTML에 파비콘 추가하는 방법

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

    파비콘을 가리키는 코드는 웹사이트 HTML 파일의 <head> 섹션에 라인으로 추가됩니다. 브라우저는 <head> 태그의 지침을 읽어 파비콘을 찾아 표시합니다. 예를 들어, 파비콘 파일이 "brandXicon.png"라는 이름의 PNG 파일이라면, 다음과 같이 <head></head> 태그 안에 코드를 추가합니다:

    <link rel="icon" type="image/png" rel="noopener" target="_blank" href="/brandXicon.png">

    파비콘은 사이트의 어떤 디렉토리에도 있을 수 있습니다. 위 예제에서는 사이트의 루트 디렉토리에 포함되어 있으며, 이는 일반적인 위치입니다. 파일 경로가 정확한지 확인하세요.

    여러 크기의 파비콘을 모두 로드할 수도 있습니다. 각 크기에 대해 고유한 파일 이름을 지정하고 코드에 "sizes" 속성을 추가해야 합니다. 예를 들어:

    <link rel="icon" type="image/png" sizes=”16x16” rel="noopener" target="_blank" href="/brandXicon16x16.png">

    <link rel="icon" type="image/png" sizes=”32x32” rel="noopener" target="_blank" href="/brandXicon32x32.png">

    쇼피파이 웹사이트에 파비콘 추가하는 방법

    쇼피파이 웹사이트를 사용하는 경우, 코딩 없이도 쉽게 파비콘을 추가할 수 있습니다:

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

    2. “Themes” > “Customize”를 선택하여 테마 편집기를 엽니다.

    3. “Themes Settings”를 클릭합니다. 기어 아이콘을 찾으세요.

    4. Favicon을 선택합니다 (일부 테마에서는 “Logo”라고 불릴 수 있습니다).

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

    6. 사용 가능한 경우, 접근성을 위해 파비콘의 “Alt Text”를 편집합니다. 이 텍스트는 사용자가 파비콘 위로 마우스를 가져갔을 때 나타납니다.

    7. 작업을 저장하고 다양한 브라우저에서 파비콘의 성능을 테스트합니다. 

    iPhone이나 Android 기기에서 파비콘을 추가하는 방법에 대한 자세한 내용은 쇼피파이 도움말 주제를 참조하세요.

    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

    파비콘은 로고와 같은가요?

    파비콘("favorites icon")은 검색 결과, 브라우저 탭, 북마크 바에서 사이트의 페이지 이름이나 주소 옆에 표시되는 작은 아이콘으로, 웹 사용자가 페이지를 쉽게 식별할 수 있도록 도와줍니다. 반면에, 로고는 브랜드를 전체 마케팅 환경에서 대표하는 그래픽 심볼이나 디자인입니다. 대부분의 브랜드 파비콘은 로고와 디자인 요소를 공유하며, 로고가 충분히 단순하다면 동일할 수도 있습니다. 

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

    파비콘은 웹 브라우저의 주소 표시줄 아이콘이나 탭 아이콘으로 나타납니다. 이는 사용자가 여러 개의 탭이나 북마크 사이에서 웹사이트를 시각적으로 쉽게 식별할 수 있도록 도와줍니다. 예를 들어, 쇼피파이의 파비콘은 로고에서 가져온 "S"가 있는 쇼핑백 모양을 사용합니다.

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

    네, 웹사이트를 위한 파비콘을 디자인하는 데 도움이 되는 여러 도구가 있습니다. 그중 일부는 무료로 사용할 수 있습니다. 예를 들어, Favicon.io와 RealFavIconGenerator 같은 온라인 생성기는 간편하게 파비콘을 만들 수 있는 플랫폼을 제공합니다.

    도움이 되셨거나 궁금하신게 있으면 댓글로 남겨주세요.

    * 스팸방지를 위해 댓글은 검수 후 노출 됩니다.