본문 바로가기
티스토리 애드센스 워드프레스

파비콘 아이콘 만드는 방법 - 티스토리 워드프레스

by 노랗_NX_블로그 노랗 2019. 8. 5.

파비콘 아이콘 만드는 방법 - 티스토리 워드프레스

티스토리뿐만 아니라 모든 웹사이트는 자신의 홈페이지가 검색될 때 뜨는 아이콘 및 파비콘을 설정을 할 수 있습니다.

 

자신의 홈페이지의 대표 이미지가 되기도 하며 홈페이지 검색 시 검색되는 대표 이미지뿐만 아니라 홈페이지의 캐릭터성을 띄기 때문에 이 부분을 설정해주시는 것도 검색 최적화 SEO 방법 중에 하나가 되며 실제 검색 요인 중에서도 이 부분이 있기도 합니다.

 

 

 

그렇다면 티스토리 기준이지만 기본적인 아이콘과 파비콘 제작 방법 및 규격은 32px x 32px or 16px x 16px로 균일합니다.

 

파비콘 아이콘 만드는 방법 - 티스토리 워드프레스

아이콘 제작방법

아이콘 제작방법은 다양하며 기본 이미지 사이즈를 32 x 32 나 16 x 16으로 만들면 됩니다.

 

 

포토샵 CC 2019 크랙 정품인증 다운로드 방법 - 노랗 IT 월드

다양한 컴퓨터정보와 IT정보를 공유하고 사회인으로서 필요한 연말정산 세금정보등을 알기 쉽게 공유합니다.

www.yellowit.co.kr

 

저는 기본적으로 포토샵을 이용한 방법으로 진행하겠습니다.

 

포토샵 레이어 복제

 

  1. 포토샵으로 이미지를 하나 불러옵니다.
  2. 그리고 오른쪽 하단에 보이는 레이어에서 이미지를 우클릭 후 레이어 복제를 눌러줍니다.

 

캔버스 크기

 

  1. 레이어 복제된 이름은 편한 대로 지정해줍니다.
  2. 상단의 이미지 -> 캔버스 크기 버튼을 눌러줍니다.

 

캔버스 크기 변경

 

  1. 기본 세팅은 센터 미터로 되어 있습니다.
  2. 픽셀로 변경 후 폭과 높이를 32px로 변경합니다.

 

 

이미지보다 캔버스 크기가 작다고 뜹니다 계속을 눌러줍니다.

 

이미지 사이즈 변경

 

캔버스 크기가 작아져 이미지가 일부분만 보입니다.

Ctrl + T 버튼을 눌러 이미지를 보이는 캔버스 크기만큼 줄여줍니다.

 

아이콘 이미지 저장

 

픽셀이 줄어들어 이미지가 깨지는 것을 볼 수 있습니다.

저장을 해주시면 32 x 32 사이즈의 티스토리 아이콘이 만들어집니다.

 

 

파비콘 만들어주는 사이트

파비콘을 제작해주는 사이트가 있습니다.

 

1.  http://www.degraeve.com/favicon/

2. http://favicon-generator.org

3. http://tools.dynamicdrive.com/favicon/

4. https://iconverticons.com/

 

저는 첫 번째 사이트를 통해 파비콘을 제작해 보겠습니다.

 

 

사이트에 접속 후 파일 선택 버튼을 눌러줍니다.

 

 

파비콘 이미지로 자동 변경

 

  1. 아까 만들었던 아이콘 이미지를 설정했으며 Crop Picture버튼으로 원하는 부분을 선택 가능합니다.
  2. 그리고 파비콘을 만들 땐 고해상도 이미지를 넣으면 알아서 파비콘 사이즈로 저하시켜주기 때문입니다.

 

파비콘 만들기

 

이미지 말고 캐릭어 그림을 넣어서 파비콘으로 만들어도 좋습니다.

단순한 이미지를 구해서 재 캐릭터를 만들어 보겠습니다.

스포이트로 원하는 부분을 더 색을 칠해 강조하고 싶은 부분을 추가할 수 있습니다.

 

파비콘 만들기

 

파비콘 디자인이 완성되었다면 Make Favicon! 을 눌러주면 자동으로 만들어줍니다.

파비콘 완성이 되면 하단의 표시 부분을 선택 후 저장하면 됩니다.

 

티스토리 아이콘 파비콘 등록

 

티스토리의 블로그로 들어와 파비콘 불러오기를 선택합니다.

Icon 파일로 만들어진 파비콘을 열어줍니다.

 

 

다음은 아이콘을 불러오기 해 아까 만든 32 x 32 사이즈의 이미지를 불러옵니다.

 

 

이상 아이콘과 파비콘 모드 정상 세팅되었고 변경사항 저장으로 모든 작업이 완료되었습니다.

티스토리 참고포스팅

 

댓글0