본문 바로가기

유틸리티

파비콘(favicon) 만들기와 적용 방법 간단합니다

파비콘(favicon) 만들기 및 적용 방법!



웹브라우저를 실행하고 특정 웹사이트를 방문하면 사이트마다 파비콘이 다른걸 볼 수 있습니다.

파비콘(favicon)이란? 인터넷 웹 브라우저 주소창에 표시되는 웹사이트나 

웹페이지를 대표하는 아이콘으로 네이버,티스토리 N,T 등을 볼 수 있습니다.



오늘은 파비콘(favicon) 만들기와 적용 방법을 간단하게 알아보도록 하겠습니다.

포토샵을 이용하거나 응용 프로그램을 사용해서 PNG(투명) 파일을 만들어도 되고,

기타 변환 웹사이트를 이용하거나 PNG 파일을 다운 받아도 됩니다.

일반적으로 16X16 사이즈를 사용하지만 블로그에 적용하는건 96X96 사이즈를 사용해도 상관없습니다.



파비콘 만들기는 간단하게 웹사이트를 이용해서 사이즈별로 다운을 받을 수 있습니다.

여기를 클릭하고 "Favicon & App Icon Generator" 웹사이트로 접속합니다.

"파일 선택"을 눌러서 PNG 파일을 업로드 하고 "Create Favicon"을 클릭합니다.


하단에는 색상별로 파비콘 갤러리 페이지에서 다운을 받을 수 있습니다.

번역이 필요한 분들은 크롬 브라우저에서 마우스 우클릭 "번역" 기능을 사용하세요!



파비콘 만들기가 끝나면 "다운로드" 메뉴를 클릭하고 저장합니다.

개별적으로 HTML 편집을 통해 HEAD 사이에 소스를 넣고 적용을 해도 됩니다.



다운 받은 파비콘 파일의 압축을 풀면 위와 같이 사이즈와 용도별로 많은 파일을 볼 수 있습니다.

제가 티스토리 블로그에 적용할 예시는 96X96 사이즈로 해보겠습니다.



티스토리 블로그 환경설정 "기본 정보" 카테고리를 클릭하고 

아이콘 항목에 있는 파비콘 "찾아보기"를 누르고 업로드를 해주고 저장합니다.



크롬,파이어폭스 등의 웹브라우저에서 티스토리 블로그 주소를 입력해보면 

위와 같이 정상적으로 파비콘이 적용된걸 볼 수 있습니다!!


정말 간단하죠? 알려드린 방법은 제일 간단한 루트니 참고하시면 되겠습니다!

이것으로 파비콘(favicon) 만들기와 적용 방법을 간단하게 알아보았습니다.

오늘도 즐거운 하루 보내세요!