티스토리 아이콘 파비콘 적용하는 방법

티스토리 아이콘과 파비콘은 알고 있었는데 계속 미루다가 오늘 날 잡아서 아이콘을 제작했습니다. 블로그를 꾸미기 위해서는 많은 시간 투자가 필요하더군요. 아이콘과 파비콘이 블로그의 어디에 표시되는지 그리고 어떻게 적용해야 하는지 알아보겠습니다. 

아이콘 적용하기

아이콘은 댓글을 작성하면 닉네임 앞에 표시가 됩니다. 설정이 안되있으면 저렇게 닉네임 앞에 아무 표시가 안되어 있습니다.

 

아이콘의 최적 사이즈는 32x32, 64x64 / 파일형식 JPG, GIF, PNG 입니다. 저는 크게 만들어서 사이즈를 줄였습니다.

티스토리 관리자로 가서 밑에보면 관리 - 블로그로 이동해 주세요.

아이콘과 파비콘을 등록하는 부분이 나옵니다. 먼저 아이콘 불러오기로 미리 만든 이미지 파일을 열어주고 변경사항 저장을 해주세요.

티스토리 플러그인에서 블로그 아이콘 표시를 찾아 눌러주세요.

아이콘은 16x16, 32x32, 64x64 총 3가지 크기로 표시 할 수 있습니다. 원하는 사이즈 선택 후 적용 버튼을 눌러주고 댓글 있는 글로 가서 확인해 보면 아이콘이 표시가 됩니다.

아이콘 사이즈 별로 이렇게 표시되니 참고해 주세요.

파비콘 적용하기

파비콘은 웹 브라우저 창에 표시되는 사이트를 대표하는 아이콘입니다. 설정이 안되 있으면 티스토리가 연상되는 파비콘이 기본으로 나옵니다.

파비콘 변환 사이트

먼저 파비콘을 만들어 보겠습니다. 저는 아이콘과 같은 이미지로 제작을 할 예정입니다. 이미지 확장자 PNG / JPG / GIF 파일을 확장자 ICO 파일로 변환해 주는 사이트입니다. 파일 선택을 눌러서 만들어 둔 아이콘 이미지를 열고 밑에 사이즈를 선택 할 수 있는데 Generate only 16x16 favicon.ico는 16x16 사이즈의 파비콘만 만드는 것이고 위 쪽은 다양한 기기에서 사용할 수 있는 사이즈의 PNG 파일들과 16x16 파비콘 파일이 하나 있는 압축파일로 받을 수 있습니다. 어차피 둘 중에 아무거나 해도 16x16 파비콘 하나만 받을 수 있는 것 입니다. Create Favicon을 눌러주세요.

Download the generated favicon을 누르면 다운로드가 됩니다.

파비콘을 다운로드 받았는데 이상하게 흐릿하게 나오는겁니다. 그래서 좀 더 선명하게 변환해 주는 사이트를 찾아봤습니다.

CONVERTICO 사이트

파비콘으로 변환해 주는 사이트는 많이 있습니다. 오래된 사이트는 사라지기도 하고 새로 생기기도 하더군요. 다른 사이트에서 변환을 해봐야겠습니다. 이 사이트는 PNG 파일만 변환이 가능합니다.

이 사이트는 변환할 파일을 업로드 하기 전에 사이즈를 선택 할 수 있습니다. 최대 256x256 사이즈까지 가능한데요. 사이즈 별로 이것 저것 테스트 해보니 결과물이 제일 좋았던건 위의 세팅대로 하고 256x256 사이즈의 파일을 올리면 되더군요. 참고로 I agree to publicly display the icon in Recently Converted에 기본적으로 체크가 되어있는데 파비콘 생성한 파일 이미지가 사이트 하단에 표시가 됩니다. 체크해제 해도 아이콘으로 변환하는데는 아무 문제가 없습니다.

처음에 만든 파비콘보다 크기가 커 보이는데 사이즈는 16x16 똑같습니다. 파일 썸네일 크기가 똑같이 안 나와서 정확한 비교는 안되는데 더 선명하게 나오긴 했습니다.

비교를 위해서 둘 다 올리고 어느게 더 선명한지 테스트를 해봤습니다. 여러분들은 구분이 되나요? 저의 육안으로는 차이를 못 느끼겠습니다. 오른쪽이 처음 만든 파비콘 왼쪽이 두 번째 만든 파비콘입니다. 이게 약간 확대를 한 이미지인데 실제 16x16 사이즈로는 진짜 모르겠더군요.

혹시나 제가 만든 아이콘이 너무 심플해서 그런가 싶어서 구글 플러스 파비콘으로 똑같이 변환하고 테스트를 해봤습니다. 이건 256x256 사이즈로 만든 파비콘이 약간 더 선명하게 보이네요. 파비콘으로 변환하고 나서 흐릿하게 보이는게 문제가 있긴 하네요.

우여곡절 끝에 파비콘을 만들었습니다. 마찬가지로 티스토리 관리에 블로그로 들어가서 파비콘을 불러오고 저장을 해주세요.

T자로 보이던 파비콘이 제가 만든 파비콘으로 바뀌었습니다. 뭔가 나만의 블로그를 대표하는 이미지가 만들어졌다는 생각을 하니 뿌듯하고 보람있는 작업이었습니다.

파비콘도 플러그인이 있지만 사용하지 않아도 파비콘은 적용이 됩니다. 그리고 블로그 아이콘 표시 플러그인과 같이 사용하면 중복으로 아이콘이 뜨더군요.

플러그인을 두 가지 다 설정하면 이렇게 중복으로 나오니 참고하세요.

> 티스토리 프로필 사진 댓글 적용 방법