블로그를 운영한다면 파비콘을 이용해 보자 (만드는 법, 적용방법)

혹시 파비콘이란 걸 아시나요? 저도 처음 듣는 생소한 용어라 뭔지 궁금해서 찾아봤는데요. 그럼 이 파비콘은 무슨 뜻이며, 어떤 경우에 사용되고 어떻게 만들 수 있는지에 대해 알아보도록 하겠습니다.

 

파비콘이란

먼저 파비콘이 무슨 말인지에 대해서 알아보도록 하겠습니다. 파비콘은 아래 그림과 같이 네이버나 다음과 같이 사이트에 접속하면 주소창 위의 브라우저 탭 부분에 나오는 아이콘 모양이라고 생각하시면 됩니다.

네이버의 경우에는 초록색에 N이라는 마크, 다음은 그라디에이션이 들어간 D라는 마크인 것이죠. 파비콘이라는 단어는 favorite + icon의 합성어로써 즐겨찾기 + 아이콘이라고 보시면 됩니다.

 

만약 내가 사이트를 운영하는 경우에는 직접 파비콘을 만들어 적용할 수도 있는 것이죠.

사이트 파비콘 이미지

 

파비콘 만드는 법

그럼 파비콘은 어떻게 만들 수 있을까요? 파비콘은 브라우저 탭 부분에 표시되는 아주 작은 아이콘이기 때문에 기본적으로 사이즈가 작은 16x16 픽셀을 사용합니다.

 

파비콘을 만들기 위해서는 ico라는 파일로 만들어야 한다는데요. 이런 어려운 부분은 잘 모르니 잘 아시는 분들이 만들어 놓은 ico 파일로 변환해 주는 사이트를 이용해서 만들어보도록 하겠습니다.

• 내가 사용하고자 하는 이미지를 미리 준비해둡니다.
• 이미지가 준비되었다면 아래 이미지 변환 사이트에 접속합니다.

Favicon & App Icon Generator

• 사이트에 접속하면 영어로 되어 있는데 당황하지 마시고 한글로 표시된 파일 선택을 클릭합니다.
• 1번에서 준비해둔 이미지를 선택합니다. 아래 몇 가지 옵션을 선택할 수 있는 버튼이 있는데 우리는 그런 건 잘 모르니 기본 세팅되어 있는 대로 건드리지 않고 진행합니다.
• 빨간색 네모로 표시해둔 Create Favicon 버튼을 눌러줍니다.
• 다운로드할 수 있는 화살표 아래쪽의 페이지가 보이게 되는데 여기서 빨간색 표시 부분을 클릭하면 다운로드가 시작되며 파비콘 이미지와 다양한 변환 이미지들이 압축 파일로 다운로드됩니다.

파비콘 생성 방법

 

압축한 파일을 풀어서 보면 다음과 같이 여러 개의 이미지가 보이는데 다양한 사이즈로 변환된 것 같습니다. 파비콘 외에도 여러 가지로 사용하라고 다양한 파일 리 생성된 것 같은데 제가 여기서 사용할 이미지는 빨간색으로 동그라미 쳐 둔 파비콘이라는 이미지를 사용하겠습니다.

생성된 결과 파일

 

 

파비콘 적용 방법 및 적용 모습

만약 티스토리 블로그를 하고 있다면 관리 모드에서 '관리 → 블로그'에 들어가면 나오는 화면에서 아래와 같이 파비콘 부분이 있으실 텐데요. 여기서 불러오기 한 뒤 방금 만들어두었던 파비콘 이미지를 적용하고 변경사항을 저장하면 내 블로그에 파비콘이 적용됩니다.

파비콘 설정 화면

 

아래 티스토리의 파비콘인 T자가 아닌 이미지로 바뀐 부분이 보이시나요? 물론 지금 모습으로는 어떤 걸 나타내는지 홍보 등의 목적으로 쓰기에는 부적합해 보입니다.

 

하지만 내가 여러 개의 블로그를 운영하거나 하는 경우 파비콘의 이미지를 다르게 주어 브라우저 탭으로만 내가 어느 블로그를 보고 있구나라고 개인적인 용도로 쓰기에는 색깔이 다른 이미지 정도만 사용해도 무리가 없어 보입니다.

신규로 만든 파비콘 적용 모습

 

여기까지 파비콘을 만드는 방법에 대해 알아보았는데요. 유용한 정보가 되었길 바랍니다.