본문 바로가기
햄릿슈의 생활 정보/IT & 블로그 & 유튜브

파비콘이란? 티스토리 블로그 파비콘(favicon) 만들기 및 적용 방법

by 햄릿슈 2017. 9. 11.

'파비콘(favicon)'이라는 단어 자체가 생소한 분들이 많이 있으실 겁니다. 저도 처음에 들었을 때는 '그게 뭐지?'라는 의문을 품었었지만 파비콘이 무엇인지 확인하고 나니 '아~ 그거?' 라는 생각이 들 정도로 친숙한 아이콘입니다.

파비콘의 정의는 간단하게 말하면 즐겨찾기 아이콘, 즐겨찾기(favorites)와 아이콘(icon)의 합성어로 주소창에 조그만 아이콘으로 표시가 되어있습니다. 일반적으로 16x16 크기의 적당한 아이콘을 만든 후 favicon.ico의 파일명로 수정한 뒤 웹 사이트 디렉토리에 넣어서 적용시킬 수 있습니다.

 

파비콘이란? 티스토리 블로그 파비콘(favicon) 만들기 및 적용 방법

 

위에 글로 자세하게 설명해드리긴 했지만 실제로 보지 않고는 모르시는 분들이 있으실 수 있기 때문에 이미지를 따로 첨부하였습니다. 위에 보이시는 이미지에 들어있는 아이콘이 바로 파비콘입니다. 인터넷 익스플로러 기준으로 캡쳐해서 올려드렸으나 크롬이나 다른 웹브라우저에서도 동일하게 적용되니 참고하시기 바랍니다.



먼저 파비콘을 만들기 위해서는 포토샵이나 그림판, 일러스트레이터 등 툴을 가지고 작업을 해주셔야 하는데요. 저는 포토샵으로 작업을 했습니다. 위에 설명드리기로는 16x16이 일반적이라고 하긴 했지만 저희는 티스토리 블로그용 아이콘을 만드는 것이기 때문에 티스토리 최적사이즈인 32x32나 64x64로 만들어 주시면 됩니다. 저는 눈, 코, 입만 만든 굉장히 간단한 파비콘을 만들게 되었는데요. 대충 만들었는데도 불구하고 마음에 들어서 이대로 쭉 쓰기로 했습니다.



아이콘을 완성 하셨으면 아이콘으로 변환처리를 해주셔야 하는데요. 파일명이나 확장자만 바꾼다고 해서는 쉽사리 변경되지 않습니다. 때문에 누군가의 도움을 받아야 하는데요. 이미지 파일을 ico파일로 컨버트 해주는 사이트가 있습니다. 위의 이미지 처럼 왼쪽 화살표 쪽을 클릭해서 이미지파일을 첨부하거나 드래그 해서 옮겨서 업로드 해주시면 몇초 내로 오른쪽에 완성된 ico 파일을 다운받으실 수 있습니다.
이미지 파일을 ico 파일로 변환시켜주는 사이트로 이동(클릭)



이제 파비콘이 완성 되었으면 적용을 시켜주셔야겠죠? 티스토리 사이트 => 블로그 관리에 들어가셔서 좌측 상단의 블로그 아이콘을 클릭해줍니다. 따로 지정하지 않으신 분들은 회색의 티스토리 아이콘이 박혀 있으실텐데요. 저는 적용을 한 이후에 캡쳐한거라 변경 되어있는 아이콘이 들어가 있습니다. 아이콘을 클릭 해주시면 우측에 아이콘과 파비콘 모두를 설정해주는 페이지가 열립니다. 열심히 작업하셨던 이미지 파일과 ico 파일을 3곳에 모두 적용시켜 줍니다. 기호도에 따라 다르게 설정하시는 분들도 있을 수 있지만 저는 디자인과 거리가 멀기 때문에 동일하게 적용했습니다. 



설정이 완료되었다면 새로 웹브라우저 창을 열어서 본인의 티스토리 블로그에 한번 접속해봅니다. 위의 이미지처럼 파비콘이 잘 나온다면 잘 따라오신거겠죠. 모바일에서도 즐겨찾기를 추가하면 파비콘을 보실 수 있으니 참고하시구요. 운영하시는 블로그 번창하시기를 기원합니다.

이만 포스팅을 마치겠습니다.
안녕.

-관련글
[햄릿슈의 생활 정보] - 구글 애드센스 결제수단 추가 방법 (구글 애드센스 수익금 지급받는 방법)
[햄릿슈의 생활 정보] - 구글 애널리틱스 가입 방법과 간단한 사용 방법
[햄릿슈의 생활 정보] - 구글 애드센스 PIN번호로 주소 인증하는 방법
[햄릿슈의 생활 정보] - 구글 드라이브 PC용 다운로드 및 사용법
[햄릿슈의 생활 정보] - 국내은행 SWIFT CODE 및 영문명(국민은행, 우리은행, 신한은행, 기업은행 등)
[햄릿슈의 생활 정보] - 블로그에 유트부 동영상 자동재생, 반복재생으로 올리는 방법
[햄릿슈의 생활 정보] - 블로그에 활용가능한 저작권이 없는 해외무료이미지사이트
[햄릿슈의 생활 정보] - 티스토리 블로그 글씨체(폰트) 나눔고딕으로 간단하게 변경하기