본문 바로가기
IT ::: it's IT

나만의 아이콘으로 블로그 꾸미기, 파비콘(favicon) 만드는 방법

by 엉성부부 2020. 7. 7.
반응형

웹 사이트를 열다 보면 이런 아이콘을 볼 수 있다.





블로그를 운영하기 전에는 무심코 지나갔던 이런 아이콘들..

무튼 이렇게 웹사이트 옆에 표기된 아이콘을  "파비콘(favicon)" 이라고 한다.

파비콘.. 음 뭔가 생소한 단어이지만, 단어의 뜻을 보면 아! 하고 바로 이해할 수 있다.



크롬이나 익스플로어에서 자주 방문하는 사이트를 즐겨찾기에 추가하는 경우가 있는데, 

그때 즐겨찾기 목록에서도 파비콘을 확인할 수 있다. 



무튼 파비콘은 즐겨찾기와 아이콘의 합성어이다!

파비콘(favicon) = 즐겨찾기(favorities) + 아이콘(icon)



이 파비콘은 모든 웹사이트에서 적용할 수 있는데.. 

나같은 일반인들은 코딩을 할 줄 모르기 때문에 사이트를 뚝딱 만들 수는 없지만 

티스토리 블로그에서는 적용이 가능하다. 






< 파비콘 설정 및 등록 방법 - 티스토리 블로그 기준 >







우선 [티스토리블로그-설정-관리-블로그] 탭에 들어가면 

파비콘 등록하는 화면이 나온다.




위 화면처럼 파비콘 - 파일형식 ico 라고 

적혀있는 문구를 발견할 수 있는데, 


파비콘의 경우 우리가 흔히 알고있는 jpg나 png파일로는 등록이  불가능하다.


그렇기 때문에 내가 원하는 이미지 파일이 있다고 하면

이 이미지를 반드시 ico 확장자로 변환을 해야한다! 

이 부분은 아래 변환사이트와 함께 소개하겠음.





우선 파비콘을 만들기 위해 가장 먼저 해야하는 일은


step 1 >> 파비콘으로 사용할 나만의 이미지(로고) 만들기


로고를 만들어야 한다고 하면 디자인 프로그램 

(ex. 포토샵, 일러스트, 스케치 등)을

필수로 다뤄야 한다고 알고있지만.. 



그런 프로그램이 다운로드 되어 있지 않은 상태이거나 

or 다룰 줄 모른다면

파워포인트나 엑셀로도 만들 수 있다! 



게다가 여기서 제공하는 아이콘들이 많아서

간단하게 색상이나 크기도 변형할 수 있다..! 




아이콘에 들어가면 스마일 표정부터 시작해 동물 아이콘도 다양하다.

아이콘 삽입 후, 더블 클릭하면 색깔을 입힐 수 있다.


혹은 난 이런 아이콘말고 직접 그리고 싶다고 하면

간단한 도형으로 만들어도 무방하다. 




+ 사이즈를 크게 만들면 

용량제한이 있기 때문에 일단은 작게 만드는걸 추천









여기서 로고를 만들었다면

[로고-마우스 우클릭-그림으로 저장]

을 클릭한다! 

그리고 png 혹은 jpg로 저장할 수 있는데 

두개다 같은 이미지 확장자이지만

차이가 있다.


그래서 일단은 png로 저장하기! 







step 2 >> 나만의 이미지(로고)를 ico 파일로 변환하기



이미지로 저장을 했다면 아래의 사이트에 접속한다.


https://convertio.co/kr/png-ico/


이 사이트는 내가 만든 png이미지를 ico파일로 변환해준다!


무.료 & NO 회원가입


 





위 사이트 화면 페이지가 나왔다면,

파일 선택에서 내가 저장한 이미지 파일 png를 불러온다.






그리고 ico로 변환하는건지 한번 더 체크


(왜냐면 이 사이트는 확장자 변환 사이트이기때문에 잘못 클릭하면

다른 확장자로 변환될 수도 있음) 






그럼 이렇게 변환이 완료되고

하단의 파란색 다운로드 버튼을 클릭하면

내가 지정한 이미지의 ico파일이

저장된다! (생각보다 간단 ㅋ )






step 3 >> 티스토리 블로그에서 ico파일을 업로드





다시 이 화면으로 돌아와 파비콘 우측 불러오기 버튼을 클릭하면 끝! 


+ 그리고 png 파일로 제작을 하면 깔끔하고 편한 이유가 있다. 


파비콘을 네모 모양으로 만들면 상관없지만 

원형이나 다른 모양으로 제작을 하려면

png 확장자와 jpg 확장자가 좀 차이가 있다. 



jpg의 경우 아래 이미지 처럼 

뒷 배경이 하얀색으로 지정이 되어 있기 때문에 좀 덜깔끔한 인상을 준다. 





반면 png로 저장을 하게 되면





흰 배경이 투명으로 지정되기 때문에 더 깔끔한 느낌..! 



그래서 가급적이면 png로 저장해서 변환하는게 

더 예쁘고 깔끔한 파비콘을 제작할 수 있다! 


나만의 블로그를 좀 더 관리하고 싶다면

파비콘을 제작하는 걸 추천한다. 

방법이 그리 어렵지도 않다




728x90

댓글