티스토리 블로그: 파비콘, 아이콘 적용하기.

 

 

  파비콘은 Favorite와 Icon의 합성어로 웹 브라우저에서 즐겨찾기 또는 주소 창 앞에 뜨는 웹사이트의 아이콘을 말합니다. 주로 사용하는 크기는 16x16픽셀이고 확장자는 ico입니다. 

오늘은 이 파비콘을 티스토리에 적용시켜보겠습니다. 그리고 댓글을 쓸 때 아이뒤 앞에 표시되는 아이콘 이미지도 등록해 보겠습니다.

여러 가지 파비콘들

 

 

  파비콘을 만들기 위해서는 자신이 파비콘으로 사용할 이미지를 한 장 준비해야 하는데요.  저는 클립 스튜디오를 사용해서 350x350 픽셀의 그림 한장을, 확장자 png 파일로 만들어 두었는데요. 당연히  jpg로 만드셔도 됩니다. 이미지도 원하시는 툴로 원하시는 데로 만드시면 되겠습니다. (포토샵, 일러스트레이터, 그림판 등등)

 

 

  이미지가 준비되었으니 파비콘을 만들어주는 사이트로 들어가 보겠습니다. 저는 https://www.favicon-generator.org 이곳에서 만들었습니다. 사이트에 들어가시면 아래 그림의 빨간 박스에 보이는 '파일 선택'을 클릭해 주세요. (무료입니다. 혹시나 궁금하실 까봐서...^^)

 

  파비콘으로 사용하기 위해 만들어 두었던, 이미지를 클릭합니다. 

 

 

  파일이 선택되었으면 Create Favicon을 클릭해줍니다.  밑에 옵션 중에 첫 번째 것을 선택하면, 여러 가지 이미지를 패키지로 만들어 주기 때문에 저는 첫 번째 옵션을 사용했습니다. 두 번째 옵션은 그냥 16x16 파비콘 하나만 만들어주는 옵션입니다. 다른 이미지가 필요 없으신 분들은 사용하시면 되겠습니다.

 

 

  파비콘이 만들어졌으면, 이미지 옆의 Download the generated favicon을 클릭해서 만들어진 파비콘 이미지들을 내 컴퓨터로 저장합니다. 아래에 있는 소스들은 html로 바로 적용하시는 분들이 파비콘 적용할 때 쓰는 소스코드들입니다.

 

 

  다운 받은 파비콘의 압축을 풀어줍니다.

 

 

  패키지로 만들었기 때문에 다양한 이미지가 만들어진 것을 알 수 있습니다. 이 중에서 파비콘에 사용할 이미지는 favicon.ico입니다.

 

 

  파비콘이 잘 만들어진 것을 확인했으니, 이제 티스토리 블로그로 돌아가서, 적용만 시키면 됩니다. 적용시킬 블로그의 블로그 관리 아래의, 블로그 메뉴로 들어갑니다.

 

 

  아래의 그림과 같이 파비콘 - 불러오기 - favicon.ico 파일 클릭 - 열기를 클릭합니다.

 

 

아래와 같이 저장되는 것을 볼 수 있습니다.

 

 

  그리고 파비콘 위에 아이콘을 등록하는 곳이 있는데, 이곳에는 32x32 픽셀 이미지를 넣어주면 됩니다. 조금 전 패키지로 만든 이미지들 중에 있으니까, 바로 적용하시면 됩니다. (아이콘은 댓글 같은 것 다시면 아이뒤 앞에 보이는 이미지입니다.)

마찬가지로 아이콘 - 불러오기 - 32x32 이미지 선택 - 열기 클릭. 하시면 등록이 됩니다. 등록 후에 변경사항 저장을 꼭 눌러주세요.

 

 

  그리고 페이지 새로 고침 해주시면 아래와 같이 파비콘이 적용된 것을 볼 수 있습니다. 간단하죠~ 도움이 되었으면 좋겠네요~^^ 그럼 좋은 하루 보네시고 전 이만...