오늘은 구글 Blogger 사용자 분들을 위해 재미있는 팁 하나를 소개하고자 합니다. 바로 블로그 파비콘 바꾸기 for Blogger!
아마 blogger 사용자라면, 주황색 둥글둥글한 네모 안에 하얀 B 글자가 새겨진 blogger 로고를 자주 보셨을 겁니다. 이 로고는 blogger의 파비콘(즐겨찾기 아이콘)으로도 쓰이고 있는데요, 일반 사용자가 blogger에서 자신의 블로그를 만들어도 동일하게 적용됩니다.
그런데 아무리 예쁜 것도 자주 보면 질리게 마련이죠. 수많은 blogspot 블로그들이 모두 같은 파비콘을 쓰니, 좀 개성이 없는 것 같기도 하고요. 그래서 간단하게 파비콘을 바꾸는 방법을 알아보도록 하겠습니다.
1. 파비콘 이미지 준비
우선 파비콘으로 만들 이미지를 준비합니다. 직접 이미지를 만들어도 되지만, 여기서는 간단하게 기존 blogger 파비콘의 색만 바꿔보도록 하겠습니다.
파이어폭스에서 Blogger에 접속해 파비콘을 캡쳐(Print Screen 키 사용) 한 뒤, 포토샵에 붙여 넣었습니다. marquee 툴(단축키 M)을 이용해 네모 낳게 선택한 뒤, 선택 영역을 복사(Ctrl+C) 하고 새 작업창(Ctrl+N)을 열어 붙여 넣습니다(Ctrl+V). 간단하게 단축키만 딱딱 쳐주면 됩니다.
제대로 복사하였다면, 위와 같이 새 작업창이 열릴 것입니다(확대는 Ctrl+＋). 아이콘의 크기는 16x16 픽셀입니다. 테두리를 둥글게 하기 위해, 다시 marquee 툴을 이용해 테두리 부분을 삭제해 줍니다(삭제할 부분을 선택한 뒤 Delete 키).
2. 파비콘 색 바꾸기와 저장, 파일이름 바꾸기
다음은 색을 바꿔보겠습니다. 메뉴에서 Image – Adjustments – Hue/Saturation(Ctrl+U)를 선택하면, 위와 같은 창이 뜹니다. Hue부분의 슬라이드를 조절해서 색을 바꿔줍니다. 여기서는 파란색으로 바꿔봤습니다. OK를 누르면 적용됩니다.
메뉴에서 File – Save for Web(Alt+Shift+Ctrl+S)을 선택합니다. GIF로 설정해준 뒤1 설정을 대충 위와 같이 하고, ‘Transparency(투명화)’에 체크해줍니다. 아까 삭제했던 테두리 부분이 투명으로 처리됩니다. 디더 부분은 No Dither로 선택합니다. 위 이미지에는 고작 12가지 색이 사용되었네요. Color Table을 보면, 어떠어떠한 색이 쓰였는지 확인할 수 있습니다. Save 버튼을 누르고, 파일명을 지정합니다.
저장이 완료되면, 탐색기에서 파일명을 바꿔줍니다. 원래 GIF 파일이지만 과감하게 확장자도 바꿔줍니다. favicon.ico로 바꾸면 됩니다.
3. 파비콘 업로드 하기
파비콘을 다 만들었으니, 이제 웹에 업로드 합니다. 만약 별도 계정이 있다면 그곳에 올려도 되겠지만, 없다면 이미지를 호스팅하는 서비스에 올려야겠죠. blogger 사용자들은 대부분 구글 계정을 가지고 있으니, 구글에서 해결해 보도록 합시다. 구글에서는 Picasa 웹앨범이라는 서비스를 제공하고 있습니다. 피카사 웹앨범은 blogger와도 연동되죠. blogger에서 올린 이미지는 자동으로 피카사 웰 앨범에 등록됩니다. 그럼 피카사 웹앨범에 한 번 올려볼까요?
이런, 올바른 파일 형식이 아니라고 하는군요. JPEG나 GIF, PNG 같은 이미지 파일 형식이 아니어서 거부되나 봅니다. ‘업로드 시작’ 버튼도 활성화되지 않았고요. 그럼 애써 만든 파비콘을 대체 어디에 올려야 할까요?
황당하게도, blogger의 ‘새 게시물’ 메뉴에서 파비콘을 업로드 할 수 있습니다. blogger 대시보드에서 ‘새 게시물’ 버튼을 누르고, 에디터에서 이미지 업로드를 선택한 후, 파비콘 경로를 지정해주고, 확인 버튼을 누릅니다. 그러면…
이렇게 너무나도 잘 업로드 됩니다. 그리고 이건 좀 웃기지만, 똑같은 이미지가 피카사 웹앨범에도 업로드 됩니다!
이렇게 말이죠! 다만 확장자가 gif로 바뀌었네요.
4. 파비콘 주소를 HTML에 넣기
아무튼 파비콘을 웹에 업로드 했으니, 이번엔 HTML을 수정해 봅시다. 우선, 파비콘의 정확한 주소를 알아내야 합니다. 아까 파비콘을 업로드 했던 ‘새 게시물’ 메뉴에서, 이 주소를 찾을 수 있습니다.
파비콘을 업로드하고 난 뒤, 에디터의 오른쪽 위에 위치한 ‘HTML 편집’ 버튼을 누릅니다. 그러면 게시물의 소스 코드를 볼 수 있죠. img src 태그 부분을 찾아보면, 위와 같이 주소를 찾을 수 있습니다. 그런데 피카사 웹앨범에 올라온 주소랑은 약간 다르군요. 아무튼, 이 주소를 복사해 둡니다.
블로그 관리 메뉴(또는 대시보드)에서, 레이아웃 – HTML 편집 메뉴를 선택합니다. 위와 같이 소스 코드가 보일 겁니다. 오른쪽 위에 있는 ‘도구 템플릿 확장’ 에도 체크를 해줍니다. <head>태그와 </head>태그 사이에 파비콘을 넣어줄 HTML 코드를 삽입합니다. 소스를 잘 살펴보고, <b:include data='blog' name='all-head-content'/> 코드보다 아래쪽에 다음 코드를 추가합니다. (이 코드는 blogger의 기본 주황색 파비콘을 보여주는 코드입니다.)
<link href='앞서 복사해 둔 파비콘의 주소' rel='shortcut icon' type='image/ico'/>
수정을 마쳤으면, ‘템플릿 저장’ 버튼을 눌러 템플릿을 저장합니다.
5. 확인
웹 브라우저에서 블로그를 열어, 파비콘이 제대로 적용되었는지 확인합니다. 간혹 캐시에 저장된 파비콘이 보일 수 있으므로, 캐시를 비우거나 Ctrl+F5(firefox) 키를 눌러 전체 새로 고침을 합니다.
제 블로그를 파이어폭스, 사파리, 오페라, 크롬에서 본 모습입니다. 파란색 B모양 파비콘이 잘 나오네요. 참고로 익스플로러 6에서는 파비콘이 잘 나오지 않을 수도 있습니다(브라우저 탓). 잘못 수정된 건 아니니 걱정하지 않아도 됩니다.
저는 기존의 파비콘을 색만 바꿔 사용했지만, 포토샵을 다룰 수 있다면 직접 만들어 쓰셔도 됩니다. 중요한 건 16x16 사이즈, GIF저장, 그리고 업로드만 신경 쓰면 된다는 것이죠.
내 블로그의 파비콘에 질렸다면, 오늘 한번 바꿔보시는 건 어떨까요?
1) 원래 별도의 아이콘 편집 프로그램 없이 ico파일을 만들 땐, bmp 포맷을 이용합니다. 이미지를 bmp로 저장한 뒤 확장자를 바꿔주는 식이죠. 그런데 gif로 했음에도 불구하고 브라우저에서 파비콘이 잘 나타나네요;; 그저 신기할 따름입니다.
글
좋은 팁입니다..
답글삭제오호라. 이렇게하는것이였군요
답글삭제전 B대신 R이나 H를 넣고싶은데 로고에 사용된 폰트를 몰라서 그냥 놔두고있습니다^^;
Archmond 님/
답글삭제댓글 감사합니다.
HyunKu (현쿠) 님/
혹시나 해서 blogger 로고에 사용된 폰트를 찾아봤는데, 찾기 어렵더군요. 그냥 다른 폰트를 이용해서 비슷하게 만드심이 어떨지 ^^;
베리 굳이네요 ^^ 좋은 팁 잘 보고 갑니다. 바로 적용했습니다.
답글삭제도움이 되어 기쁘네요~
답글삭제윽... 저는 왜 ico파일이 업로드가 안될까요...ㅠ
답글삭제Hwan 님 / Blogger의 위지윅 편집기에서 업로드 하셨나요? 신형 위지윅 편집기에서는 업로드가 안될 수도 있습니다. 만약 다른 계정을 갖고 계시다면 그곳에 올려도 좋고요.
답글삭제다른 계정 어디가 또 적당하나요... ico 파일을 올릴 수 있는 곳이 별로 없네요..
답글삭제Hwan 님 / 음 글쎄요... 전 Blogger 편집기에서 ico파일이 업로드 되던데, 잘 안 되시나요? 따로 호스팅 같은걸 쓰고 계시다면 거기도 좋고, 구글 Docs의 파일업로드에 올라갈 수 있을지도 모르겠네요. 그런데 지금 Hwan 님의 블로그에 들어가보니 png로 설정한 파비콘이 파이어폭스와 크롬, 오페라에선 잘 나오고 있습니다.
답글삭제Hwan 님 / 구글 페이지 (http://pages.google.com) 에서 파일을 업로드할 수 있습니다. 방금 ico 파일을 올려봤는데 잘 올라가네요. 주소도 간단한 편이고요. 참고하시기 바랍니다.
답글삭제그런데 레이아웃에서 새게시물에 어디 있나요 전 그냥 파비콘 상단좌측에만 넣었는데
답글삭제세게시물은 안보이네요 레이아웃에서요 ???
이 글은 2009년 게시글로, 당시엔 일종의 (공식적이지 않은) 편법을 이용하기 위해 위와 같이 설명한 것입니다. 2012년 현재 Blogger에서 공식적으로 파비콘 업로드를 지원하므로, 그냥 레이아웃에서 파비콘 넣으면 됩니다.
삭제요즘은 활동을 안하시나요 티스토리 블로그 꾸미는데는 만이봤서도 구글 블로그
삭제설명은 거의 전무후무 하네요 생각보다 찻기가 쉽지 안네요 좋은 기능들이 만은데
사용을 못하니 답답합니다.
아무래도 요새 블로거에 대한 포스팅 올릴 게 별루 없더라구요... 그만큼 사용하기 쉬워진 부분도 많고요. 웬만한 건 해외 사이트 뒤져보면 좋은 게 많고, 국내에서는 지저깨비 님의 블로그(http://zizukabi.blogspot.kr/)에 Blogger에 대한 좋은 내용들이 많습니다. 그래도 궁금하신 부분은 질문 주시면 최대한 답을 찾아보겠습니다 ^^
삭제파비콘으로 사용할 파일의 형식에 따라 적용해 주거나 그냥 생략해도 웬만하면 돌아갈 텐데요, 지금 찾아보니 image/x-icon 으로 많이 쓰는거 같네요. 만약 png 형식이라면 image/png 식으로 써주면 됩니다.
답글삭제