티스토리 블로그 아이콘, 파비콘 만들고 등록하기

오늘은 티스토리 블로그의 아이콘과 파비콘을 만들고 등록하는 방법에 대해서 알아보도록 하겠습니다.

우선 아이콘이 뭔지 파콘이 뭔지부터 알아봐야겠죠.

티스토리 아이콘

블로그를 운영하다 보면 댓글을 보실 수 있는데요. 이렇게 본인 아이디 앞에 달려있는 이미지가 아이콘입니다.

그럼 파콘은 무엇일까요?

이렇게 인터넷 브라우저 창 상단에 보이는 탭 메뉴와 북마크 메뉴 앞에 붙어있는 사이트를 상징하는 이미지를 피콘이라고 해요. 저는 아직 파비콘이 없고 아이콘이 없는 상태이니 이번 기회에 만들어서 적용시켜 볼게요.

그럼 본격적으로 아이콘, 파비콘을 만들고 등록까지 해볼게요.

우선 티스토리 블로그 관리자 페이지로 들어갑니다.

왼쪽 메뉴에 본인의 대문 사진을 클릭하거나 맨 아래 [관리] -[블로그] 메뉴를 눌러주세요.

 

 

 

그러면 본인의 티스토리 블로그의 정보화면이 나와요.

본인의 티스토리 블로그 설명이 아래 보면 아이콘, 파비콘이라는 메뉴를 볼 수 있어요.

여기에 불러오기를 해서 하나씩 등록하면 됩니다. 아이콘과 파비콘이 있어야겠죠?

 

그럼 아이콘부터 만들어서 등록해볼게요.

참고로 아이콘 사이즈는 가로 x 세로 사이즈를 32x32 / 64x64로 해주면 좋아요.

그리고 파일 형식은 jpg, png, gif 상관없이 등록하면 됩니다.

저는 아무래도 해상도가 좀 선명하길 원해서 64x64 사이즈, png로 만들기로 합니다.

저는 포토샵 프로그램이 설치되어있고 포토샵을 주로 사용하기 때문에 포토샵으로 진행을 할게요.

저는 포토샵에서 64x64 사이즈 해상도는 72, rgb컬러로 설정을 해서 새로 만들기를 해주었어요.

혹시 포토샵이 없는 분들은 운도우에 기본적으로 설치돼있는 그림판으로도 충분히 작업이 가능하니 그림판으로 만들어도 돼요. 그림판으로 만드는 건 검색해보면 나와요.

그리고 아이콘 모양은 캔바라기 고양이들 중 턱시도를 예쁘게 입은 칸쵸를 아이콘과 파비콘으로 사용하기로 했어요.

저는 칸쵸 캐릭터를 일러스트로 만들어 놓았기 때문에 일러스트에서 복사를 해서 포토샵으로 붙여 넣기를 해서 저장을 해주었어요.

 

많은 과정이 생략된 것 같지만 이미지 만드는 것은 사람마다 천차만별이니 저는 저장하고 등록하는 것 위주로 설명을 드릴게요.

저장은 png로 할게요.

 

그리고 다시 티스토리 관리자 페이지로 돌아와 아이콘 - 불러오기 버튼을 눌러서 해당 아이콘을 등록해줍니다.

그럼 별문제 없이 등록 완료.!

 

자 이제 파비콘으로 넘어갈게요. 문제는 파비콘입니다.

참고로 파비콘은 사이즈가 16x16으로 상당히 작은 데다가. 문제는 파일 형식이. ico만 된다는 거지요.

그래서 작은 사이즈의 이미지를 하나 만들고 ico로 변환을 해주면 되는데요.

만드는 건 jpg든, gif든, png든 상관은 없지만 gif는 조금 더 손을 봐줘야 할 게 있기 때문에 쉽게 가려면 jpg, png를 추천드립니다.

저는 포토샵에서 작업 중이던 이미지를 사이즈만 다시 줄였어요.

16x16으로 사이즈를 줄이고 이번에는 jpeg(jpg) 확장자로 저장을 하기로 합니다.

 

이제 파일을 저장했으니 jpg를 ico로 변환해줘야겠죠? 검색을 먼저 해볼게요.

검색어에 ico변환이라고 검색을 해보면 친절하게 많은 곳에서 주소와 하는 방법을 설명해 놓았는데요.
사이트 주소는 여기 링크를 걸어놓을게요.

ico 변환하는 사이트 : https://convertico.com

이곳으로 접속을 하면

메인이 이렇게 뜹니다. 여기서 오른쪽 메뉴 Convert를 누르면

이렇게 png를 ico로, ico를 png로.. 이렇게 여러 메뉴가 나오는데요.

저는 jpg로 저장을 했기 때문에 가운데 메뉴인 jpg to ico를 눌러서 들어갔어요.

그다음 회색으로 된 점선 박스 안으로 내가 변경하려고 하는 파비콘 이미지를 드래그 앤 드롭하시면 

빠밤.

바로 오른쪽에 몇 초도 안 걸려서 이렇게 다운로드할 수 있게 떠요. 그럼 흰색 화살표를 누르면 됩니다.

 

그런데.. 저는 등록을 하려니까.

이렇게 파일 크기가 커서 등록이 안된다는 메시지가 뜨는 거예요. 자세히 보니 파일 크기가 어마어마하게 컸어요.

 

아 왜 이렇지 싶어서 jpg가 문제였나 싶어서 다시 png로 저장을 해봅니다.

사실 저는 처음에 smallest file size로 저장을 했는데요.
파일 크기를 어떻게든 줄여보려고요.
그런데 막상 저장을 해보니 smallest보다 large가 파일 크기가 더 작게 나왔어요. 아무래도 이미지 크기가 작고 사용된 컬러 수가 적어서 변형되면서 저장될 때 오히려 small이 더 파일 크기가 커진 것 같은데... 사실 왜 그런진 이해하지 못했어요. 아무튼 large로 해서 png로 저장을 하고 다시 사이트로 들어갑니다.

 

 

오른쪽 상단의 Convert메뉴를 눌러서 Png to ico 메뉴를 눌러

아까와 똑같은 절차로 회색 점선 박스 안으로 이번엔 png 파일을 넣어봅니다.

 

음? 왜 이렇게 커졌지? 그래도 100kb 이하면 되니까 그냥 등록해보자 싶어서 등록을 했지요. 그런데

또 이렇게 뜨는 겁니다. 막상 파일 크기를 확인해보니

이렇게 크기가 나왔어요. 도대체 뭐가 문제 인지...

만들 때 문제인지 저장할 때 문제 인지... 그런데 문제를 알아냈어요.

 convertico사이트에서 회색 점선 박스 위에 왼쪽 톱니바퀴를 보시면 sizes가 나오는데요.

이 부분에 모두 체크가 되어있었어요.

우리에게 필요한 사이즈는 16x16인데 대부분의 사이즈가 다 체크가 되어있는 게 보이더라고요.

그래서 부랴부랴 16x16에만 체크를 하고 나머지는 전부 체크를 해제하고 다시 변경을 해보았어요.

짜잔. 극명한 차이가 보이나요?

처음에 jpg로 했을 때, 두번째 png로 했을때, 그리고 16x16만 체크하고 png로 넣었을 때 파일 크기의 차이가 많이 나는 게 보이죠? 드디어 성공을 하고 저장을 합니다.

극명한 크기 차이

다시 티스토리로 돌아와 파비콘도 등록을 했어요.

음.. 아이콘과 파콘의 해상도가 확실히 차이가 나긴 하네요.

제가 잘못했다기 보단 16x16과 64x64의 해상도 차이겠죠. 아무튼 이렇게 적용을 하고 보니

제 사이트 탭 메뉴 앞에 칸쵸 캐릭터가 똬~ 붙어 있는 걸 확인했어요.

그럼 여러분들도 본인만의 아이콘과 파비콘을 만들어서 등록해보면 좋을 것 같아요.