티스토리 초보팁 16편 -파비콘, 블로그 아이콘 만들기



여러분은 파비콘이라는 말을 아시나요? 사실 파비콘은 합성어라서 잘 모르시는 분들도 있으시겠지만 여러분이 항상 보고 있는 것입니다. 파비콘은 인터넷 웹 브라우저의 주소창에 표시되는 아이콘입니다. 네이버의 경우에는 검색창 모양의 파비콘을 사용하고 있고, 다음의 경우에는 D 자 형태의 아이콘을 사용하고 있습니다.



파비콘은 위에서 말했듯이 합성어인데, 영어로 Favorites와 Icon이 합쳐져서 만들어진 용어로 Favorites는 즐겨찾기를 말합니다. 다시말해서 즐겨찾기에 등록되는 아이콘이라는 뜻으로 즐겨찾기에 어떤 홈페이지를 등록하면 아이콘이 표시되는데에서 비롯된 말입니다.



블로그 아이콘은 댓글을 달 때, 여러분의 블로그를 대표 할 수 있는 아이콘을 말합니다. 댓글창을 보시면 각 블로거들이 사용하는 필명 옆에 어떤 그림이 있는 것을 볼 수 있는데 이것이 바로 블로그 아이콘이라고 하는 것입니다. 대부분 파비콘과 블로그 아이콘을 같이 쓰고 있으며, 같은 그림으로 사용하고 있습니다.


블로그 아이콘 설정하기

티스토리에서는 이런 파비콘과 블로그 아이콘을 다룰 수 있는 기능을 제공합니다. 먼저 블로그 아이콘을 설정해보도록 하겠습니다.


관리자 메뉴에서 '환경설정' -> '블로그 정보' 메뉴를 들어갑니다.


그러면 프로필을 관리할 수 있는 화면과 프로필 사진을 관리 할 수 있는 항목들이 나옵니다. 스크롤을 내리면 '아이콘'이라는 부분이 있습니다. 여기에서 블로그 아이콘과 파비콘을 지정할 수 있습니다.

'찾아보기...' 버튼을 눌러서 여러분의 컴퓨터에 저장되어 있는 사진을 업로드 하시면 됩니다. 단, 블로그 아이콘으로 사용될 사진은 jpg, gif, png 형식의 그림 파일만 되며 그림 파일의 가로 세로 사이즈는 16*16, 24*24, 48*48..(픽셀) 이렇게 3가지 종류의 크기밖에 저장이 되지 않습니다. 크기에 맞도록 크기를 변환시켜줘야 합니다.

사진의 크기변환은 그림판으로도 쉽게 할 수 있습니다. ^^

'삭제' 버튼은 기존에 있던 아이콘이 맘에 안들면 지워 버릴 수 있는 기능입니다. 파비콘이나 블로그 아이콘을 출력하지 않고 싶으면 삭제를 누르시면 됩니다. ( 그러면 기본적인 아이콘이 출력이 될 겁니다. )


파비콘은 약간 더 복잡합니다. 파비콘은 ico 형태의 파일만을 요구하기 때문에 사진을 ico 형태의 파일로 변환해 줘야 합니다. 따로 변환 프로그램을 가지고 있으신 분들은 파비콘으로 사용하고 싶은 이미지를 ico 형태의 파일로 변환 시키면 됩니다. 없으신 분들은 '삭제' 버튼 오른쪽에 있는 'ico로 변환'을 클릭하셔서 ico 파일로 변환 할 수 있는 사이트로 가셔야 합니다. ( 자세한 사용법은 밑에 설명해 놓겠습니다. )

ico 파일로 변환이 완료되면 '찾아보기' 버튼을 눌러서 업로드하고 최 하단의 '저장' 버튼을 눌러서 저장을 해주셔야 파비콘과 블로그 아이콘이 저장이 됩니다.


ico 파일로 변환

그러면 변환시키고 싶은 파일을 ico 형태의 파일로 변환하는 법을 알아보도록 하겠습니다. 여기서는 티스토리에 링크되어 있는 사이트를 이용하겠습니다.


아이콘메뉴의 파비콘 부분의 오른쪽을 보시면 'ico로 파일변환' 이라는 링크가 있습니다. 이 링크를 클릭해서 이미지 변환을 해주는 사이트로 들어갑니다.


사진을 올리고 보니 크기가 크네요 ㅎ
'Get Started' 버튼을 눌러서 다음 단계로 진행합니다.


그럼 업로드할 파일을 선택하는 윈도우 대화창이 나옵니다. 기본적으로는 ico 파일이 선택이 되어 있네요.


파일 형식을 'Imgae (png, gif, jpeg)' 로 바꾸어 변환을 원하는 그림 파일을 선택합니다. (선택하시고 열기 버튼을 눌러주세요)



그럼 위 그림처럼 여러분이 선택한 그림이 미리보기 형식으로 나옵니다.
이 그림이 맞으면 'Export' 버튼을 눌러서 진행합니다. 다른 그림을 원하시면 'Browse' 버튼을 눌러서 다른 그림을 선택해 주시면 됩니다.


저장될 icon 파일의 크기를 지정해 줍니다. 체크박스 형태라 중복 설정이 가능하지만 출력되는 파일은 하나밖에 없네요. 나머지 체크박스는 해제해 주시기 바랍니다. 파비콘이 표시될 부분은 굉장히 작기 때문에 16*16 으로도 충분하지만 512*512도 상관 없습니다.

다만 파일의 가로,세로 크기가 너무 클 경우 아이콘의 파일 크기가 커져서 나중에 블로그 로딩 속도에 영향을 줄지도 모르겠습니다. 저는 그냥 16*16으로 했습니다.

크기를 지정해 주셨으면, 'Save As' 버튼을 눌러서 다음으로 진행합니다.



여기서 중요한게 파일 이름이 원본 이름과 같아야 하더군요. 즉, 그냥 '저장(S)' 버튼을 눌러주면 바탕화면에 icon 파일이 생성됩니다.

여기서 파일 이름을 수정하면 icon 파일이 아니라 그냥 파일이 생성되어 나중에 업로드 할 때 인식을 못 하더라구요. 왜 그런지는 모르겠습니다. 이유는 이 변환기를 개발한 분에게 문의 하세요 ㅎ

이제 이 icon 파일을 파비콘 설정화면에 업로드를 하고 저장을 하시면 여러분도 파비콘을 갖게 됩니다.


블로그를 대표 할 수 있는 아이콘을 갖는 것도 나중에 여러분의 블로그를 홍보 하는데에 도움이 될 수 있습니다. 예를 들면, 애플의 한 입 베어문 사과 같은 로고는 애플을 상징하는 로고가 되었죠. 마찬가지로 여러분도 여러분을 상징할 수 있는 아이콘을 만들어서 등록해 보세요 ^^


▲ 이전 글 : 티스토리 초보팁 15편 -프로필 만들기
▼ 다음 글 : 티스토리 초보팁 17편 -블로그 주소 형식



블로그 팁 :: 파비콘을 만들어 보자.


 ▲ 파비콘이란 무엇인가? 
 
 파비콘이란 즐겨찾기와 아이콘의 합성어( FAVorite + ICON )입니다. 기본적으로 대부분의 웹페이지는 인터넷 익스플로러 페이지의 파비콘을 갖습니다. 예를 들어, 네이버, 다음같은 큰 사이트는 자신들만의 파비콘을 갖습니다.



 
 파비콘을 등록하면, 주소창과 즐겨찾기메뉴가 좀더 이뻐지는 것은 물론이고 홈페이지나 블로그를 시각적으로 어필 할 수 있습니다. 최근들어서 대기업뿐만아니라 개인 블로그에서도 파비콘을 많이 찾아 볼 수 있습니다. 그럼 내 블로그에도 파비콘을 달아 보도록 하겠습니다.



▲ 파비콘 만들기

 포토샵을 이용해도 좋고 그림판을 이용해도 좋습니다. 자신만의 파비콘을 디자인하여 그림파일로 만들어 봅니다. 저는 그림판으로 도트를 하나하나 찍어서 만들었습니다. 제 블로그 이름이 Plusblog이기 때문에 빨간색으로 "+" 모양으로 만들어 보았습니다. 어울릴지는 잘 모르겠지만 아무튼 한번 만들어 보는 것이므로,, ( 나중에 더 멋진 파비콘으로 바꿔야죠. ㅎㅎ )



▲ 파비콘이미지를 아이콘으로 만들기

 여러 블로거 분들이 http://www.degraeve.com/favicon/ 의 파비콘 제너레이터 툴을 이용하고 계십니다. 저도 이 툴을 이용해서 한번 만들어 보겠습니다. 

 




찾아보기를 클릭하셔서 이미지를 등록하시고 [upload image] 버튼을 클릭합니다.







파란색 네모를 확장시켜서 이미지 전체를 포함하도록 합니다. 이미지 전체를 포함하도록 하였으면 [Crop picture]버튼을 눌러서 등록을 시킵니다.





사용자 정의 이미지가 툴에 등록이 된 모습입니다. 여기서 이미지를 약간 다듬고 수정을 해줍니다. 반응이 약간 늦을 수도 있으니 너무 조급해 하지 말기 바랍니다. 파비콘 이미지를 다듬은 다음 Make Favicon! 버튼을 클릭해 줍니다.




그럼 위와 같은 아이콘이 생성됩니다. 아이콘을 우클릭하여 다른이름으로 그림저장하여 저장해 둡니다.



▲ 파비콘 등록하기

 이제 만들어 논 아이콘을 웹페이지에 등록을 하기만 하면됩니다. 티스토리가 아닌 블로그 유저들은 일단 파비콘 파일을 루트 폴더에 업로드를 하고, 블로그 HTML 소스의 헤더 부분에 다음 주소를 삽입합니다.

<LINK REL="SHORTCUT ICON" HREF="파비콘 업로드 주소" />


다음은 티스토리 블로그에 파비콘을 적용하는 법을 설명을 하겠습니다.

티스토리의 관리자인 admin에 접속을 하여 환경 설정으로 들어갑니다.





아이콘 항목에서 파비콘을 찾아보기 하여 아까 저장한 그 아이콘 파일을 첨부해 줍니다. ( 이때, *.ico 파일로 인식이 안되는 경우도 있는데, 이럴 때는 ico 파일로 변환해 주는 프로그램을 이용해서 변환한뒤 업로드 하면 됩니다. ) 첨부를 한뒤 저장을 하고 다시 환경설정을 들어오면




직접 파비콘이 나오지는 않지만 걱정하실 필요는 없습니다. 일단 저 점모양의 파비콘을 우클릭한뒤 속성으로 들어가서 파일 위치를 확인 합니다.





주소를 Ctrl + C로 복사를 하여 저장합니다.


<LINK REL="SHORTCUT ICON" HREF="파비콘 업로드 주소" />


파비콘 업로드 주소 부분에 붙여 넣기를 한뒤 위 태그를 복사하여 HTML 편집의 헤드 부분에 붙여 넣습니다.






저장을 한뒤 블로그로 돌아가 보면,




파비콘이 등록된 것을 볼 수 있습니다.



덧붙이는 글)

블로그 아이콘도 동일하게 등록 할 수 있습니다.




블로그 아이콘의 찾아보기를 선택하여 jpg 파일을 업로드 합니다. 저는 파비콘을 jpg형태로 저장하여 업로드를 해봤습니다.






이 글이 도움이 되셨으면 댓글 하나 부탁드려요 ^^.



+ Recent posts