파비콘 만드는 가장 쉬운방법

파비콘이란 무엇일까

블로그를 이제 막 생성했거나 홈페이지를 개설하였다면 블로그나 홈페이지에 대한 애정이 듬뿍 생길 것입니다. 워드프레스라면 메인 메뉴 위쪽으로 들어가는 홈페이지의 로고 혹은 블로그라면 사이드바에 넣을 수 있는 자신만의 로고를 만들 수가 있는데요.

본인 브랜드의 로고 뿐만아니라 인터넷 브라우저를 열었을 때 바로 보이는 아이콘이 있습니다. 이번 포스팅에서는 로고가 아닌 로고와 아주 많이 닮은 파비콘(FAVICON)을 만들어 보려고 하는데요. 다음 (DAUM) 포털 사이트에 들어오면 아래의 이미지처럼 보이는 조그마한 아이콘을 '파비콘'이라고 부르는 것입니다.

파비콘은 영어로 FAVICON 이라고 부르고 있지만 정식 영어는 아니고 Favorite Icon의 줄임말로서 우리가 흔히 알고 있는 즐겨찾기 아이콘이라고 간단하게 생각할 수가 있습니다. 그렇다면 현재 제가 쓰고 있는 티스토리 블로그 기준으로 파비콘 아이콘을 생성하고 저장한 뒤 티스토리 블로그에 올리는 것까지 해보도록 하겠습니다.

우선 favicon.io 이라는 파비콘을 만드는 사이트로 접속을 해주신 뒤 아이콘을 만들어 보도록 하겠습니다. 하지만 힘들여서 파비콘을 만들 필요는 없다고 생각하실 수도 있을 것 같습니다만, 본인의 홈페이지나 블로그에 파비콘을 넣으므로서 본인 스스로가 블로그에 대한 애정도 생기면서 구독자로 하여금 조금 더 신뢰 있는 사이트라고 조금이나마 인식을 시켜줄 수가 있겠지요.

해당 사이트에서 제공하는 아이콘 생성기는 세가지 기능으로 이루어져 있습니다. 첫 번째 는 png 그림파일을 아이콘으로 바꾸는 기능과 text글자를 아이콘으로 바꾸는 법 그리고 이모지(이모티콘)를 아이콘으로 바꾸는 기능 총 세 가지로 이루어져 있는데 저는 text 글자를 사용해 간단하게 아이콘을 생성해서 적용해보도록 하겠습니다.

텍스트를 이용한 파비콘 생성방법

접속을 한 후에 생성기 칸에서 원하는 글자를 한 글자 입력해줍니다. 한글은 폰트 지원이 되지 않기 때문에 영어로 하는 것을 추천드립니다.

TEXT 란에는 글자를 입력해주시고
BACKGROUND 란에는 파비콘의 모양을 설정해 주시면 됩니다. ROUNDED는 저렇게 각이 지지 않는 네모를 생성해주고 CIRCLE을 고르면 원모 양의 파비콘을 만들어줍니다.
FONT에서는 글자체를 골라주시고
FONT SIZE에서는 글자크기를 변경해주시면 됩니다. 글자 크기는 110이 기본으로 설정되어있지만 글씨 폰트에 따라 글자가 작아질 수도 있고 커질 수도 있으니 폰트 크기로 조금씩 조정해주시면 됩니다.

모든 설정이 마무리되면 오른쪽 위의 DOWNLOAD 버튼을 사용해서 아이콘을 다운로드 받아주시면됩니다.