티스토리에 파비콘 만들기 및 설정방법 초간단 정리

오늘은 티스토리 블로그에서 파비콘 설정하는 아주 간단한 방법을 알려드리도록 하겠습니다. 그전에 우선 파비콘이 무엇인지 잘 모르신다면

위 사진에서 제목 옆에 네모란 아이콘 보이시죠? 저 네모란 아이콘을 파비콘이라고 합니다. Legends Time을 줄여서 LT로 표현했는데 아주 깔끔하게 잘 나왔네요. 저의 경우 예전부터 웹사이트 개발과 운영을 해왔던터라 파비콘 만들고 적용시키는 것이 익숙한데 아직 개념이 잘 안잡히신 분들은 힘들어 하시더라구요. 그래서 쉽게 설명드리고자 시간을 마련해 봤습니다.

파비콘 ico 파일을 만드는 방법은 여러가지가 있습니다. 가장 기초적인 것이 바로 도트를 찍는 방법이죠. 도트를 찍는다니 잘 이해가 안가실 수도 있겠지만 파비콘 자체가 고화질 파일이 아니고 16x16, 32x32, 64x64 픽셀의 파일이라 원하는 모양, 색깔이 있다면 직접 그릴 수가 있죠.

(보통 이런 그림을 도트라고 합니다.)

그런데 초보가 일일이 도트를 찍어가면서 무엇인가를 표현하기에는 힘든 감이 있죠. 저 역시도 그림은 문외한이기에 일일이 도트를 찍어서 표현하기에는 힘든 감이 있었습니다. 그래서 다양한 웹서비스들이 이미지를 파비콘 ico 파일로 전환하는 것을 돕고 있죠. 그림만 그리면 어떤 파일이든 ico 파일로 전환시켜줍니다. 참고로 ico 파일이란 파비콘에서 사용하는 파일의 확장자를 의미합니다.

우선 사이트 한 곳을 알려드리도록 하겠습니다. 제가 여러 파비콘 변환 서비스를 사용해봤는데 여기가 제일 좋았습니다. 어떤 기준에서냐구요? 우선 쉽습니다. 그리고 원하는 이미지를 도트로 매우 잘 변환시켜줍니다!

http://www.xiconeditor.com/

홈페이지 모습입니다. 매우 직관적이죠? 그래서 아주 쉽게 사용할 수가 있습니다. 그런데 그 전에 파비콘에 사용할 이미지는 어떻게 만들어야 할까요? 저같은 경우는 680 x 680 픽셀 사이즈의 이미지를 직접 만들어서 사용합니다. 보통은 이미지 편집 프로그램을 이용하고 편집 프로그램이 없는 경우에는 파워포인트 등을 사용해도 무방할 것 같습니다. 중요한 것은 적당한 크기의 정사각형 이미지가 필요하다는 것입니다.

저의 경우 포토x로 만듭니다. 680 x 680 픽셀의 새문서에 원하는 색깔을 붓고 원하는 글짜나 이미지를 넣어주고 png 파일로 저장합니다. 참고로 파일이름은 favicon.png로 저장하도록 하겠습니다. 여기까지 하면 20% 정도 진행했다고 보시면 됩니다.

본격적으로 파비콘 아이콘을 생성해 보도록 하겠습니다. 다시 좀 전에 말씀드린 사이트로 가보시기 바랍니다.

http://www.xiconeditor.com/

사이트를 보면 우측에 1, 2, 3, 4 숫자가 적혀있는 것이 보이실 것입니다. 스텝바이스텝입니다. 천천히 1부터 하시면 됩니다. 우선 파일을 업로드(Upload) 시켜 보도록 하겠습니다.

업로드(Upload) 버튼을 누르면 파일을 선택하는 화면이 나옵니다. 우리는 조금 전에 png로 만들어 놓은 파일을 선택하도록 하겠습니다. 그러면 바로 위 사진과 같이 화면이 변경되는데 여기서 주의할 것이 저 상태로 바로 Ok 버튼을 누르면 안되고 화면 좌상단에 있는 선택영역을 드래그(긁어)하여 전체가 선택되도록 해주어야 합니다. 안그러면 딱 저기 선택한만큼만 파비콘으로 만들어 줍니다.

이런식으로 전체를 드래그하여 전체가 선택되도록 해주세요. 그리고 Ok 버튼을 누르면 아래와 같이 도트로 변경된 화면을 보실 수가 있습니다. 도트로 전환된 모습이 마음에 들지 않는다면 직접 좌측의 메뉴들을 통해서 변경을 하실 수도 있답니다. 하지만 전 귀차니즘이 강하기에 그냥 바로 사용하도록 하겠습니다. 한마디로 2. Edit를 건너뛴다는 말이죠. 참고로 전 3.Preview도 건너 뜁니다. 처음해보시는 분들은 3. Preview를 눌러서 각 브라우저별로 파비콘이 어떻게 적용되는지 살펴보는 것도 나쁘지는 않습니다.

바로 4. Export 버튼을 클릭하면 아래와 같은 화면이 나옵니다. 도트로 변환된 이미지를 ico 파일로 추출한다는 의미죠. Export your icon 버튼을 눌러 ico 버튼을 다운로드 받도록 하겠습니다. 다운로드 받은 파일의 이름은 favicon.ico 파일로 하도록 하겠습니다.

여기서부터 이제 또 새로운 영역입니다. ico 파일도 만들어서 다운로드까지 받았는데 도대체 어디에 어떻게 해야 적용이 되는 것인가??? 저도 처음에는 이 부분을 잘 몰라서 헷갈렸습니다.

익숙한 화면이죠? 바로 블로그 관리자 화면의 좌측 메뉴바입니다. 저기에 HTML/CSS 편집에서 수정을 해줘야 하는 것입니다. HTML/CSS 편집을 눌러보도록 하겠습니다.

테마 수정하는 화면이 보이네요. 우측상단에 있는 파일업로드 버튼을 눌러보도록 하겠습니다. 그리고 조금 전에 만들어 놓은 파비콘 파일인 favicon.ico 파일을 업로드 시켜보도록 하겠습니다. 간혹 어디에 업로드 해야 하는거야? 라고 궁금해하실 수도 있겠으나 그냥 업로드 하면 티스토리에서 알아서 정리를 해주니 걱정 마시고 그냥 업로드 시키면 되십니다. 업로드 이후에는 꼭 우측 상단에 있는 저장 버튼을 누르는 것을 잊지 마시구요.