내 블로그의 아이덴티티, 파비콘 만드는 법(ico 변환하기)

Daum이나 네이버, 페이스북, 트위터 등 대부분의 유명 웹서비스에 접속하면 브라우저 상단에 이미지와 텍스트가 얹혀진 것을 확인할 수 있다. 텍스트는 당연하게도 현재 보고 있는 웹사이트의 제목(서비스명)이고 이미지는 그 웹사이트를 대표하는 이미지, 파비콘이다.

각 서비스를 대표하는 파비콘들(Daum/ Facebook/ Daum mail)

파비콘(favicon)은 즐겨찾기(favorites)와 아이콘(icon)의 합성어인데 브라우저 타이틀이나 주소창 등에 아이콘으로 표시된다. 브라우저에서 즐겨찾기한 경우에도 파비콘과 사용자가 등록한 이름이 보여지므로 다른 서비스와 구분되는 나만의 파비콘을 등록하는 것은 그 서비스의 아이덴티티 표현에 중요하다고 할 수 있다. 따라서 내 블로그를 다른 블로그와 구분하고 싶다면 파비콘을 적용하는 것이 좋은데, 티스토리 블로그에서는 아주 간단하게 기능을 지원하고 있다. 아, 친절해♥

하지만! 파비콘은 그냥 이미지파일로 등록할 수 없다. 아이콘파일(ico)로 만들어야 하는데 포토샵 등에서 저장할 수 있는 형식이 아님. 우리가 원하는 이미지를 만든 후에 변환 프로그램으로 확장자를 바꿔주어야 하는데, 이 프로그램은 대부분 유료다 -_-; 그래도 괜찮아, 아이콘 파일을 윈도에서 사용할 게 아니라면 무료로 변환할 수 있으니까~ 블로그 등 온라인 서비스에 한정하여 이미지파일을 아이콘파일로 무료로 변환해주는 서비스가 있다.

바로 iConvert Icons! 그럼 나만의 파비콘을 만들어 티스토리 블로그에 적용해 볼까?

파비콘에 쓰일 이미지 파일 만들기

어차피 개인 블로그에 쓸건데 내 마음에 드는 이미지 아무거나 가져다 써도 될 일이다. 그런데 나는 어쨌든 내 블로그를 표현할 수 있어야 하고, 다른 곳과는 다른 이미지를 만들고 싶어서 뚝딱뚝딱 만들었다. 엄청 마음에 들진 않지만, 그래도 내꺼니까.

원래 쓰던 파비콘은 졸작 준비할 때, 썼던 기획안 표지에서 따온 거였다. '열정적인 여자' 뭐 이런걸 표현하려던 의도였다 ㅋㅋ 5년 넘게 아무 생각없이 써왔는데 문득 요즘 대세에 맞추어 바꾸고 싶어졌다. 요즘 디자인은 당연히 Flat Design! 역시나 귀차니즘에 깊은 고민은 하지 못했고, 파비콘 사이즈가 워낙 작아 글자를 여러개 넣으면 들어가지 않길래 Joalog에서 J만 따와서 뚝딱. 그런데 너무 핑크핑크한 것이 나랑은 맞지 않아서 좋아하는 녹색으로 변경했다 ㅋㅋ

직접 만들든 사진을 변환하든 혹은 좋아하는 어떤 이미지를 넣든 관계 없지만, 파비콘에 쓰일 이미지 파일은 아래 조건을 맞춰주는 것이 좋다.

1. 파비콘 사이즈는 16*16px로 절대 크지 않다
 - 이미지에 여러 글자(2글자도 버거움;)를 넣으면 보이지 않는다.
 - 복잡한 이미지를 넣으면 뭐가 뭔지 알 수 없다. 본인 얼굴을 넣고 싶다면 클로즈업샷을 활용할 것.
 - 아이콘 변환하면 어차피 16*16으로 변환해주니 실제로는 활용도 높게 64*64 정도로 만드는 것이 좋다.

2. 배경은 꽉 채우거나 혹은 완전히 비우거나

 - 이미지만 동동 떠보이고 싶다면 배경은 흰색으로 채울게 아니라 투명색으로 만들어야 한다.

3. 이미지 파일은 png 추천

 - 2번에서 말했듯 투명 배경으로 이미지를 저장하려면 png 형식이어야 한다.
 - jpg로 저장해서 흰색 배경으로 만든다면 으앗! 퀄리티 안녕~ 하지만, 검은색 등 유색배경이라면 jpg도 관계 없음.

이미지 파일을 아이콘 파일로 변환하기

http://www.iconverticons.com에 접속해서 3개의 버튼 중, [Use iConvert Icons Online]을 클릭. 여기서 아까 만들어둔 파일을 찾은 후, Convet를 누르면 변환된다. 완전 간단!

맥용, 윈도용, 리눅스용 등등으로 변환 되는데, 확장자만 다를 뿐이다. 어차피 다 온라인용이고. 티스토리에서 요구하는 파일은 ico(윈도용)이므로 이걸 다운받으면 된다.

티스토리에 파비콘 적용하기

관리 > 환경설정 > 기본 정보에서 중앙에 '아이콘'이 있는데 여기서 등록할 수 있다. 아이콘은 블로그에서 댓글 등을 달 때, 표시되는 이미지이고 파비콘이 지금까지 이야기한 그 것. 어차피 방금 만든 이미지를 내 블로그 아이덴티티로 할 거니까 둘다 변경했다. 파일 찾기 후, 저장하면 끝!

내 블로그를 브라우저에서 즐겨찾기 해보면 변경된 것을 확인할 수 있다 :) 다만 파비콘은 브라우저 캐시를 타므로 바로 변경된 것이 적용되지 않을 수 있으니 참고하시길.