[블로그팁]블로그 방문자의 파비콘이 크게 나온다면? 파비콘 크기조절 방법

어제.. 아니 그제군요.. 하루가 넘는동안 댓글알리미가 제대로 동작하지 않는 장애가 있었는데요.
티스토리 측에서는 많은 사용자가 불편을 겪었음에도 이렇다할 공지나 빠른 대처를 하지 않아서
참 실망스러운 하루였답니다.
다음 프로필의 '내알림'과 티스토리의 '댓글 알리미'가 다르다??

티스토리의 공지사항에 트랙백과 댓글로 내용을 알렸고 오후 7시가 넘어서 해당 기능이 정상화 되었다는 내용의
댓글을 달았더군요. 하지만 아직까지도 완전 정상화 됐다고 얘기하긴 힘들정도이더군요.

참!! 이얘기를 하려는게 아닌데.....

지난 주 몇일간에 걸친 포스팅으로 파비콘에 대해 알려드렸었죠?
그 얘기들은 아래 링크로 확인 할 수 있답니다.

블로그 주소창의 파비콘 만드는 방법에 따라 뭐가 다를까?
[블로그팁]개성있는 파비콘으로 나만의 블로그 아이콘을 만들어보세요~!!
[블로그팁]파비콘의 완결편. 포토샵으로 아이콘 만들며 삽질하다~~!!

이번에는 파비콘의 크기에 대해서 잠깐 알아볼까 해요.

우선 제 블로그의 파비콘을 살펴볼게요.

왼쪽 위로 주소창에 보이는 파비콘의 크기는 가로,세로 16픽셀(px)의 크기를 가지고 있습니다.
그에 반해 본문 댓글에서 보여지는 파비콘이 조금 크게 보이는데요.
크기를 확인하니 가로,세로 20픽셀이네요.

크기 조절없이 두개를 같이 놓고 보니 크기차이도 나지만 작은 아이콘은 또렷하게 보이는 반면
큰 쪽은 햇반이란 글씨가 흐릿하게 보이죠?

블로그 아이콘의 경우 최대 64px크기의 이미지까지 사용할 수 있지만
파비콘은 16px의 크기만 사용할 수 있답니다.

보시다시피 블로그 아이콘은 파일형식의 선택, 크기의 선택이 가능합니다.
하지만 파비콘은 가로,세로 16픽셀 크기의 ico파일만이 사용 가능하답니다.

처음 그림에서 보여지는 파비콘은,
16픽셀 크기의 이미지를 20픽셀로 늘려놓으니 흐릿하고 볼품없이 보일 수 밖에 없는거죠.

그래서 파비콘의 크기를 변경하기 위해 스킨 수정을 하기로 마음 먹었습니다.

파비콘에 대한 설정은 CSS수정으로 가능한데요.
스킨 -> HTML/CSS 편집 경로로 이동하시면 찾을 수 있습니다.

사실 이 내용을 알고 수정을 한게 아니랍니다.
이전부터 작성한 글을 쭉 보셨다면 어느정도는 눈치채셨겠지만

항상 얘기하듯이 전 HTML이나 스크립트 등 웹 관련 지식이 별로 없기 때문에
대부분 삽질 혹은 맨땅에 헤딩 하는 식의 방법으로 수정도 해보고 내용을 알려드리기도 하는 거랍니다.

그래서 이번에도 맨땅에 헤딩했답니다.

그럼 파비콘의 크기에 해당하는 부분을 어떻게 찾았을까요?

방법은 의외로 간단하더군요.
위에서 파비콘의 크기기 가로,세로 20픽셀이었다고 했죠?

그래서 20px 로 검색을 했답니다.

이렇게 width:20px height:20px 이란 결과를 찾을 수 있었구요. 가로:20픽셀 세로:20픽셀이란 뜻이죠.
혹시나 해서 위 아래로 좀더 살펴보니 위쪽으로 Reply란 단어가 보이네요.
우리말로 답글, 댓글이라 해석할 수 있으니 제가 찾고 있던 결과가 맞군요.

알고 있는 부분은 어렵지 않게 해결하지만
제가 잘 모르는 부분은 이런 방식으로 찾는 경우가 많답니다... 아하하~~

그럼 다시 내용으로 들어가서 가로,세로 20픽셀을 표시한 것과 같이 16픽셀로 바꿔 주었답니다.
그리고 수정내용을 저장하고 다시 확인을 해봐야죠?

가장 처음에 등장했던 그림에서 주소창이랑 본문에 보이는 파비콘의 크기가 달랐었죠?
하지만 이젠 같은 크기로 보이네요. 속성을 확인하니 16픽셀이 맞구요.

자 이렇게 파비콘의 크기를 가장 정확하게 볼 수 있는 16픽셀의 크기로 변경했습니다.
이 방법은 제 스킨에서만 가능한 방법은 아니구요.
스킨마다 약간의 차이는 있겠지만 댓글 등에서 보여지는 크기만 정확히 확인한 다음 검색을 하시면
방법을 찾을 수 있을거에요.

스킨의 작은 부분을 하나씩 수정 해보는거 그리 어렵지 않습니다. 저도 하는걸요!!^^

스킨에 대해 너무 어렵게 생각하지 마시구요. 이것저것 수정도 해보세요~!! 까짓거 별거 아니라니까요~ㅎㅎ