티스토리뿐만 아니라 모든 웹사이트는 자신의 홈페이지가 검색될 때 뜨는 아이콘 및 파비콘을 설정을 할 수 있는데 자신의 홈페이지의 대표 이미지가 되기도 하며 홈페이지 검색 시 검색되는 대표 이미지뿐만 아니라 홈페이지의 캐릭터성을 띄기 때문에 이 부분을 설정해주시는 것도 검색 최적화 SEO 방법 중에 하나가 되며 실제 검색 요인 중에서도 이 부분이 있기도 합니다.
그렇다면 티스토리 기준이지만 기본적인 Icon과 Favicon 만들기 위해서는 사이즈 규격은 32px x 32px or 16px x 16px로 균일합니다.
아이콘 만들기
노랗 목차
아이콘 제작방법은 다양하며 기본 이미지 사이즈를 32 x 32 나 16 x 16으로 만들면 됩니다.
저는 기본적으로 포토샵을 이용한 방법으로 진행하겠습니다.
- 포토샵으로 이미지를 하나 불러옵니다.
- 그리고 오른쪽 하단에 보이는 레이어에서 이미지를 우클릭 후 레이어 복제를 눌러줍니다.
- 레이어 복제된 이름은 편한 대로 지정해줍니다.
- 상단의 이미지 -> 캔버스 크기 버튼을 눌러줍니다.
- 기본 세팅은 센터 미터로 되어 있습니다.
- 픽셀로 변경 후 폭과 높이를 32px로 변경합니다.
- 이미지보다 캔버스 크기가 작다고 뜹니다 계속을 눌러줍니다.
캔버스 크기가 작아져 이미지가 일부분만 보입니다.
Ctrl + T 버튼을 눌러 이미지를 보이는 캔버스 크기만큼 줄여줍니다.
픽셀이 줄어들어 이미지가 깨지는 것을 볼 수 있습니다.
저장을 해주시면 32 x 32 사이즈의 티스토리 아이콘이 만들어집니다.
파비콘 만들기
Favicon을 제작해주는 사이트가 있습니다.
- http://www.degraeve.com/favicon/
- http://favicon-generator.org
- http://tools.dynamicdrive.com/favicon/
- https://iconverticons.com/
저는 첫 번째 사이트를 통해 Favicon을 제작해 보겠습니다.
사이트에 접속 후 파일 선택 버튼을 눌러줍니다.
- 아까 만들었던 아이콘 이미지를 설정했으며 Crop Picture버튼으로 원하는 부분을 선택 가능합니다.
- 그리고 Favicon을 만들 땐 고해상도 이미지를 넣으면 알아서 파비콘 사이즈로 저하시켜주기 때문입니다.
이미지 말고 캐릭어 그림을 넣어서 Favion으로 만들어도 좋습니다.
단순한 이미지를 구해서 재 캐릭터를 만들어 보겠습니다.
스포이트로 원하는 부분을 더 색을 칠해 강조하고 싶은 부분을 추가할 수 있습니다.
파비콘 디자인이 완성되었다면 Make Favicon! 을 눌러주면 자동으로 만들어주며 완성이 되면 하단의 표시 부분을 선택 후 저장하면 됩니다.
티스토리 아이콘 파비콘 등록
티스토리의 블로그로 들어와 파비콘 불러오기를 선택합니다.
Icon 파일로 만들어진 Favicon 파일Icon 파일로 만들어진 Favicon 파일을 열어줍니다.
다음은 아이콘을 불러오기 해 아까 만든 32 x 32 사이즈의 이미지를 불러옵니다.
이상 Icon 과 Favicon모드 정상 세팅되었고 변경사항 저장으로 모든 작업이 완료되었습니다.
참고 : 워드프레스 로고 및 파비콘 설정방법