티스토리 블로그용 Favicon (파비콘) 1분안에 만들기

파비콘은 블로그에 필수

티스토리 블로그, 네이버 블로그, 워드프레스 웹사이트 등 오늘 무엇을 만드셨든 파비콘은 웹사이트에 필수적인 요소입니다. 

 

파비콘은 웹사이트의 대표 아이콘 

위키백과에 따르면 Favicon(파비콘)은... 

인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.

파비콘은 웹사이트를 켰을때 웹사이트 주소창에서 사이트명 바로 왼쪽에 위치하는 특별한 아이콘을 말해요. 아래 이미지와 같이 각각 사 아트는 고유의 파비콘을 가지고 있습니다. 대부분 사이트의 로고와 동일해요. 아주 작아서 사람들이 놓치기도 합니다. 몇몇 사이트는 파비콘이 없기도 하는데 그러면 최적화된 사이트가 아니겠죠?

 

파비콘 예시

파비콘 만들기

그러면 본론으로 바로 들어가서 파비콘을 1분안에 어떻게 만들 수 있는지 보여드릴게요. 일단 준비된 로고 혹은 사이트를 대표할 이미지가 필요합니다. 전 빠르게 만든 제 로고를 가지고 시도해보겠습니다. 

도전 도전 블로그 로고

파비콘 만들기 사이트 

Favicon & App Icon Generator

일단 위의 사이트에 들어가세요. 영문으로 되어있지만 제가 차근차근 알려드릴테니 진행하시면 됩니다. 

Choose File을 클릭하여 사용할 이미지 파일을 업로드하시고 Create Favicon을 클릭하여 파비콘을 생성하시면 됩니다. 그게 다예요... 할만하지 않나요? 요새는 참 좋은 무료 툴 사이트들이 많은 것 같아요. 

 

 파비콘이 만들어졌습니다. 

Download the generated favicon 을 클릭하시면 파비콘화 되어 있는 이미지 파일들이 담겨있는 압축파일이 저장됩니다. 압축을 풀게 되면 아래와 같이 다양한 사이즈와 용도에 맞게 파비콘이 존재합니다.  아래의 코드들은 코드로 html에 파비콘을 삽입할 때 적절히 사용하시면 됩니다. 

favicon.ico를 사용할거에요.

저희는 favicon.ico를 사용할거에요. 이 파일을 티스토리 아이콘으로 올릴 겁니다.파비콘은 ico의 형식을 취하는데요. ICO 파일 포맷은 마이크로소프트 윈도우의 아이콘에 쓰이는 그림 파일 포맷

입니다. 

일단 티스토리 블로그에서 관리 -> 블로그 -> 파비콘을 찾아서 불러오기를 클릭한 후 아까 다운로드한 파비콘 폴더에서 favicon.ico를 찾아서 업로드합니다. 그리고 변경사항을 저장하게 되면 티스토리 블로그의 파비콘이 바로 변경됩니다. ico 파일의 이미지는 정말 화질이 안 좋게 느껴지지만 파비콘의 사이즈를 보면 확실히 그렇게 섬세한 이미지 퀄리티가 필요 없기에 그런 것 같아요. 

 

어때요 파비콘 만들기 그리고 만들어진 파비콘 파일을 티스토리 블로그에 적용시키기, 금방 끝났죠? 도움이 되었기를 바라며 주변에 파비콘을 만들어야 하는 뉴 블로거님들에게 공유해서 알려주세요!