블로그 설명글에 파비콘 넣기

Posted by 도올돌
2014. 9. 13. 09:05 블로그 이야기

티스토리 블로그 닉네임 또는 블로그 설명글에 파비콘을 삽입하는 방법을 알아 보겠습니다.

티스토리는 블로그 정보나 하고싶은 말 등등 자기표현을 위해 블로그 닉네임이나 설명글을 적을 수 있습니다. 밋밋한 텍스트 환경보다는 인상적인 파비콘(이이콘)과 함께 표현 한다면 방문자들에게 블로그의 개성이 잘 각인될 것 같습니다. 방법은 간단합니다..

 

(블로그 설명글 앞에 파비콘을 삽입한 홈 화면 좌측 상단 모습입니다. 블로그 타이틀 밑에 파란 동그라미가 파비콘입니다.)

 

본 블로그의 스킨은 Readiz님의 "FastBoot 1.6.1" 을 사용중인 설치형 블로그 스킨이므로 티스토리에서 기본적으로 제공되는 스킨과는 HTML/CSS 코드위치가 상이하지만, 공통적인 치환자는 동일하므로 응용해서 적용하는데는 문제가 없습니다.  

 

  파비콘(Favicon) 준비하기

 ※파비콘 : 즐겨찾기와 아이콘의 합성어로 주소창에 조그만 아이콘으로 표시되어 있는것을 말합니다.

 

본인의 블로그에서 사용중인 아이콘이나 파비콘이 있다면 이 단계는 보실 필요가 없습니다.

 

그렇지 않다면 아래 링크에서 간단하게 만들거나 공개된 기존 아이콘을 다운 받아서 사용하면 됩니다. 포토샵 사용이 가능하다면 직접 제작하는 것도 좋습니다. 사이즈는 16×16픽셀로 준비하면 되고, 파일 확장자는 jpg, gif, png, ico등으로 저장하면 됩니다.

 

Favicon Generator 바로가기  http://favicon-generator.org/ 

그림파일을 업로드해서 파비콘으로 만들 수 있습니다.

 

편집 탭에서 만들기가 가능합니다.

 

편집 탭에서 직접 원하는 디자인을 그려서 파비콘을 만들 수 있습니다.

 

갤러리 탭에서 원하는 파비콘을 선택해서 사용할 수도 있습니다.

 

  파비콘 파일업로드

 

티스토리 관리자 모드에서 준비한 파비콘 파일을 업로드 합니다.

아래의 경우는 추가를 클릭해서 favicon3.png을 업로드한 화면입니다. 

 

  HTML 코드삽입

 

- 티스토리 관리자 모드 -> HTML/CSS 편집 -> skin.html 에서 찿기 단축키(ctrl+F)를 눌러서

  블로그 설명을 출력하는 치환자  "##_desc_##" 를 찾습니다.

  (위 코드의 위치는 블로그 스킨 종류에 따라 차이가 있을 수 있으므로 각자 사용중인 스킨에 맞는 위치를 찾도록 하세요.)

  

-   위 그림의 "##_desc_##" 앞에 아래 코드를 삽입하면 완료 됩니다.  


&nbsp;<img src="./images/favicon3.png"> 
	

코드 내용은 간단합니다.

"&nbsp;" 공백 : 선택사항이며, 좌우 여백 상황에 맞게 적용하면 됩니다.

<img src="파일업로드 경로"> : "./images/favicon3.png" 파일이 업로드된 경로를 의미합니다.

 


적용이 완료된 모습입니다.