본문 바로가기
디지털노마드/블로그 운영하기

티스토리 블로그 아이콘, 파비콘 적용하는 방법

by 뚱찌빵찌 2020. 10. 21.

티스토리 블로그 아이콘 파비콘 설정, 적용하는 방법

티스토리 블로그 파비콘, 아이콘 설정하는 방법

블로그 운영은 처음이라 여기저기 다른 분들 블로그를 구경하다가 너무 맘에 드는 블로그 꾸미기 방법을 발견해서 저도 설정할 겸 올려봐요. 

 

티스토리 장점이 운영자 개성에따라 커스터마이징 하며 블로그를 꾸미기 좋다고 하더니 요런 점을 두고 하는 말인가 봐요! 나만의 독특한 하나뿐인 블로그 만들기 시작해보도록 해요😆

 


 

우선 아이콘, 파비콘이 무엇인지 알아볼까요?

아이콘은 댓글을 쓸 때 닉네임 앞에 보이는 그림이고,

파비콘주소창에 뜨는 웹사이트 아이콘 (그림)이에요. 즐겨찾기나 인터넷 창 탭에 표시가 돼요.



 

 

이제 아이콘, 파비콘 설정해볼까요? 

아이콘, 파비콘으로 할 이미지 파일을 준비해주세요.

 

 

 

 

 


 

1. 아이콘 설정하기

우선 아이콘으로 쓸 그림파일을 준비해주세요. 저는 아이패드 무료 그림판 어플로 그림을 그린 후 메일로 보내두었어요.아이콘의 크기는 32x32나 64x64 픽셀이고 파일 형식 (파일 확장자) JPG, GIF, PNG로 준비해 주셔야 해요.

제가 준비한 그림은 크기가 커서 알씨로 이미지 크기를 변경해 볼게요. 

 

  TIP!  

제가 혹시나 크기 변경 안 해도 등록이 되나 싶어서 시도해보았는데 제 파일은 861x861 픽셀이었는데 아이콘 적용이 되더라고요. 크기 변경하지 않고 아이콘 등록해봤다가 등록 오류가 날 경우에 그때 크기 변경하시면 될 것 같아요.

 


  1-1. 이미지 파일 크기 변경하기  

저는 알씨 프로그램을 사용해서 알씨 기준으로 알려드릴게요. 

크기 변경할 이미지 파일을 마우스 우클릭해서 '이미지 크기 변경하기'를 눌러주세요

변환할 파일을 선택하고 마우스 우클릭하기

 

 

 

 

 

 

 

  1-2. 이미지 크기 변경 창에서 '해상도로 조절하기'에 64x64 px로 입력하고 확인 누르기  

이미지 파일 크기 변경 방법

 

 

 저는 저장 옵션으로 파일명 앞에 [크기 변환]이라고 적히게 설정해둬서 이렇게 기존 파일과 크기변환 파일이 생성되었어요.

크기변환 된 이미지 파일 확인하기

 

 

 

  1-3. 티스토리 블로그 관리자 페이지 왼쪽 사이드바에서 관리 하위 카테고리 '블로그'를 선택하기  

좌측 사이드 바 부분 발췌

 

 

 

  1-4. 불러오기를 눌러서 크기 변경한 이미지 파일 선택하고 변경사항 저장하기  

아래 사진처럼 순서대로 ①이미지 파일 불러오기→②불러온 이미지파일 확인 ③변경사항 저장하기

 

아이콘으로 쓸 이미지파일 불러오기

 

 

 

 

 

 

 

 

  1-5. 아이콘 적용 및 활성화하기  

1-5-1. 블로그 관리자 페이지에 들어가서 왼쪽 사이드바의 '플러그인'을 누른 후, '블로그 아이콘 표시'를 누르기

 

아이콘 적용하는 곳 찾아가기 

 

 

 

1-5-2. 아이콘 표시 크기를 골라준 후, '적용' 누르기

 

  TIP!  

아이콘 크기에 따라서 보이는 요렇게 크기가 달라요. 물론 여러분들의 이미지 형태나 크기 따라 다르니 직접 설정해보시고 마음에 드는 크기로 설정해보세요.

 

 

 

 


 

2. 파비콘 설정하기

  2-1. 이미지 파일 ico 확장자 변환 사이트 접속  

파비콘은 이미지 파일의 확장자가 ico에요. 

하단 파란 글을 누르면 가지고 있는 이미지 파일을 ico 파일로 변환해주는 사이트로 이동합니다.

파비콘 변환 사이트 바로가기 

 

 

  2-2. 파비콘으로 쓸 이미지 파일 불러오기  

①이미지 파일 불러오기→②불러온 이미지파일 이름 확인 ③확장자 변경을 위한 'CREATE(생성)' 누르기

이미지파일 ico파일로 바꿔주는 사이트 첫 화면

 

 

 

  2-3. ico 파일로 변경된 파일 저장하기  

밑에 사진에서 보시면 노란색 동그라미 있어요. 이 걸 누르면 내 컴퓨터로 저장돼요.

파일확장자 변환하여 내려받기

 

 

이렇게 favicon이라는 이름의 아주 작고 앙증맞은 이미지 파일이 생겼어요.

생성된 파비콘 파일 확인하기

 

 

 

  2-4. 파비콘 이미지파일 불러오기  

아이콘 불러오기 때랑 똑같이 순서대로 이미지 파일을 불러온 후 저장을 눌러주세요.

파비콘 ico파일 불러오기

 

 

 

저장 누르자마자 요렇게 내 블로그 앞에 파비콘 이미지가 생겼죠? 😍

별거 아닌데 뿌듯하고 블로그에 대한 애정이 샘솟네요!

탭 부분에 적용된 파비콘 확인하기 

 

 

 

  TIP!  

파비콘 만드실 때, 저의 그림처럼 배경이 필요 없는 경우는 그림 배경을 지워주면 훨씬 깔끔해요!

📌 배경 제거 방법을 모를 때 참고하면 좋은 포스팅 바로가기

 

이미지 배경 제거 유무의 차이


 

아이콘, 파비콘 설정하다 막히는 부분이 있거나 알고 싶은 티스토리 블로그 꾸미기가 있다면 댓글 남겨주세요! 댓글은 로그인하지 않아도 가능하니 편하게 남겨주세요.

 

도움이 되셨다면 구독과 공감 눌러주세요~ 😊

감사합니다.

 

댓글