티스토리

파비콘(Favicon) 생성 후 티스토리에 적용하기



파비콘이란 ?


파비콘(영어 : favicon, 'favorites + icon' : 즐겨찾기와 아이콘의 합성어)  이란, 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.

아이콘 크기는 16x16, 32x32, 48x48, 64x64 픽셀이 될 수 있고, 8비트, 24비트 32비트 색상이 가능하다.


다음 포맷은 브라우저에 상관없이 호환되며 인터넷 익스플로러, 파이어폭스, 크롬, 오페라에서 모두 지원한다.

<link rel = "shorcut icon" href="http://www.example.com/myicon.ico" />


다음도 허용된다

<link rel = "shorcut icon" href= "/somepath/myicon.ico" />



//위키백과, 파비콘




1.  파비콘 만들기


글 먼저, 포토샵 등의 툴로 파비콘을 만들기 위한 이미지(JPEG, PNG, GIF) 를 준비한다.

무료로 사용할 수 있는 아이콘 등을 이용해도 된다.


나의 경우엔 밍초로 만들고 싶은데 대문자 M은 너무 각이져 있어서 소문자 m을 사용했더니 샤오미 핑크 버전이 된것같다..

(16x16 크기로 만들었는데 안보여서 확대했더니 조금 깨진다 ㅎㅎ)



이미지가 준비 되었으면 파비콘을 무료로 만들어 주는 사이트로 이동한다. 

검색해보면 굉장히 많은 사이트가 있지만 나는 이곳을 이용했다.   http://www.favicon-generator.org/



위와 같이 다운로드를 마치면, favicon.ico 파일이 생성되며 파비콘이 만들어졌다.



2. 티스토리에 적용하기


먼저, 관리 -> 플러그인 -> 플러그인 설정 에서 "블로그 아이콘 표시" 가 비활성화 되있을 경우 활성화 해준다.

이 때, 홈페이지 아이콘 표시 플러그인이 함께 활성화 되있을 경우 댓글 등록시 표시되는 아이콘이 두개로 표시될 수 있으니, 확인해보도록 하자.



플러그인 설정이 되었으면

티스토리에서 관리 -> 환경설정 -> 기본정보 -> 아이콘 탭을 보면 아래와 같이 파비콘을 선택할 수 있게 되어있다.



위에서 파비콘을 등록한 후 아래 저장버튼을 눌러 기본정보를 저장해 준다.



위의 과정까지 모두 했는데 파비콘이 표시되지 않을 경우, 


관리 -> 꾸미기 -> HTML/CSS 편집 으로 들어가서 HTML 문서 상단 <head></head> 사이에 아래와 같은 코드가 있는지 확인해 준다.


<link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />



위와 같이 추가해도 파비콘이 변경되지 않을 경우엔, 

관리 -> 꾸미기 -> HTML/CSS 편집 -> 파일업로드 탭에서 favicon.ico 파일을 직접 업로드 해주세용.



만들다보니 핑크샤오미.. 색감은 LG유플러스 같기도하고... 


끝!!


  1. BlogIcon SONYLOVE 2017.04.13 18:43 신고

    이게 재미있는게 ico 파일이 아닌 일반 이미지 png jpg 를 업로드해도 적용되더라고요.
    ico 로 안바꿔도 된다는...

    • BlogIcon 밍로그 MINGCHO 2017.04.13 19:10 신고

      아하 항상 관습적으로 ico 로 전환해서 해왔었는데 그냥 png 파일로도 되는군요!!

+ Recent posts

티스토리 툴바