티스토리 꾸미기 ICO 파비콘(favicon) 만들고 변환하여 적용

반응형

 

 

본인의 티스토리가 점점 형태를 갖춘 사람들은 아마도 블로그 꾸미기에 관심이 갈 수 볶다가 생각이 듭니다. 스킨 변경이라든지 본인을 나타낼 수 있는 대표 사진 혹은 파비콘을 만들어 적용한다든지요. 저 또한 콘텐츠가 어느 정도 잡히면서 그런 쪽으로 눈이 가더군요. 대표 이미지는 제가 일러스트로 디자인으로 변경을 하였으니 이번에는 favicon을 만들어서 적용해서 티스토리에 아이덴티티를 줘보자라는 생각을 했죠. 여기서 또 제가 그냥 넘어갈 수 없는 부분이 있죠.

 

 

 

 

 

파비콘 넌 누구냐?

- 아시는 분들도 있겠지만 모든 대형검색엔진에는 사이트 옆에 작은 아이콘이 있을 겁니다. 대표적인 예로 들자면 유튜브, 구글, 네이버 정도를 사진으로 보여드릴게요.

 

노란색으로 음염표시되어있는 아이콘, 즉 그 홈페이지를 대표하는 이미지 아이콘이라고 할 수 있겠습니다. 제가 찾아본 결과 favicon는 favorite + icon 이 결합된 단어라고 합니다.

 

 

 

 

 

 

 

일러스트로 파비콘 만들기

 

 

저는 일러스트로 했기 때문에 그 기반으로 리뷰할거에요.

 

1) 새로 만들기(Ctrl+N)을 클릭하고 이름 설정 후 크기를 픽셀로 16px X 16px로 설정해줍니다.

 

 

 

2) 본인을 나타낼 수 있는 아이콘을 디자인해줍니다. 저는 SL로 한 이유가 SaLon의 단어에서 가져왔죠.

 

 

 

 

3) 파일 -> 웹용으로 저장(W)을 눌러줍니다.

 

 

 

4) 사진 형태는 jpg 혹은 PNG로 하고 저장을 눌러줍니다.

 

 

 

파비콘 ICO로 변환하기

 

 

1) 파비콘을 적용하기 위해선 ICO로 변환해야 하는데 해당 사이트는를 클릭해서 접속해줍니다.

 

 

ICO Convert - Create Icons From PNG & JPG Images Online

ICO Convert is a free online icon maker and favicon generator, with it you can make icons from png or jpg images, just upload a photo of yourself, resize and crop it, convert to a shape you like, add borders and shadows, and save it as a PNG image or Windo

icoconvert.com

 

2) 파일 선택 -> 저장한 파일 선택 -> 업로드(Upload) 클릭 -> Successfully uploaded 순서로 진행해줍니다.

 

 

 

 

3) Step2는 해당 사진을 정사각형 모양으로 잘라주는 옵션인데 선택사항이라 저는 패스하겠습니다. 

 

 

 

4) Step 3는 모양 선택인데요. 여러 가지 모양이 있죠. 하지만 전 심플한 걸 좋아해서 선택하지 않고 패스할게요.

 

 

 

 

5) 파비콘의 사이즈는 16이기 때문에 16을 선택 -> Convert ICO(변환) -> Download your icon (다운로드 아이콘) 순서대로 진행해줘서 완료를 해줍니다.

 

 

 

 

 

파비콘 적용방법

 

 

1) 티스토리로 들어와 설정 -> 관리 -> 블로그 -> 파비콘 불러오기 순서로 클릭해줍니다.

 

 

 

 

2) 불러온 후 변경사항 저장을 눌러줍니다.

 

 

 

 

3) 새로고침을 눌러주면 적용된 모습이 보입니다. 드디어 적용했어요.

 

 

 

 

반응형

댓글

Designed by JB FACTORY

loading