티스토리 파비콘 만들기와 사이즈 그리고 적용 방법까지

 

파비콘이란?

파비콘은 즐겨찾기 아이콘(favorites icon)으로 사이트 접속 시 브라우저 탭이나 주소 옆에 나타나는 작은 사이즈의 이미지를 뜻합니다.

 

티스토리를 봐도 앞에 T 모양의 아이콘이 있는데, 이것이 파비콘입니다.

 

파비콘 적용 예시

 

티스토리 파비콘 적용.

티스토리에 각자 원하는 파비콘을 적용할 수 있는 옵션이 있습니다. 적용하는 것은 간단하지만, 파비콘을 어떻게 만들어야 하는지가 더 궁금하실 거라 생각합니다.

 

간단한 파비콘 만들기와 티스토리에 파비콘 적용까지 알아보도록 하겠습니다.

 

Favicon Generator for perfect icons on all browsers

(파비콘 만들기 사이트 접속)

 

파비콘 만들기 사이트.

여러 사이트들이 존재하겠지만, 그 중에서 한 곳을 소개해 드리도록 하겠습니다. 원하는 이미지만 가지고 있으면 파비콘 확장자의 이미지로 바꿔줍니다.

 

파비콘은 보통의 jpg나 png와 같은 이미지 확장자가 아닌 ico라는 확장자를 가진 이미지로 바꿔줘야 합니다. 물론, 내가 원하는 이미지는 jpg 형태로 스스로 만들거나 구하셔야 합니다.

 

이미지를 준비하셨다면 위 링크를 클릭하고, 사이트에 접속합니다.

 

 

 

Select your Favicon image.

영어로 되어 있지만, 간단한 과정이니 이미지를 보시고 따라하시면 됩니다. 'Select your Favicon image'를 클릭하여 준비된 jpg 이미지를 불러오기 합니다. (.jpg, png 등 보통의 이미지 확장자면 가능합니다.)

 

 

로딩 잠시 기다리기.

파비콘을 만드는 과정 중 약간의 기다림이 필요하지만, 몇 초 정도로 오래 걸리진 않습니다. 잠시만 기다리시면 됩니다.

 

반응형

 

 

로딩 후 사이트의 하단으로 이동.

여러가지 옵션이 보이게 되는데, 한글 번역으로 바꾸신 후 읽어 보셔도 됩니다만, 건드릴 필요 없이 제일 하단으로 스크롤을 내리고, 이미지에 보이는 'Generate your Favicons and HTML code'를 클릭해 줍니다.

 

 

파비콘 다운로드 및 HTML 코드.

 'Generate your Favicons and HTML code'를 클릭하게 되면 Favicon package 버튼이 보입니다. 클릭하시면 완성된 파비콘을 다운로드 받으실 수 있습니다.

 

HTML 코드도 제공되기 때문에 티스토리와 같이 옵션이 없는 일반 사이트의 경우 활용하여 적용하시면 됩니다. 티스토리는 icon 확장자의 이미지가 있으면 간단히 업로드 하는 것으로 파비콘을 적용할 수 있습니다.

 

 

티스토리 파비콘 사이즈와 적용.

파비콘 아이콘은 ICO 확장자이며 위에서 알려드린 사이트에서 만드셨다면 파비콘 사이즈는 사이즈는 32 x 32입니다. (보통 16x16 32x32 64x64 정도로 작게 만들게 됩니다.)

 

관리 > 블로그 > 파비콘

위 경로를 통해서 파일을 불러오고 적용시키면 끝입니다.

 

*정사각형의 이미지를 준비해야 합니다. 직사각형 형태일 경우 위 사이트에서는 알아서 투명 배경으로 채워 넣어 정사각형의 이미지로 바꿔줍니다. 원하는 이미지(jpg, png 등..)만 준비하면 ico 파비콘 확장자로 변환 시켜주고, 크기도 적당한 사이즈로 만들어 주기 때문에 어렵지 않게 만드실 수 있습니다.