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

티스토리뿐만 아니라 모든 웹사이트는 자신의 홈페이지가 검색될 때 뜨는 아이콘 및 파비콘을 설정을 할 수 있는데 자신의 홈페이지의 대표 이미지가 되기도 하며 홈페이지 검색 시 검색되는 대표 이미지뿐만 아니라 홈페이지의 캐릭터성을 띄기 때문에 이 부분을 설정해주시는 것도 검색 최적화 SEO 방법 중에 하나가 되며 실제 검색 요인 중에서도 이 부분이 있기도 합니다.

그렇다면 티스토리 기준이지만 기본적인 Icon과 Favicon 만들기 위해서는 사이즈 규격은 32px x 32px or 16px x 16px로 균일합니다.

아이콘 만들기

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

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

파비콘 아이콘 만드는 방법 티스토리 워드프레스 2
  1. 포토샵으로 이미지를 하나 불러옵니다.
  2. 그리고 오른쪽 하단에 보이는 레이어에서 이미지를 우클릭 후 레이어 복제를 눌러줍니다.
  1. 레이어 복제된 이름은 편한 대로 지정해줍니다.
  2. 상단의 이미지 -> 캔버스 크기 버튼을 눌러줍니다.
  3. 기본 세팅은 센터 미터로 되어 있습니다.
  4. 픽셀로 변경 후 폭과 높이를 32px로 변경합니다.
  5. 이미지보다 캔버스 크기가 작다고 뜹니다 계속을 눌러줍니다.
파비콘 아이콘 만드는 방법 티스토리 워드프레스 8

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

파비콘 아이콘 저장
아이콘 만들기

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

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

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

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

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

파비콘 만들기

Favicon을 제작해주는 사이트가 있습니다.

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

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

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

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

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

파비콘 아이콘 만드는 방법 티스토리 워드프레스 15
Whar is a favicon?

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

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

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

파비콘 디자인이 완성되었다면 Make Favicon! 을 눌러주면 자동으로 만들어주며 완성이 되면 하단의 표시 부분을 선택 후 저장하면 됩니다.

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

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

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

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

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

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

참고 : 워드프레스 로고 및 파비콘 설정방법

Leave a Comment