우선 티스토리 블로그에서 아이콘과 파비콘이란 무엇일까요?
아이콘 : 댓글을 쓸 경우에 댓글 앞에 나타나는 이미지를 말합니다.
파비콘 : 블로글 주소탭 앞에 나타나는 이미지를 말합니다.
위 사진을 참고하면 느낌이 퐉!!! 오시나요?
그렇다면 파비콘과 아이콘은 어떻게 만들며 어떻게 적용하는 걸까요!!? 본격적으로 알아보시죠.
1. 티스토리 홈페이지의 블로그 관리 >> 관리 >> 블로그로 이동합니다.
저는 이미 아이콘과 파비콘을 등록했기 때문에 사진이 이렇지만 등록하지 않은 상태라면
찾아보기 버튼을 찾아보실 수 있습니다. 찾아보기 버튼로 자신이 등록하고 하는 아이콘과 파비콘을
선택해주면 되겠습니다.
2. 아이콘과 파비콘을 선택하여 적용하기.
변경사항 저장이라는 버큰은 변경사항이 있으면 빨간색으로 활성화 됩니다.
원하는 아이콘파일과 파비콘파일을 선택하였다면 변경사항 저장 버튼을 눌러주면 완성입니다.
그럼 아이콘과 파비콘 파일은 어떻게 만드나요!!? 라는 궁금증을 갖는 분들이 있을 것 같아서 아주 간편한
방법을 알려드리려 합니다. 참고로 아이콘과 파비콘을 만드는 방법은 정말 많이 있습니다.
주의해야 할 점은 위 사진에도 나와있지만 확장자와 최적사이즈를 잘 맞춰야 한다는 점이죠.
아이콘이나 파비콘을 직접만들고 꾸미고 할 수 있지만 필자와 같은 초보블로거에겐 아주 먼애기로 들리죠....
그래서 이미 만들어져있는 유,무료로 아이콘과 파비콘파일을 다운받을 수 있는 사이트를 소개합니다.
아이콘파인더(링크)
위 링크를 따라가시면 아래와 같은 웹페이지가 표시됩니다.
검색창에 자신이 원하는 그림을 찾을 수 있는 키워드를 넣고 엔터를 눌러주세요.
저는 애드라이프의 ADD를 검색했는데요. 예상대로 더해지는 의미의 파일들이 잔뜩 검색 되었네요.
좌측의 메뉴를 보면 원하는 검색조건을 선택 할 수 있게 되어있어요. 저는 무료가 좋아서 무료!!
말고는 딱히 눈이 가질 않네요....하하하하하하..
그리고 우측 상단을 보면 파일의 픽셀과 배경을 지정 할 수 있습니다.
파비콘의 경우 등록 용량이 100KB 미만이기 때문에 고화질이나 크기가 큰 사진은 등록 할 수 없어요.
그래서 저는 픽셀을 16픽셀로 선택했습니다. 배경은 기호에 맞게 설정해 주세요.
그러면 자신이 원하는 조건의 최종 검색이 완료 됩니다. 이제 원하는 모양만 고르시면 되요!!
원하는 모양을 고르셨다면 필히 PNG파일의 형태로 다운로드 해주세요....!!!!!
혹여 다른 용도의 파일이 필요하시다면 옆에 아래를 향하는 화살표를 눌러보시면 다양한 형태로 저장 가능합니다.
(아래 사진 참고)
아이콘 파인터에서 원하는 파일을 PNG형태로 다운받으셧다면 이제 이 파일을 ICO파일로 변경만 하면 끝입니다.
그럼 애초에 ICO파일로 다운받으면 안되냐는 말을 하실 수도 있는데요. 필자도 그렇게 시도해봤지만 용량 문제로
결국 등록에 실패해서 결국 다른 방법을 포스팅하는 것입니다.
이제 PNG >> ICO과정을 또 무료!!로 해주는 사이트를 소개합니다.
Step 1. Upload an image에서 파일 선택버튼을 눌러 PNG파일 형태로 다운받은 이미지를 선택합니다.
그리고 바로 밑에 Upload버튼을 눌러주면 정상적으로 업로드 됬을 경우 Successfully uploaded. 문가가 나타납니다.
Step 2, Step 3은 표시될 모양고 영역에 대한 설정입니다 원하는 대로 설정해보세요!!
필자는 기본 설정 그대로 했습니다.
Step 4는 파일 포멧에 대한 설정 부분입니다. 기본으론 빨간상자와 같이 되어있으면 따로 다른 포멧이 필요하다면
Custom sizes를 이용해보는 것도 괜찮습니다.
Step 5에서 Convert ICO 버튼을 눌러주면 아래 파란글씨로 써져있는 Download your icon(s)라는 문구가 나옵니다.
해당문구를 클릭하면 최종적인 ICO파일을 다운받을 수 있습니다.
이런과정을 거치면 티스토리에서 용량 문제 걱정없이 아이콘과 파비콘을 등록하실 수 있습니다.
참고로 파비콘 말고 아이콘은 16px가 아닌 32px로도 등록가능합니다. 필자는 여기까지만 해봤습니다.
지금까지 아이콘과 파비콘 쉽게 적용하기 포스팅이였습니다.
계속해서 도움되는 포스팅으로 찾아 뵙겠습니다. by 애드라이프
'블로그 > Tistory 꾸미기' 카테고리의 다른 글
티스토리(Tistory) 구글 애드센스 승인결과 (2) | 2018.11.20 |
---|---|
티스토리(Tistory) CCZ-CROSS 스킨 적용하기 (0) | 2018.10.24 |
티스토리(Tistory) 워터마크 적용방법 (4) | 2018.10.21 |
티스토리(Tistory) 포토샵 필요없는 투명 워터마크 만들기!! (Pixlr edit) (1) | 2018.10.21 |
티스토리(Tistory) 구글 검색 노출 시키는 방법 (0) | 2018.10.19 |