파비콘이란? 티스토리 파비콘의 모든 것

오늘은 파비콘의 정의, 파비콘 만들기, 파비콘과 SEO 관계, 파비콘 제작 요령 등에 대해 총망라하여 설명드리겠습니다.

 

<목차>

1. 파비콘이란?

2. 파비콘이 중요한 이유

3. 파비콘과 SEO 관계

4. 파비콘 만드는 방법

5. 파비콘 디자인 팁

 

 

 1. 파비콘이란?

파비콘은 웹사이트를 대표하는 작은 이미지로, 웹 브라우저에서 탭, 북마크바, 방문 기록, 검색 결과 등에서 사용됩니다. 즐겨찾기 아이콘(favorite icon)이라고도 하며, 웹사이트를 식별하기 쉽게 해 줍니다. 구글 크롬과 같은 브라우저에서는 브라우저 홈 화면에도 나타납니다.

즉, 파비콘은 웹사이트의 시각적 식별자로 활용됩니다.

 

1-1. 웹 브라우저에 표시되는 파비콘

1-2. 티스토리 파비콘이 생성된 예시

1-3. 검색 결과에 표시되는 파비콘

 

 2. 파비콘이 중요한 이유

작은 크기여도 파비콘은 웹사이트 이미지의 전반적인 효과에 아주 중요한 영향을 미칩니다. 브랜딩, 신뢰도 그리고 재방문율을 향상해 줍니다.

2-1. 브랜딩 (Brending)

대부분의 수익형 블로그들은 디테일에 신경 쓰지 않습니다. 광고 수익만을 위한 블로그로 광고 포스팅, 포스팅 수 등에만 전념합니다. 그러다 보니 블로그 자체만의 브랜드적 상징적인 의미가 없습니다. 하지만 블로그 자체가 저품질 블로그나 사이트로 걸렸을 때, 브랜딩 고유의 의미를 가지고 있는 블로가나 사이트는 고객센터에 문의 시 조금 더 수월하게 살릴 수 있으며, 사용자들에게도 이 블로그의 적법성 그리고 전문성을 가시적으로 보여주어 사이트의 완성도를 높여줍니다.

2-2. 신뢰도 (Trust)

파비콘은 사이트의 보안에는 영향을 미치지 않지만, 사용자들은 파비콘이 있는 사이트를 신뢰하는 경향이 있다고 합니다. 사용자들은 파비콘을 통해 사이트가 존재한다는 것을 명백히 알 수 있기 때문입니다.

2-3. 재방문율 제고 (Boosting Visitors)

파비콘은 웹사이트의 이미지로 보여주는 식별자입니다. 이를 활용해 손쉽게 내 사이트가 검색 결과나 사용자의 브라우저 방문 기록에서 눈에 띄게 할 수 있습니다. 덕분에 파비콘은 사용자가 타 사이트가 포함된 리스트에서 내 사이트에 더 자주 방문하도록 유도합니다. 게다가 사용자들이 내 사이트를 북마크에 추가하면 이미 북마크에 추가된 사이트들 사이에서 내 사이트를 돋보여 쉽게 찾을 수 있습니다.

 

 3. 파비콘과  SEO 관계

SEO 전문가로서 솔직한 의견을 드리자면, 아직 파비콘 자체가 SEO 순위에 큰 영향을 미친다고 발표한 자료는 없습니다.

 

하지만 파비콘 또한 이미지 파일이기 때문에 파비콘 이미지 파일명을 키워드 위주로 설정한다거나. 파비콘으로 인한 간접적인 긍정적인 영향은 SEO에 분명 도움이 될 것이라고 생각합니다. 또한 웹 브라우저에서 블로그가 돋보일 수 있도록 해주기 때문에 UI/UX를 향상할 수는 있습니다. 파비콘의 품질은 검색 결과에서 사이트 순위를 유기적으로 향상시킬 수 있습니다.

 

 4. 파비콘 만드는 방법 (파비콘 변환)

파비콘 변환 툴 : https://convertio.co/kr/png-ico/

4-1. 크기 (파비콘 사이즈)

파비콘을 만들 때 가장 적합한 크기는 가장 일반적으로 표시되는 크기인 16x16 픽셀입니다. 

하지만, 더 큰 크기(예: 32x32 픽셀)로 보일 수도 있습니다.

 

파비콘의 표준 크기와 각 크기에 알맞은 사용 용도를 알려드리겠습니다.

• 16x16: 브라우저 (티스토리용)
• 32x32: 작업표시줄 단축키
• 96x96: 데스크톱 단축키
• 180x180: 애플 터치

4-2. 파일 형식

원래 파비콘 파일 형식은 ICO였지만, 오늘날 기본 파일 형식 또는 벡터 아트는 PNG 또는 JPEG입니다. SVG는 계속해서 많은 브라우저가 지원하고 있기 때문에 점점 더 대중적인 선택이 되고 있습니다. 하지만 티스토리는 ICO 파일만 업로드 가능하기 때문에 ICO 파일을 권장합니다.

 

 ※ ICO: 마이크로소프트(Microsoft)에서 발명한 파일 포맷인 ICO는 파비콘의 기존 파일 형식이었습니다. ICO는 모든 브라우저에서 지원하는 파일 하나가 여러 가지 크기의 이미지를 포함할 수 있습니다. 이렇게 하면 브라우저에 의존하지 않고도 이미지의 크기와 비율을 조정할 수 있습니다. 많은 경우에, 그리고 ICO와 다른 파일 형식으로 저장한 경우에도 브라우저는 여전히 ICO 버전을 표시하도록 선택할 수 있습니다.

 

 5. 파비콘 디자인 팁

아주 작은 이미지를 디자인하는 것은 정말 쉬운 일처럼 보일 수도 있습니다. 하지만 실제로 웹사이트 아이콘이 아주 작다는 것은 매우 정교해야 함을 의미합니다.

 

내 브랜드와 웹사이트에 가장 적합한 파비콘 만들기에 대한 팁을 소개하겠습니다.

5-1. Keep It Simple (단순하게!)

파비콘의 크기는 매우 작기 때문에 디자인이 심플해야 합니다. 너무 디테일한 것, 질감 표현 또는 그림자와 같은 요소는 들어가지 않도록 유의하세요. 대신에 한 번에 이해할 수 있는 두껍고 선명하고 단순한 이미지를 만들려고 해야 합니다.

5-2. 텍스트 사용 지양

파비콘에 텍스트를 적용하고 싶다면 1~2글자가 좋습니다. 한글자, 약어, 이니셜을 활용하여 텍스트를 단축하는 것이 하나의 좋은 해결책이 될 수 있습니다

5-3 로고 활용

일부 로고는 파비콘의 크기에서도 멋있게 보일 수 있지만 대부분의 로고는 축소하면 거의 알아보기 힘듭니다. 로고를 파비콘으로 활용하려면 몇 가지 조정을 해야 합니다. 태그라인을 생략하거나 이니셜을 하나만 사용하면 로고를 파비콘 크기로 활용할 수 있는 방법이 됩니다.

 

예시로, Goolge (구글), 유튜브 (Youtube), 넷플릭스 (Netflix) 파비콘을 가져왔습니다.

모두 한 글자 혹은 명확한 이미지로 파비콘을 제작한 것을 알 수 있습니다.

---

여러 분의 사이트 혹은 블로그의 파비콘은 운영자의 철학과 브랜드의 본질을 포함하고 있나요?

그렇다면 드디어 사용자에게 우리의 파비콘을 내보낼 준비가 끝난 것입니다.

 

그럼 모두 좋은 하루 보내세요 ^^