오늘은 구글 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로 설정해준 뒤¹ 설정을 대충 위와 같이 하고, ‘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로 했음에도 불구하고 브라우저에서 파비콘이 잘 나타나네요;; 그저 신기할 따름입니다.

6월 19일 현재, 구글 크롬의 최신버전은 3.0.189.0(Dev) 입니다. 그런데 파비콘(favicon)을 표시하는데 있어 버그가 있는 것 같아 포스팅 합니다.

크롬은 파비콘을 탭 왼쪽에 표시합니다. 파이어폭스는 탭 왼쪽과 주소 창 왼쪽에 표시하죠. 원래대로라면, 이렇게 표시되어야 합니다.

요새 자주 이용하는 트위터의 파비콘입니다. 깔끔하게 소문자 T가 보이죠. 그런데, 트위터에서 여기저기 링크들을 누르고 하다 보면,

 

이렇게 됩니다. 파비콘의 테두리에 보기 싫은 찌꺼기가 생겼네요.

혹시 트위터만 그런 게 아닐까 싶어서, 다른 사이트들도 해봤습니다. 플리커, 믹시, 크롬 홈페이지, 오페라 홈페이지 등입니다.

 

(이미지가 가로로 넓어, 수정했습니다) 처음 접속했을 때는 파비콘들이 제대로 표시됩니다. 하지만 사이트 내에서 여러 링크들을 누르고 하다 보면,

 

여지없이 이렇게 되어버립니다. 오페라의 파비콘이 가장 심하게 더럽혀졌네요.

 

몇몇 사이트들의 파비콘을 살펴보니, 16x16 픽셀의 아이콘 사이즈를 꽉 채운 파비콘들에선 이런 현상이 나타나지 않았습니다(구글이나 블로거의 파비콘). 또한 색이 없는 부분을 깔끔하게 지워버린 파비콘들(다음이나 네이버)에서도 이런 현상이 나타나지 않았습니다.

아마도 ‘반투명 테두리’를 쓴 파비콘들에서만 이런 현상이 나타나는 것 같습니다. 파비콘의 테두리를 깔끔하게 만들기 위해 아이콘 제작 툴에서 알파채널 등을 사용하기도 하는데, 그런 파비콘들에서만 이런 현상이 나타나고 있는 것이죠. 그래도 설마 싶어 다른 컴퓨터에서도 테스트 해봤는데, 똑같은 현상이 발견되었습니다.

재미있는 건 파비콘이 지저분하게 나와도, F5 키(새로고침)를 한 번 눌러주면 다시 깔끔하게 나온다는 것입니다. 물론 링크를 눌러 동일 사이트 내 다른 페이지로 가버리면 또 깨지긴 하지만.

 

당장 크롬으로 웹 서핑을 즐기는 데에는 전혀 문제가 없지만, 그냥 좀 신경이 쓰이네요(특히 스크린샷 찍을 때). 물론 업데이트가 되면 언제 그랬냐는 듯이 고쳐지겠죠? :)

덧) 크롬 3.0.192.x 버전 이후로 이 버그는 수정되었습니다. 아주 깔끔하게 잘 나옵니다.